Post
Ask Question

Analog Clock Widget

Introduction

You might have seen many analog clocks made in either in blend 3 or Silverlight 2/3. But the code they used to provide is very hard to follow. Here we will try to minimize the code. Actually I got fed up with the code itself tried the old school.

Clock1.gif

Figure 1.1 Analog Clock Widget

Steps

To begin with we need the following requirements:

  1. Silverlight 3
  2. Visual Studio 2008 SP1
  3. Expression Blend 3

Creating a Silverlight Project with or without RIA enabled

  1. Create project in Visual Studio and open the solution in Expression Blend 3.
  2. The following figure will guide you for that.

Clock2.gif

Figure 1.2 Create a new Silverlight project

Clock3.gif

Figure 1.3 Uncheck the bottom checkbox to create the project without RIA support

Designing the User Control in Expression Blend 3

The User Control we are going to make should contain a background which matches an analog clock. I am taking a simple .png file which is looking simple.

Clock4.gif

Figure 1.4 Analog Clock Background.

Now our task is to create hour hand, minute hand and second hand. We will take rectangle control and design a simple second hand; as you can see from the figure. We will further modify it to create our next two shapes that is minute hand and hour hand the below figure and XAML code will help you regarding this.

Clock5.gif

Figure 1.5 Designing the rectangular shapes.

The XAML will look like the following after all the design changes above.

  1. <UserControl  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="AnalogClockSilverlight.MainPage"   
  5.     Width="260" Height="260" mc:Ignorable="d">  
  6.   
  7.       <Grid x:Name="LayoutRoot">  
  8.       <Grid.RowDefinitions>  
  9.             <RowDefinition Height="*"/>  
  10.       </Grid.RowDefinitions>  
  11.       <Grid.ColumnDefinitions>  
  12.             <ColumnDefinition Width="*"/>  
  13.       </Grid.ColumnDefinitions>  
  14.   
  15.             <Image Source="images/myClock.png" d:IsLocked="True"/>  
  16.   
  17.             <Path x:Name="SecondHand" Stretch="Fill" Stroke="#00000000" Height="88" Margin="128.47,48,126.808,0" VerticalAlignment="Top" RenderTransformOrigin="0.394,0.941" Data="M0.5,0.5 L4.5,0.5 L4.5,95.5 L0.5,95.5 z" UseLayoutRounding="False" d:IsLocked="True">  
  18.             <Path.Fill>  
  19.                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  20.                         <GradientStop Color="#FFF80500" Offset="0.274"/>  
  21.                         <GradientStop Color="#FFDBA63C" Offset="0.9"/>  
  22.                   </LinearGradientBrush>  
  23.             </Path.Fill>  
  24.             <Path.RenderTransform>  
  25.                   <TransformGroup>  
  26.                         <RotateTransform  x:Name="SecondRotate" Angle="0"/>  
  27.                   </TransformGroup>  
  28.             </Path.RenderTransform>  
  29.       </Path>  
  30.       <Path x:Name="MinuteHand" Stretch="Fill" Stroke="#00000000" Height="76.25" Margin="128.331,59.75,126.669,0" VerticalAlignment="Top" RenderTransformOrigin="0.4,0.923" Data="M0.5,0.5 L4.5,0.5 L4.5,95.5 L0.5,95.5 z" UseLayoutRounding="False" d:IsLocked="True">  
  31.             <Path.Fill>  
  32.                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  33.                         <GradientStop Color="#FF80AACF" Offset="0.509"/>  
  34.                         <GradientStop Color="#FF46B644" Offset="1"/>  
  35.                   </LinearGradientBrush>  
  36.             </Path.Fill>  
  37.             <Path.RenderTransform>  
  38.                   <TransformGroup>  
  39.                         <RotateTransform  x:Name="MinuteRotate" Angle="0"/>  
  40.                   </TransformGroup>  
  41.             </Path.RenderTransform>  
  42.       </Path>  
  43.       <Path x:Name="HourHand" Stretch="Fill" Stroke="#00000000" Height="52.5" Margin="128.331,83.5,126.669,0" VerticalAlignment="Top" RenderTransformOrigin="0.4,0.889" Data="M0.5,0.5 L4.5,0.5 L4.5,95.5 L0.5,95.5 z" UseLayoutRounding="False" d:IsLocked="True">  
  44.             <Path.Fill>  
  45.                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  46.                         <GradientStop Color="#FF539DDE" Offset="0.73"/>  
  47.                         <GradientStop Color="#FF46B644" Offset="1"/>  
  48.                         <GradientStop Color="#FF47B546" Offset="1"/>  
  49.                   </LinearGradientBrush>  
  50.             </Path.Fill>  
  51.             <Path.RenderTransform>  
  52.                   <TransformGroup>  
  53.                         <RotateTransform  x:Name="HourRotate" Angle="0"/>  
  54.                   </TransformGroup>  
  55.             </Path.RenderTransform>  
  56.       </Path>  
  57.     </Grid>  
  58. </UserControl>  
Rotating the Second Hand

This is simple mathemtics for rotating second hand. As it travels 360 degrees in 60seconds so it will rotate 6 degrees in each second. See the below code.

  1. double secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString());  
  2. secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString())*6;  
  3. //SecondRotate is the rectangle name  
  4. SecondRotate.Angle = secondRotateValue;  
Rotating the Minute Hand & Hour Hand

Now we have to go back to our college days and find out the logic for finding out the angle rotated by the minute hand or the hour hand. Or you can search it in google. The formula says as follows:

  1. double hourRotateValue = Convert.ToDouble(DateTime.Now.Hour.ToString());  
  2. double minuteRotateValue = Convert.ToDouble(DateTime.Now.Minute.ToString());  
  3. minuteRotateValue = (minuteRotateValue + secondRotateValue/60)* 6;  
  4. SecondRotate.Angle = secondRotateValue;  
  5. MinuteRotate.Angle = minuteRotateValue;  
Ticking in Real Time

If you want to tick your second hand in real time, then you need to add the following event and write the following codes.
  1. public partial class ClockWidget : UserControl  
  2. {  
  3.     public ClockWidget()  
  4.     {  
  5.         InitializeComponent();  
  6.         StartTimer(null, null);  
  7.     }  
  8.     public void StartTimer(object o, RoutedEventArgs sender)  
  9.     {  
  10.         System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();  
  11.         myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 1000); // 100 Milliseconds  
  12.         myDispatcherTimer.Tick += new EventHandler(Each_Tick);  
  13.         myDispatcherTimer.Start();  
  14.     }  
  15.   
  16.     // Fires every 1000 miliseconds while the DispatcherTimer is active.  
  17.     public void Each_Tick(object o, EventArgs sender)  
  18.     {  
  19.         double hourRotateValue = Convert.ToDouble(DateTime.Now.Hour.ToString());  
  20.         double minuteRotateValue = Convert.ToDouble(DateTime.Now.Minute.ToString());  
  21.         double secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString());  
  22.         hourRotateValue = (hourRotateValue + minuteRotateValue / 60) * 30;  
  23.         minuteRotateValue = (minuteRotateValue + secondRotateValue / 60) * 6;  
  24.         secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString()) * 6;  
  25.         SecondRotate.Angle = secondRotateValue;  
  26.         MinuteRotate.Angle = minuteRotateValue;  
  27.         HourRotate.Angle = hourRotateValue;  
  28.     }  
  29. }  
Enjoy the Clock Widget, hope you like it.


Similar Articles