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; 
 

 最後給一個已經引用好時鐘控件的下載，大家可以看下效果（匆匆忙忙做完還有些問題沒有解決，先不發出來誤導大家，有興趣的可以給我留言，這裏就暫不提供源碼了），這個實例帶有微軟空心圓發散實例的代碼，效果也很不錯，供新手學習一下

示例代碼下載