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.



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.

Figure 1.2 Create a new Silverlight project



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.



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.



Figure 1.5 Designing the rectangular shapes.

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