Silverlight闹钟

一:截图

技术分享

二:XAML代码

<UserControl x:Class="SilverlightClock.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="400" Width="400">

    <Grid x:Name="LayoutRoot" Loaded="SetAndStartClock">
        <!-- 时钟的阴影 -->
        <Ellipse Fill="#FF000000" Height="330" Margin="42,42,28,28" 
          Opacity="0.3" Width="330" />
        <!-- 时钟的外边缘 -->
        <Ellipse Height="330" Margin="35,35,35,35" Stroke="#FF000000" Width="330" >
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
                    <GradientStop Color="#FFE4E5F4" />
                    <GradientStop Color="#FFC0C0C0" Offset="0.254"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!-- 时钟的斜边 -->
        <Ellipse Height="290" Margin="55,55,55,55" Width="290" Stroke="#FF000000">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
                    <GradientStop Color="#FF2F2F32"/>
                    <GradientStop Color="#FFE4E5F4" Offset="0.987"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!-- 时钟的表盘 -->
        <Ellipse Fill="#FF000000" Height="270" Margin="65,65,65,65" 
  Stroke="#FF000000" Width="270" />
        <!-- 时钟的中心椭圆 -->
        <Ellipse Fill="#FF000000" Height="30" Margin="185,185,185,185" 
  Stroke="#FF008000" StrokeThickness="8" VerticalAlignment="Top" 
  Width="30" />

        <!-- 秒针 -->
        <Rectangle x:Name="secondHand" Fill="#FFFF0000" Height="80" 
  Margin="198,90,197,0"  RenderTransformOrigin="0.45,1.34" 
  Stroke="#FF000000" VerticalAlignment="Top" Width="5" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="secondHandTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- 分针 -->
        <Rectangle x:Name="minuteHand" Fill="#FF008000" Height="80" 
  Margin="196,90,195,0" RenderTransformOrigin="0.45,1.34" 
  Stroke="#FF008000" VerticalAlignment="Top" Width="9" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="minuteHandTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- 时针 -->
        <Rectangle x:Name="hourHand" Fill="#FF008000" Height="60" 
  Margin="195,110,194,0" RenderTransformOrigin="0.45,1.45" 
  Stroke="#FF008000" VerticalAlignment="Top" Width="11" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="hourHandTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
    <!--时钟指针动画-->
    <UserControl.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>
    </UserControl.Resources>
</UserControl>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。