如何制作简单的WPF时钟

// MainWindow.xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:customControl="clr-namespace:BrawDraw.Com.WPF.Clock.ControlLibrary;
assembly=CustomControlLibrary"
xmlns:local="clr-namespace:BrawDraw.Com.WPF.Clock"
x:Class="BrawDraw.Com.WPF.Clock.Window1"
Title="WPF Clock" Height="394" Width="332"
>
<StackPanel HorizontalAlignment="Center">
<StackPanel.Resources>
<local:SecondsConverter x:Key="secondsConverter"/>
<local:MinutesConverter x:Key="minutesConverter"/>
<local:HoursConverter x:Key="hoursConverter"/>
<local:WeekdayConverter x:Key="weekdayConverter"/>
   <Style x:Key="AnalogClock" TargetType="{x:Type customControl:Clock}">
    <Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type customControl:Clock}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="108" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="108" />
</Grid.RowDefinitions>
<Ellipse Width="108" Height="108" StrokeThickness="3" Grid.Row="0" 
Grid.Column="0">
<Ellipse.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="LightBlue" Offset="0" />
<GradientStop Color="DarkBlue" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" 
Width="104" Height="104" StrokeThickness="3">
<Ellipse.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="DarkBlue" Offset="0" />
<GradientStop Color="LightBlue" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.96,0.972" StartPoint="0.017,0.03">
<GradientStop Color="#FFFAF9F6" Offset="0"/>
<GradientStop Color="#FF539BDF" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,30"  
VerticalAlignment="Bottom" FontSize="10" Name="MonthDay" 
Text="{Binding Path=DateTime, 
           RelativeSource={RelativeSource TemplatedParent}, 
           Converter={StaticResource weekdayConverter}}"/>
<!-- 下面这一部分有待改进，使用C#代码控制起来会更方便，且更有利于代码的维护 -->
<Canvas Width="102" Height="102">
<Ellipse Width="8" Height="8" Fill="Black" Canvas.Top="46" 
Canvas.Left="46" />
<Rectangle Canvas.Top="5" Canvas.Left="48" Fill="Black" 
Width="4" Height="8">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="0" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="30" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="60" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="48" Fill="Black" 
Width="4" Height="8">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="90" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="120" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="150" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="48" Fill="Black" 
Width="4" Height="8">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="180" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="210" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="240" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="48" Fill="Black" 
Width="4" Height="8">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="270" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="300" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Canvas.Top="5" Canvas.Left="49" Fill="Black" 
Width="2" Height="6">
<Rectangle.RenderTransform>
<RotateTransform CenterX="2" CenterY="46" Angle="330" />
</Rectangle.RenderTransform>
</Rectangle>
<!-- 时钟、分针和秒针的显示 -->
<Rectangle x:Name="HourHand" Canvas.Top="21" Canvas.Left="48" 
Fill="Black" Width="4" Height="30">
<Rectangle.RenderTransform>
<RotateTransform Angle="{Binding Path=DateTime, 
              RelativeSource={RelativeSource TemplatedParent}, 
              Converter={StaticResource hoursConverter}}" CenterX="2" 
              CenterY="30"></RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="MinuteHand" Canvas.Top="10" Canvas.Left="51" 
Fill="DarkOrange" Width="2" Height="40">
<Rectangle.RenderTransform>
<RotateTransform Angle="{Binding Path=DateTime, 
              RelativeSource={RelativeSource TemplatedParent}, 
              Converter={StaticResource minutesConverter}}" CenterX="1" 
              CenterY="40"></RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="SecondHand" Canvas.Top="4" Canvas.Left="49" 
Fill="Red" Width="1" Height="47">
<Rectangle.RenderTransform>
<RotateTransform Angle="{Binding Path=DateTime, 
              RelativeSource={RelativeSource TemplatedParent}, 
              Converter={StaticResource secondsConverter}}" CenterX="0.5" 
              CenterY="47"></RotateTransform>
          </Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<customControl:Clock x:Name="customControlClock" FontFamily="Arial" />
<customControl:Clock x:Name="customControlAnalogClock" 
Style="{StaticResource AnalogClock}" RenderTransformOrigin="0.388,0.66" 
Width="121" Height="112" />
</StackPanel>
</Window>
(已用粗体标注重要的部分)