Hello everybody,

after my birthday last weekend and over two weeks without any article posted, I think it's time to go on with the WPF article series and with my first little "hello world" project. [...]

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.

As I wrote some days ago in the WPF Part 6, XamlPad is a good way to view the written XAML in real time. But I asked myself, if there are alternatives available:

As mentioned above, XamlPad is a good way to view your XAML code. But there are some disadvantages. Sometimes a better code highlighting, multiple tabs and an IntelliSense like input assistance would be very nice features. But I think, there will be tools available in the future (or are they already available?).

Now, I found two alternatives: The designated successor of XamlPad - XamlPadX - and a very great tool: Kaxaml. [...]

This article is a short introduction and overview of XamlPad and it's features. With XamlPad you can easily test your XAML code snippets at real time. Unlike the XAML designer in Visual Studio 2008, it's lightweight, very fast and thereby a great way to view the results of your GUI development. [...]

In this article I will show you some methods to process XAML. With "process" I mean the abilities to use the visual and the logical element tree and the possibilities to write and read XAML. [...]

This is only a short article, because there aren't so many things left at XAML I could talk about, but I think, it would be better to separate them from the last part of this series.

Ok, what I'm talking about? I will write about the built-in markup and language extensions and about the dependency and attached properties of XAML and WPF. [...]

After I've learned much about the possibilities XAML and the WPF can give us developers, I would like to review the basic concepts of XAML. As I mentioned in the last article and as you'll see at first glance, XAML is based on XML. This means that every XAML file has a root element that includes all other elements. Furthermore all elements must be nested correctly. [...]

A huge change in WPF and the way a developer creates a GUI for an application is XAML (eXtensible Application Markup Language). It's an declarative XML-based language used to describe an GUI in WPF or a workflow in Windows Workflow Foundation (WF). [...]

Hello everybody,

it's done! No no... not the whole WPF article series and the other stuff I would blog about . After one and a half week I think I became just enough acquainted with WordPress and the plugin system it uses. I think I'm ready to fill my technical blog with some hopefully interesting articles.

This is the beginning of the WPF series. [...]