如何为 8.1 RT 修复 XAML 中的时钟指针

Question

以下代码没有将手放在中心。 XAML?

            <Grid x:Name="ClockGrid" Grid.Row="3" Grid.ColumnSpan="2" Width="270" Height="270" >
            <Image Source="Assets/backGround.png"/>
            <Rectangle Margin="0,-125,0,0" Width="3" Name="rectangleSecond" StrokeThickness="3" Stroke="White" Height="100">
                <Rectangle.RenderTransform>
                    <RotateTransform x:Name="secondHand" CenterX="0" CenterY="120" Angle="0" />
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="rectangleMinute" Margin="0, -100,0,0" StrokeThickness="3" Width="4" Stroke="LightGreen" Height="80">
                <Rectangle.RenderTransform>
                    <RotateTransform x:Name="minuteHand" CenterX="0" CenterY="90" Angle="0" />
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Name="rectangleHour" Margin="0,-80,0,0" Width="5" StrokeThickness="5"  Stroke="LightYellow" Height="60">
                <Rectangle.RenderTransform>
                    <RotateTransform x:Name="hourHand" CenterX="0" CenterY="70" Angle="0" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>

我的后台代码：

        private void Clock_Tick(object sender, object e) {
         secondHand.Angle = DateTime.Now.Second * 6;
         minuteHand.Angle = DateTime.Now.Minute * 6;
         hourHand.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5); }

Answer 1

我会为手使用网格（没有背景），设置为填充宽度和高度，旋转变换完美居中。然后你可以把你喜欢的任何东西放到每个网格上来代表手本身。这是单手的想法：

    <Grid Width="100" Height="100">
        <Grid RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="20"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Rectangle HorizontalAlignment="Center" Width="10" Height="60" Fill="#FF42F00F" VerticalAlignment="Top" />
        </Grid>
    </Grid>

Answer 2

这与您所做的类似，但多段线用于绘制时钟指针而不是矩形。网格是一个 144 x 144 的正方形，每只手都在其中居中。你可以说它涉及更多 "hard coding"，但是，嘿，它完成了工作！

<Grid HorizontalAlignment="Center" VerticalAlignment="Center"
        Width="144" Height="144">
    <Grid.Resources>
        <Style TargetType="Polyline">
            <Setter Property="Stroke"
                    Value="{StaticResource ApplicationForegroundThemeBrush}"/>
        </Style>
    </Grid.Resources>
    <Border BorderBrush="White" BorderThickness="2"/>

    <Polyline Points="72 80, 72 24" StrokeThickness="6">
        <Polyline.RenderTransform>
            <RotateTransform x:Name="hourHand" Angle="0" 
                                CenterX="72" CenterY="72" />
        </Polyline.RenderTransform>
    </Polyline>

    <Polyline Points="72 88, 72 12" StrokeThickness="3">
        <Polyline.RenderTransform>
            <RotateTransform x:Name="minuteHand" Angle="10" 
                                CenterX="72" CenterY="72" />
        </Polyline.RenderTransform>
    </Polyline>

    <Polyline Points="72 88, 72 6" StrokeThickness="1">
        <Polyline.RenderTransform>
            <RotateTransform x:Name="secondHand" Angle="30" 
                                CenterX="72" CenterY="72" />
        </Polyline.RenderTransform>
    </Polyline>
</Grid>

后面的代码：

public MainPage()
{
    this.InitializeComponent();

    DispatcherTimer timer = new DispatcherTimer();
    timer.Tick += Timer_Tick;
    timer.Start();
}

private void Timer_Tick(object sender, object e)
{
    DateTime dateTime = DateTime.Now;
    this.hourHand.Angle = 30 * dateTime.Hour + dateTime.Minute / 2;
    this.minuteHand.Angle = 6 * dateTime.Minute + dateTime.Second / 10;
    this.secondHand.Angle = 6 * dateTime.Second + dateTime.Millisecond / 166;
}

致谢：Charles Petzold - "Programming Windows 6 ed"

如何为 8.1 RT 修复 XAML 中的时钟指针

How to fix the hands of Clock in XAML for 8.1 RT

c#

xaml

clock