如何在8.1RT中修复XAML中的时钟指针
如何在8.1RT中修复XAML中的时钟指针
提问于 2015-05-17 23:42:41
下面的代码没有将手放在中间。在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); }回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-18 00:27:30
这与你所做的很相似，但是多条线被用来画时钟的指针而不是矩形。网格是一个144 x 144平方，每一只手都在它的中心。你可以说它涉及更多的“硬编码”，但嘿，它做的工作！
<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 -“编程Windows 6编辑”
Stack Overflow用户
发布于 2015-05-17 23:58:48
我会使用网格的手(没有背景)，设置为填充宽度和高度，旋转转换完美地居中。然后，你可以把你喜欢的任何东西放到每个网格上来表示手本身。这里有一个只有一只手的想法：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30293269
复制相关文章
相似问题
腾讯云开发者
