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

Comments

Platypus said…
Hi Jobi!

I'm very interested to have a look at your code, but I can't download it... (we cannot open new account on the download blog!).

Can you send me your code on my mail please? ( platypus_sparta[at]hotmail.com)

Thx very much!
Monday, July 16, 2007 at 8:54:00 AM PDT
Anonymous said…
could some one email the source code
steven_44@inbox.com
The administrator will not let any new accounts be created.
Thursday, January 31, 2008 at 10:23:00 AM PST
Anonymous said…
Hello, my name is Andrew, I live in Ukraine.
The perfect example. On the basis of his wish to try to control.
If not difficult, withdrew source project.


e-mail: andreywin@i.ua
andreywin@gmail.com
Sunday, May 25, 2008 at 5:48:00 AM PDT
FrIuNs said…
please send for me too source code=) dorumonstr@gmail.com
Monday, July 7, 2008 at 10:41:00 AM PDT
Jobi Joy said…
I have updated this blog with all the broken link corrected. Sorry for the delay.
Thursday, September 11, 2008 at 1:05:00 AM PDT
Post a Comment

Popular posts from this blog

Time Picker User Control

The easiest way to create a WPF TimePicker control is to make a user control wrapped for TimeSpan CLR object. Here is a very simple sample which does that. Basically TimeControl is having 4 DPs one for the entire Value (Which is a TimeSpan) and individual Hours, Minutes and Seconds. (We can optionally add Days and Milliseconds also to make the control rich). Here is a C# class TimeControl.xaml.cs public partial class TimeControl : UserControl { public TimeControl() { InitializeComponent(); } public TimeSpan Value { get { return ( TimeSpan )GetValue(ValueProperty); } set { SetValue(ValueProperty, value ); } } public static readonly DependencyProperty ValueProperty = DependencyProperty .Register( "Value" , typeof ( TimeSpan ), typeof ( TimeControl ), new UIPropertyMetadata ( DateTime .Now.TimeOfDay, new PropertyChangedCallback (OnValueChanged))); ...
Read more

A simple Multiselect ComboBox using expression Blend

Image
I have often seen requirements to have a combobox with multiple selection enabled. We know thatWPF ListBox control is having two special properties, which enables the multiple selection but the combobox doesnt have those public IList SelectedItems { get; } public SelectionMode SelectionMode { get; set; } There are many ways we can make a multiselect combo box 1)Create a custom control from the scratch and have a Listbox in the dropdown 2)Extend the combobox and add the above properties to it 3)Edit the Combobox control template to add necessary controls and binding. I am going to describe the 3rd idea from the above list, which is a total Expression Blend work, so no need of VS2008 to make a multiselect combobox from a simple combobox. Place a combobox in to the editing area and right click on the control to create an copy of the Control template. Now you can see the Control's tree on the left side of Expression Blend The ItemPresenter inside the scrollviewer is actually the...
Read more

A Simple Radial Panel for WPF and SilverLight

Image
Geometry was one of the coolest topics in school for me. Probably because it uses a lot of figures to convey the concepts. Here I am trying to explain how we can leverage the Layout system in WPF and Silver light by taking an example of creating a Radial Panel. A RadialPanel lays out its children in a circular fasion. So before going in to the technical details, let us see how this problem get solved algorithmically.If you are asked to arrange a bunch of items in a circular path, what all things would you consider?. 1) How much space do I have? – Say X * Y rectangular area is the available size. 2) I will draw an approximate Circle (Or ellipse) inside the X*Y space. Assuming that the Radii are ‘Rx and Ry' 3) How many items are there to arrange? Say N – number 4) I know that 360 degrees are the total angular space for a circle. So angular distance between each item will be 360/N degrees. 6) I can calculate the coordinate point to which an item should be placed. That is by doing the ...
Read more