学了wp开发,就想开发应用,于是网上搜了一下,发现时钟案例 介绍的蛮多的,于是就决定是这个了。
时钟案例的重点就是DoubleAnimation,
<DoubleAnimation x:Name="HourAnimation"
Storyboard.TargetName="HourHandTransform"
Storyboard.TargetProperty="Angle"
Duration="12:0:0" RepeatBehavior="Forever" To="360" />
但是在这个案例中我还了解到了style的用法(这个应该是这个应用的最大收获)
话不多说 上代码:
<phone:PhoneApplicationPage.Resources>
<Style x:Name="ClockFace" TargetType="Ellipse">
<Setter Property="Width" Value="400"></Setter>
<Setter Property="Height" Value="400"></Setter>
<Setter Property="StrokeThickness" Value="9" />
</Style>
<Style x:Name="ClockHand" TargetType="Rectangle">
<Setter Property="Stroke" Value="White"></Setter>
</Style>
<Style x:Name="ClockCenter" TargetType="Ellipse">
<Setter Property="Stroke" Value="Red"></Setter>
<Setter Property="Fill" Value="Blue" />
</Style>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot 是包含所有页面内容的根网格-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel 包含应用程序的名称和页标题-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="开发案例1" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid Width="400" Height="400">
<Ellipse x:Name="ClockEllipse" Style="{StaticResource ClockFace}" Stroke="White" />
<Canvas x:Name="ClockHandsCanvas">
<Canvas.Resources>
<Storyboard x:Name="ClockStoryboard">
<DoubleAnimation x:Name="HourAnimation"
Storyboard.TargetName="HourHandTransform"
Storyboard.TargetProperty="Angle"
Duration="12:0:0" RepeatBehavior="Forever" To="360" />
<DoubleAnimation x:Name="MinuteAnimation"
Storyboard.TargetName="MinuteHandTransform"
Storyboard.TargetProperty="Angle"
Duration="1:0:0" RepeatBehavior="Forever" To="360" />
<DoubleAnimation x:Name="SecondAnimation"
Storyboard.TargetName="SecondHandTransform"
Storyboard.TargetProperty="Angle"
Duration="0:1:0" RepeatBehavior="forever" To="360" />
</Storyboard>
</Canvas.Resources>
<!--seconde handler-->
<Rectangle Width="4" Height="230" RadiusX="2" RadiusY="2" Style="{StaticResource ClockHand}"
Canvas.Left="198" Canvas.Top="20" Fill="White">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="2" CenterY="180" x:Name="SecondHandTransform" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<!--Minute-->
<Rectangle Width="8" Height="145" RadiusX="4" RadiusY="4" Style="{StaticResource ClockHand}"
Canvas.Left="196" Canvas.Top="60" Fill="White">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="4" CenterY="140" x:Name="MinuteHandTransform" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<!--Hour-->
<Rectangle Width="10" Height="105" RadiusX="5" RadiusY="5" Style="{StaticResource ClockHand}"
Canvas.Left="195" Canvas.Top="100" Fill="White">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="5" CenterY="100" x:Name="HourHandTransform" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Ellipse Width="10" Height="10" Style="{StaticResource ClockCenter}" Canvas.Left="195" Canvas.Top="195" />
</Canvas>
</Grid>
</Grid>
</Grid>
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
var now = DateTime.Now;
double hourAngle = ((float)now.Hour) / 12 * 360 + now.Minute / 2;
double minuteAngle = ((float)now.Minute) / 60 * 360 + now.Second / 10;
double secondAngle = ((float)now.Second) / 60 * 360;
HourAnimation.From = hourAngle;
HourAnimation.To = hourAngle + 360;
MinuteAnimation.From = minuteAngle;
MinuteAnimation.To = minuteAngle + 360;
SecondAnimation.From = secondAngle;
SecondAnimation.To = secondAngle + 360;
this.ClockStoryboard.Begin();
}
结果:
作者: 61Mobile,参考地址: http://www.61ic.com/Mobile/WindowsPhone/201103/30098.html