Analog Clock using Expression Blend and WPF

Nipun Tomar
Apr 30, 2012

49k
0
2
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

In this article I am going to create an Analog Clock with a sweeping second hand and rotate the minute and hour hands using Visual C# code, using Microsoft Expression Blend; the project type is Windows Presentation Foundation (WPF). The final work should look something like the following image:

1. We start off by designing our clock.

Open a New Project and select WPF Application, then change it's name to AnalogClock.

2. Change the background of your layout using gradient brush from the properties window according to your choice so that your screen will be like this:

3. In the Brushes section ensure that the Background is selected then click on the No brush tab and
Select the Ellipse tool from the tool box. Draw out a circle in Window1 while holding the shift key to constrain the shape of the circle.

4. While the circle is still selected change its Fill to a Gradient brush. Change the gradient to a Radial gradient and adjust its properties to look like the following image. Click on Stroke and then on the No Brush tab to remove the stroke.

5. Rename the circle as Circle1 in the Objects and Timeline panel. Now select the Brush Transform tool from the tool box to adjust the gradient to look like as follows:-

6. Copy-paste a new circle by right clicking on Circle1 in Objects and Timeline. Now, rename it to Circle2 and make it slightly smaller than Circle1. Hold ALT+SHIFT to constrain the shape of the circle while maintaining the center point and change its color to a little darker than the first one

7. With Circle2 still selected copy-paste another circle and again rename the new circle as Circle3 and resize it to make it slightly smaller than Circle2 change the Fill of Circle3 to white so that the image looks like as follows:

8. Next we draw the Minute Hand, Hour Hand, and Second Hand with the help of a Rectangle and then color them for looks. After drawing of a Minute Hand use Copy-Paste for the other two Hands and resize them by adjusting the height and width. Rename these rectangles as Minutehand, Hourhand and Secondhand accordingly.

9. Change their center points by clicking on the bottom center point in the Translate tab of the Transform section.

10. We will now get our Rectangle's (Hour, Minute, Second) center point to align with that of our circles. Select Circle3 and copy-paste a new circle, resize it as a Centre point of our clock by holding ALT+SHIFT then change its Fill to a color of your own choice and also rename it to CentrePoint.

11. Now with the help of label we will show the numbering on a clock and for that Select a label from the toolbox and rename it to "Label12", change its content from the common properties menu as "12" and set its fill as white, BorderBrush as No Brush and place it on top as shown in the
Image:

12. Use Copy-Paste Option to Draw all Numbers (1,2,3,4,5,6,7,8,9,10,11) and place them by changing their margins. After this our design will change like this:

Note: You can change the effects and design according to your choice.

13. In this step we use a textbox to show the current date. Select a text box from the tool Window and draw it to the bottom of the CentrePoint and make it Blank from the Common Properties -> Text -> " "(Blank) and properties should be like this:

14. In order to make our clock work we shall write some code that will rotate triangles Hourhand, Minutehand and Secondhand by certain angles at specific intervals. To achieve this we shall create two RotateTransform objects and set their Angle properties to various values at a set interval.
Expand Window1.xaml and double click on Window1.xaml.cs to open the code behind file in Blend's code editor. If you are using Expression Blend 2 then in the Project panel right click Solution and select 'Edit In Visual Studio' from the context menu.

CODING :
// Create an instance of RotateTransform objects
private RotateTransform MinHandTr = new RotateTransform();
private RotateTransform HourHandTr = new RotateTransform();
private RotateTransform SecHandTr = new RotateTransform();
// Create an instance of DispatcherTimer

private DispatcherTimer dT = new DispatcherTimer();
// to set the Angles for the Minutehand, Hourhand, Secondhand

public void dispatcher_Tick(object source, EventArgs e)
{
   MinHandTr.Angle = (DateTime.Now.Minute *6);
   HourHandTr.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute*0.5);
   Minutehand.RenderTransform = MinHandTr;
   Hourhand.RenderTransform = HourHandTr;
}
// to set the Date in the textbox

textBox1.Text = DateTime.Now.ToShortDateString();

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace Analog_clock
{
   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow
   {
   //Create an instance of RotateTransform objects
   private RotateTransform MinHandTr = new RotateTransform();
   private RotateTransform HourHandTr = new RotateTransform();
   private RotateTransform SecHandTr = new RotateTransform();

   //Create an instance of DispatcherTimer
   private DispatcherTimer dT = new DispatcherTimer();
   public MainWindow()
   : base()
     {
   Loaded += Window1_Loaded;
   this.InitializeComponent();
   // Insert code required on object creation
   // below this point.
   }
   public void dispatcher_Tick(object source, EventArgs e)
   {
     MinHandTr.Angle = (DateTime.Now.Minute *6);
     HourHandTr.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5);
     textBox1.Text = DateTime.Now.ToShortDateString();
   Minutehand.RenderTransform = MinHandTr;
   Hourhand.RenderTransform = HourHandTr;
     }
   private void Window1_Loaded(object sender, System.Windows.RoutedEventArgs e)
   {
   dT.Tick += dispatcher_Tick;
   //Set the interval of the Tick event to 1 sec
   dT.Interval = new TimeSpan(0, 0, 1);
   //Start the DispatcherTimer
   dT.Start();
   secondHandTransform.Angle = (DateTime.Now.Second * 6);
   }
   }
}

15. To create a sweeping second hand we should use the storyboard so that we can animate secondhand to sweep.

16. Click on the trigger Window and Add event to it as shown:

17. On window load Event Add new Action a pop-up appeared that "No Story board exists for you to begin or to control. One will be created" click ok.

18. The code for Second Hand Animation is as under:

19. Now its time to run your application you will get a good looking clock running on your system screen

MainWindow.xaml

Recommended Free Ebook

Printing in C# Made Easy

Download Now!