Home > Programming, Silverlight > Creating a Silverlight 4 clock control

Creating a Silverlight 4 clock control

This post assumes you have basic experience with Silverlight, C# and the VS 2010 IDE.

Source code: here

Requirements: Windows 7, VS 2010 Professional, Ultimate or Express, Silverlight 4 Tools for VS 2010 and…a learning mood :)

So start up VS 2010 and let’s have some fun 😉

1. Create a new project -> Silverlight Application. I named mine FancyClock .

Then click OK.

2. In the following screen click OK:

3. I usually remove the Test aspx page and rename the Test html page to Default.html If you do so, make sure that you right click the Default.html page and then select Set as Start Page.

4. Right click MainPage.xaml and then select Open in Expression Blend.

5. We start by designing the chrome of the clock and the visual elements.

Click and hold the Rectangle item in toolbox on the left until this submenu appears:

Select the ellipse item. Then holding the Shift key click and drag on the form to create a circle. Don’t worry about the exact size. You can make it any size you want. The idea is to be large enough so the clock will be readable. The first circle should look like this:

6. On to creating the outer rim of the clock. Click on the selection tool or simply press “V”. With the ellipse now selected head over to the property pane on the right and change the Stroke to something gray.

7. Now let’s center the circle. Go over to the HorizontalAlignment property in the right property pane and set it to Center. Do the same for the VerticalAlignment.

8. Now the circle has disappeared. Where did it go? It’s still there but it doesn’t have a height and a width. When creating a circle on the form, Blend positions the element by using margins, so the width and height adjust automatically in correlation to the margins and the available form size. By centering the element horizontally and vertically we broke it’s size. So to fix this we click on the advanced options (white dot) on the right of the Margin property and then click reset.

9. Next set the Width and the Height properties of the ellipse to 200×200 and the ellipse will now reappear:

10. Select the Fill brush and then the Gradient tab. Click the first gradient stop and change it to something lighter, like this:

11. Next click the gradient tool in the left toolbox or hit the “G” key:

12. Now holding the shift key rotate the gradient like so:

13. Let’s create now the inner rim of the clock. Select the Ellipse tool or press the “L” key and then holding the Shift key draw a new circle on the form (no matter where because we’ll rearrange it).

14. With this second circle selected head over to the property pane on the right and set the HorizontalAlignment and VerticalAlignment to Center, Reset the Margin property (as we did in Step 8). Set the Width and Height of the circle to 180 pixels. The result should look similar to this:

15. Select the Fill brush and set the gradient to a blueish color like this:

16. Let’s add the clock’s dial with hours and minutes. For this click on the arrow shaped item in the left toolbox and then type PathListBox:

17. Click on the PathListBox item

18. Double click the PathListBox in the toolbox to create a default sized PathListBox:

19. Let’s add 12 items to the PathListBox to represent the 12 hours on the clock.

Select the Line tool in the left toolbox or just press the “\” key

20. Holding the shift key draw a line. Reset the Fill and set the Stroke to a gray color like so:

21. Change the StrokeThickness of the line to 2, reset the Width of the path and set the Height to 15 pixels. You should have the first tick marker for hours:

22. Cut and paste this path in the PathListBox Item in the Objects and Timeline pane on the left.

23. Now you can copy the Path item and paste it another 11 times to have all the ticks for the hours.

24. Select the LayoutRoot in the Objects and Timeline left pane:

25. Create a new circle by hitting the L key and drawing it on the form. This will be the path for our PathListBox. Repeat the instructions in Step 14 but  now set the Width and Height to 165 pixels and reset the Stroke brush. Now select the PathListBox in the Objects and Timeline left pane. Reset the Width and Height of the PathListBox then go to the properties pane on the right and find the Layout Paths property group:

26. Click the select an object to use as a LayoutPath and then click the last Ellipse in the Objects and Timeline panel.

You should be looking at something like this:

27. In the Layout Paths property sheet change the Orientation to OrientToPath and the distribution to Even:

28. Copy an item from the PathListBox and paste it. Then change that path’s Height to 8 pixels and it’s StrokeThickness to 1:

29. Now paste 4 minute items between each hour items. The result should look like this:

30. Let’s create the clock’s hour hand. Select the LayoutRoot in the Objects and Timeline panel and then select the Rectangle tool in the toolbox or hit the “M” key. Draw a rectangle on the form with 8 pixels Width and 46 pixels Height.

Reset the Margin property and set the Horizontal and Vertical Alignment to Center and turn on snapping to gridlines:

31. Set the Bottom margin of the rectangle to 42 pixels and then move the center of the rectangle to match the center of the ellipse. Finally change the Fill to a blueish color and reset the Stroke:

32. Let’s create the minute handle. Copy and paste the hour handle and change the Width to 4 pixels, the Height to 80 pixels and the Bottom margin to 76 pixels.

33. Copy and paste the minute handle and change the Width to 2 pixels, the Height to 90 pixels and the Bottom margin to 88 pixels. Also change it’s Fill to a redish color. The clock should now look similar to this:

34. To start the clock we need to add some markup in the xaml first. Press the Tab key and then change to xaml view:

Paste the following code between the Rectangle tags and change the names according to the selected Rectangle (hourTransform, minuteTransform, secondTransform)

<Rectangle Width="8" Height="46" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,42"
 RenderTransformOrigin="0.5,0.978" Fill="#FF4483D8">
 <RotateTransform x:Name="hourTransform" />
 <Rectangle Width="4" Height="80" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,76"
 RenderTransformOrigin="0.5,0.978" Fill="#FF4483D8">
 <RotateTransform x:Name="minuteTransform" />
 <Rectangle Width="2" Height="90" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,88"
 RenderTransformOrigin="0.5,0.978" Fill="#FFED2222">
 <RotateTransform x:Name="secondTransform" />

35. Head back to Visual Studio and when prompted to reload files click Yes To All.

PS: Remember to always save your work every 10 minutes by pressing Ctrl+S to save the current file or Ctrl+Shift+S to save all files.

Paste in the following code in the MainPage.xaml.cs:

using System;
using System.Windows.Controls;
using System.Windows.Threading;

namespace FancyClock
  public partial class MainPage : UserControl
    private DispatcherTimer dt = null;

    public MainPage()
      dt = new DispatcherTimer();
      dt.Tick += new EventHandler(Clock_Tick);
      dt.Interval = TimeSpan.FromSeconds(1);

    private void Clock_Tick(object sender, EventArgs e)
      secondTransform.Angle = DateTime.Now.Second * 6;

      minuteTransform.Angle = DateTime.Now.Minute * 6;

      int hr = DateTime.Now.Hour;
      if (hr >= 12)
        hr = hr - 12;

      hourTransform.Angle = (hr * 30) + DateTime.Now.Minute / 2;

36. Hit F5 and enjoy the result 🙂

  1. Radu Olaru
    16/05/2010 at 10:54 pm

    Wow, that was quite a long article and worth reading every bit. You built a very useful control there and I welcome your effort to share it with the rest of the world.

  2. Radu Olaru
    16/05/2010 at 10:57 pm

    By the way, can you actually use this as a time picker?

    • 16/05/2010 at 10:59 pm

      To make this a time picker it should allow the user to move the handles for second, minute and hour and disable the binding to the current date and time.

      • 16/05/2010 at 11:01 pm

        But it might be difficult for a user to set the time using such a control…unless he is using a device with a touch screen 😉

  3. 30/11/2011 at 11:03 am

    Very detail tut, thanks for your post.

  1. 02/01/2011 at 2:12 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: