WPF实现漂亮的自定义时钟（带示例代码）

 

学了几天的WPF了，根据所学的东西东拼西凑做了个时钟控件，先看效果

下面写一点做这个控件的要点：

1.首先准备4张图，我是用Expression Design自己绘制了时钟的圆盘背景（xaml描述的矢量图形）和三根表针（png格式）

2.创建WPF的UserControl将这些文件加入到项目中，当然创建window不做控件也没关系

3.写控件xaml文件中的代码，下面说一下我的方法

<UserControl x:Class="YJClock.Clock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="YJClock"
    Height="244" Width="249" Unloaded="UserControl_Unloaded" Background="{DynamicResource back}">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="./Image/ClockBack.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Height="239" Width="245" >
        <Border Name="BordSecond" Margin="121,119,111,20">
            <Border.Background>
                <ImageBrush ImageSource="./Image/Second.png"></ImageBrush>
            </Border.Background>
            <Border.RenderTransform>
                <RotateTransform x:Name="RTSecond"></RotateTransform>-----针的旋转，关于旋转可以看前一篇博客
            </Border.RenderTransform>
        </Border>
        -----------------时针和分针同上--------------------
    </Grid>
</UserControl>

4.在cs文件中处理根据时间处理针的转动就可以了，关于这个可以用DispatcherTimer类处理，示例

dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 1); dispatcherTimer.Start(); RTSecond.Angle = DateTime.Now.Second * 6 + 180; 
 

 最后给一个已经引用好时钟控件的下载，大家可以看下效果（匆匆忙忙做完还有些问题没有解决，先不发出来误导大家，有兴趣的可以给我留言，这里就暂不提供源码了），这个实例带有微软空心圆发散实例的代码，效果也很不错，供新手学习一下

示例代码下载