Preface

This is only a small test project I've created to learn more about WPF, the CustomControl project type in Visual Studio 2008 and the possibility to create a look-less control through a template. I think all controls written with WPF should be look-less. Of cause you can create a default design, but the user must have the possibility to change it through a new template without touching the business logic.

The solution

The Visual Studio 2008 Solution contains two projects: The CustomControl project called ExpDotNet.Controls and the test project called ExpDotNet.Controls.TestApp. Inside the test application there is only a little Window with a ComboBox element. Through the ComboBox you can easily switch between the available templates (styles). This styles are included in the Solution Items folder. All XAML files inside this folder will be copied to the style folder in the output directory (PostBuild event).

The clock control

The clock control simply consists of two C# files. There is the Clock.cs file, which contains the business logic for the control. First, the business logic creates four DoubleAnimations, each for one clock hand (hour, minute, second and millisecond). This animations are connected with the XAML code at runtime. For each clock hand exists one dependency property to supply the name of the RotateTransform element, which changes the angle of the hand. Thereby you can create every clock hand you can imagine and specify the name of the corresponding transformation through the dependency property. I need these animations directly in the C# code, because I can't find a way to stop, change and again begin an animation, which is only defined in XAML. But why must I stop, change and begin an animation? The clock should have the ability to respond to time changes in Windows. If you change the current date/time in Windows, the clock control will be informed through the Microsoft.Win32.SystemEvents.TimeChanged event. After that, all animations are stopped, the angle of the hands are adjusted to the new time and the animations are started again.

The second C# file, named DateConverter.cs, contains a small date converter. In the default template this converter is used to display the name of the current day and the current date.

The Window

The Window contains the clock control for testing purpose. Furthermore it contains a ComboBox element. At startup, the name of all XAML files in the style folder are listed in that ComboBox. Through the SelectionChanged event the style is changed to the last selected file. The clock control is embedded in a Viewbox element with the Stretch property set to Uniform, to guarantee a clock that is resized correctly and without deformations.

Styles

The styles are located in the style folder inside the output directory. All styles are made up of one ResourceDictionary element. This dictionary contains the template for the clock control. If the user changes the style in the Window, the complete file is loaded through the XamlReader class and the current application dictionary is replaced with this new dictionary. Thereby the style of the clock control change automatically.

To set the name of the clock hands, you must write something like this: <Setter Property="HourHandName" Value="hourHand" />. This is important, because the animations are connected to the layout dynamically. To find the elements at runtime, the names in the properties are used. So fill them with the name of the RotateTransform element of the corresponding clock hand!

Screenshots:

Here are some screenshots of the various designs:

History

February 19th 2008 - 1.0.0.0: First public release.

License

You can use and distribute the source for free, but it's nice if you would link this blog or especial this page.

Download

You can download the complete Visual Studio 2008 solution here.