Click here to Skip to main content
15,861,125 members
Articles / Desktop Programming / WPF
Article

Creating a look-less custom control in WPF

Rate me:
Please Sign up or sign in to vote.
4.86/5 (60 votes)
4 Jun 2006CPOL3 min read 192.7K   3.7K   137   16
In WPF, custom controls should be look-less. That means, that business logic and UI are strongly separated. When you create a control, you can provide a default template for the control, but anyone who uses the control can override it without touching the business logic.

Introduction

In WPF, custom controls should be look-less. That means, that business logic and UI are strongly separated. When you create a control, you can provide a default template for the control, but anyone who uses the control can override it without touching the business logic.

In my sample, I will create a custom control for a simple clock, with a default template for a digital clock. In the application that uses the control, I will overwrite the template for the clock so that it will be displayed as an analog clock.

This sample was created with the February CTP.

Sample screenshot

Sample screenshot

Default template

Customized template

Creating the project

  • Create a "WinFX Windows Application". This application is used to test the custom control.
  • Create a "WinFX Custom Control Library". This library will contain the custom clock control.
  • Delete the file "UserControl1.xaml" in the control library.
  • Add a new custom control to the control library.
  • Add a reference to the control library in the Windows application project.

Creating the custom control

  • Add a DependencyProperty "DateTime" to the custom control. This property will always contain the actual date and time. Templates for this control can bind to this property. The PropertyChangedCallback is required to notify UI elements that the property has changed. Without this callback, bound controls would not be updated.
C#
...

public DateTime DateTime
{
   get
   {
      return (DateTime)GetValue(DateTimeProperty);
   }
   private set
   {
      SetValue(DateTimeProperty, value);
   }
}

public static DependencyProperty DateTimeProperty = 
    DependencyProperty.Register(
        "DateTime",
        typeof(DateTime),
        typeof(Clock),
        new PropertyMetadata(
            DateTime.Now, 
            new PropertyChangedCallback(OnDateTimeInvalidated)));

public static readonly RoutedEvent DateTimeChangedEvent =
   EventManager.RegisterRoutedEvent(
        "DateTimeChanged", 
        RoutingStrategy.Bubble, 
        typeof(RoutedPropertyChangedEventHandler<DateTime>), 
        typeof(Clock));

protected virtual void OnDateTimeChanged(DateTime oldValue, 
                                         DateTime newValue)
{
   RoutedPropertyChangedEventArgs<DateTime> args = new 
    RoutedPropertyChangedEventArgs<DateTime>(oldValue, newValue);
   args.RoutedEvent = Clock.DateTimeChangedEvent;
   RaiseEvent(args);
}

private static void OnDateTimeInvalidated(DependencyObject d, 
                    DependencyPropertyChangedEventArgs e)
{
   Clock clock = (Clock)d;
   DateTime oldValue = (DateTime)e.OldValue;
   DateTime newValue = (DateTime)e.NewValue;
   clock.OnDateTimeChanged(oldValue, newValue);
}

...
  • Add a Timer to the control to keep the "DateTime" property up to date.

    If you want to be able to update UI elements in your TimerElapsedEvent, you should use the DispatcherTimer class from the System.Windows.Threading namespace. Another option would be to invoke a delegate from the Control.Dispatcher object (this.Dispatcher.Invoke(...);).

C#
...
using System.Windows.Threading;

namespace CustomControlLibrary
{
   public class Clock : Control
   {
      private DispatcherTimer timer;

      static Clock()
      {
         DefaultStyleKeyProperty.OverrideMetadata(
             typeof(Clock), 
             new FrameworkPropertyMetadata(typeof(Clock)));
      }

      protected override void OnInitialized(EventArgs e)
      {
         base.OnInitialized(e);

         UpdateDateTime();

         timer = new DispatcherTimer();
         timer.Interval = TimeSpan.FromMilliseconds(1000 - 
                          DateTime.Now.Millisecond);
         timer.Tick += new EventHandler(Timer_Tick);
         timer.Start();
      }

      private void Timer_Tick(object sender, EventArgs e)
      {
         UpdateDateTime();

         timer.Interval = TimeSpan.FromMilliseconds(1000 - 
                          DateTime.Now.Millisecond);
         timer.Start();
      }

      private void UpdateDateTime()
      {
         this.DateTime = System.DateTime.Now;
      }

...

Creating a default template for the custom control

  • Open the file "generic.xaml" in the "themes" folder. This file can contain a template for each custom control in the library.
  • Insert a template for the clock. In my sample, the current DateTime is displayed in a TextBlock control. Optionally, you could add a converter to the binding to format the DateTime property.
XML
<ResourceDictionary
    xmlns="<A href="http://schemas.microsoft.com/winfx/2006/xaml/presentation" target=_blank>http://schemas.microsoft.com/winfx/2006/xaml/presentation</A>"
    xmlns:x="<A href="http://schemas.microsoft.com/winfx/2006/xaml" target=_blank>http://schemas.microsoft.com/winfx/2006/xaml</A>"
    xmlns:local="clr-namespace:CustomControlLibrary"
    >
    <Style TargetType="{x:Type local:Clock}">
        <Setter Property="Template">
            <Setter.Value>
                 <ControlTemplate TargetType="{x:Type local:Clock}">
     <TextBlock Name="tblClock" Text="{Binding Path=DateTime, 
                RelativeSource={RelativeSource TemplatedParent}}" />
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
</ResourceDictionary>

Using the custom control in an application

XML
<Window x:Class="WindowsApplication.Window1"
    xmlns="<A href="http://schemas.microsoft.com/winfx/2006/xaml/presentation" target=_blank>http://schemas.microsoft.com/winfx/2006/xaml/presentation</A>"
    xmlns:x="<A href="http://schemas.microsoft.com/winfx/2006/xaml" target=_blank>http://schemas.microsoft.com/winfx/2006/xaml</A>"
    xmlns:customControl="clr-namespace:CustomControlLibrary;
                         assembly=CustomControlLibrary"
    Title="WindowsApplication" Height="487" Width="412"
    >
 <StackPanel HorizontalAlignment="Center">
  <customControl:Clock Name="customControlClock" />
 </StackPanel>
</Window>

Now the custom control is working.

Sample screenshot

Overriding the default template

By overriding the default template, it is possible to change the look and feel of the control completely.

