How can I display time information more graphically in WPF?

In this code sample I've created a re-usable WPF data template for displaying time information using an analog clock. This demo combines some of the WPF features I've talked about before - DataTemplate and converters, and combines them together for easy display of time information. Here is an example of the DataTemplate in action, used inside the ItemTemplate of a ListBox. It is displaying a list of simple ChatEntry objects - the ChatEntry has one field which is a DateTime.

To display the clock showing the time value inside the list's ItemTemplate required the following Xaml. The Content is bound to the DateTime field of the current ChatInfo. It is not apparent in the client code that any special kind of display will be used at all.

Xaml Fragment (WPF Beta 2)
<ContentControl Content="{Binding Path=DateTime}"
    Height="60" Grid.Column="0"
    Grid.Row="0" Grid.RowSpan="2"/>
   
With the abundance of high-quality clock implementations for XAML around it was hard to pick a starting point for the clock DataTemplate. Eventually I chose Nathan Dunlap's attractive chrome-less clock. After stripping it back, removing the animations which made it "go" and the second hand I added it inside a DataTemplate inside my App.Xaml file. This will allow my DataTemplate to be used throughout the application. I wanted my DataTemplate to be used any time a DateTime needs displaying. In order to do this I needed to set the DataType attribute to DateTime for my DataTemplate. The DateTime class that resides in the System namespace in the mscorlib assembly. So that I could specify the DateTime type as the DataType for my template I needed to import the System namespace as shown below:

Xaml Fragment (WPF Beta 2)
<Application x:Class="TimeConverter.App"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
    StartupUri="Window1.xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:l="clr-namespace:TimeConverter"
    >
    <Application.Resources>

      <l:TimeToClockHandAngleConverter x:Key="timeToAngleConverter" />
     
      <DataTemplate DataType="{x:Type sys:DateTime}">
      <!-- stripped back clock from Nathan Dunlap in here -->
      </DataTemplate>
       
 </Application.Resources> 
</Application>

As you can see above I also imported the TimeConverter namespace from the current assembly. This is because I needed to write a custom converter for my template, so I could bind the angle of the hands to the number of minutes or hours in the DateTime instance the template was binding against. I wrote a single converter for converting hours and minutes, and passed a parameter to the converter to specify if it should return the angle of the hour hand, or the angle of the minute hand for the supplied time. Inside the DataTemplate the converter was used like this:

Xaml Fragment (WPF Beta 2)
<Rectangle x:Name="HourHand" ... >
  <Rectangle.RenderTransform>
 <RotateTransform Angle="{Binding Converter={StaticResource timeToAngleConverter},
 ConverterParameter=HourHand}" />
  </Rectangle.RenderTransform>

Thanks and kudos to Nathan Dunlap for creating a nice and easily subverted clock. You can download a complete sample including the template here.

Comments