Get Microsoft Silverlight

Wednesday, March 14, 2007

Simple WPF Clock using Microsoft Expression Blend

Today I spend some time playing with Microsoft Expression Blend. and thought of creating a XAML Clock using Blend itself. Surprisingly it took less than 2 hours for me to create a good looking Clock. Here is the preview of my XAML Clock.

Below are the simple design steps I followed.
1) Created a Class TimeAngles which stores Angles corresponds to Hour,Minute and second.

2) Created an IValueConverter class for converting the DateTime.Now to Angles.

3) Bounded the each Angle properties of TimeAngles class to the Rotation RenderTransform of each Clock Hand (Which are Rectangle in my code)

4) Updated the DataContext of Clock in each second through a Despatcher Timer.

Here is a screen shot of the project opened up my Blend. I have used BitMapEffect extensively to achieve this kind of a UI.

Source code is Available here