  • Add a template for an analog clock to the resources of the StackPanel in "Window1.xaml". Furthermore, you will need some converters to convert the seconds, minutes, and hours of the actual date to an angle for the watch hands.
XML
<StackPanel.Resources>
 <local:SecondsConverter x:Key="secondsConverter"/>
 <local:MinutesConverter x:Key="minutesConverter"/>
 <local:HoursConverter x:Key="hoursConverter"/>
 <local:WeekdayConverter x:Key="weekdayConverter"/>
 <Style x:Key="AnalogClock" TargetType="{x:Type customControl:Clock}">
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="{x:Type customControl:Clock}">
     ...
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
</StackPanel.Resources>
  • Draw the clock in the template. The template contains some ellipses and rectangles.
  • Bind the watch hands to the DateTime DependencyProperty of the custom control. As an angle of a RotateTransform cannot be bound to a DateTime datatype, you have to use a converter object.
XML
<Rectangle x:Name="SecondHand" Canvas.Top="4" 
           Canvas.Left="49" Fill="Red" Width="1" Height="47">
 <Rectangle.RenderTransform>
  <RotateTransform Angle="{Binding Path=DateTime, 
       RelativeSource={RelativeSource TemplatedParent}, 
       Converter={StaticResource secondsConverter}}" 
       CenterX="0.5" CenterY="47"></RotateTransform>
 </Rectangle.RenderTransform>
</Rectangle>
  • Add converters for the watch hands in the code-behind file of "Window1.xaml". The SecondsConverter, for instance, uses the seconds date part of the DateTime property, and converts it to an angle for the second hand of the clock.
C#
[ValueConversion(typeof(DateTime), typeof(int))]
public class SecondsConverter : IValueConverter
{
 public object Convert(object value, Type targetType, 
                       object parameter, CultureInfo culture)
 {
  DateTime date = (DateTime)value;
  return date.Second * 6;
 }
 public object ConvertBack(object value, Type targetType, 
                           object parameter, CultureInfo culture)
 {
  return null;
 }
}
  • Finally, you have to apply the new template to your clock control.
XML
<customControl:Clock Name="customControlAnalogClock" 
                     Style="{StaticResource AnalogClock}" />

Now, the custom control is customized:

Sample screenshot

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer software architects
Austria Austria
Hi, my name is Karin Huber. Since 1998 I have been working as a developer and IT consultant focusing on building database oriented web applications. In 2007 my friend Rainer and I decided that we want to build a business based on COTS (component off-the-shelf) software. As a result we founded "software architects".

These days we are offering our first version of the time tracking software called 'time cockpit'. You can find more information at www.timecockpit.com.

Comments and Discussions

 
QuestionNice Stuff ! Pin
SkyRunner25-Jul-12 0:23
SkyRunner25-Jul-12 0:23 
GeneralMy vote of 5 Pin
Come Chão13-Jun-12 3:34
professionalCome Chão13-Jun-12 3:34 
QuestionOverwrite Pin
Sam Hobbs5-Mar-12 16:33
Sam Hobbs5-Mar-12 16:33 
GeneralMy vote of 5 Pin
Wayne Gaylard8-Nov-11 1:46
professionalWayne Gaylard8-Nov-11 1:46 
QuestionAlthough I haven't read the article, but I believe that the content must be very NB Pin
batsword23-Sep-11 17:03
batsword23-Sep-11 17:03 
GeneralCool Pin
thatraja8-Apr-11 18:44
professionalthatraja8-Apr-11 18:44 
GeneralRe: Cool Pin
Wayne Gaylard8-Nov-11 1:02
professionalWayne Gaylard8-Nov-11 1:02 
GeneralRe: Cool Pin
thatraja8-Nov-11 1:33
professionalthatraja8-Nov-11 1:33 
GeneralGreat Article! Pin
Fakher Halim10-Jun-10 12:15
Fakher Halim10-Jun-10 12:15 
GeneralThanks Pin
Sayehboon10-Sep-09 2:24
Sayehboon10-Sep-09 2:24 
GeneralGreat example! Demonstrates various aspects of WPF Pin
JoshMachin21-Jul-09 3:25
JoshMachin21-Jul-09 3:25 
GeneralBut what about... Pin
atm_grifter20-Aug-07 10:07
atm_grifter20-Aug-07 10:07 
GeneralRight to the point! Pin
Richard Houltz6-Aug-06 14:13
Richard Houltz6-Aug-06 14:13 
QuestionValueConversion usage Pin
Josh Smith18-Jul-06 10:14
Josh Smith18-Jul-06 10:14 
AnswerRe: ValueConversion usage Pin
Josh Smith1-Aug-06 5:50
Josh Smith1-Aug-06 5:50 
GeneralHey, first WPF article! Credits to you! Pin
Roland Hasenoehrl11-Jul-06 3:34
Roland Hasenoehrl11-Jul-06 3:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.