witters:World

see martin code

About the author

Martin Witters is a software developer at Xpress Technologies in Jacksonville, FL.
E-mail me Send mail

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2009

Control Templates in WPF

One of the most impressive features of the WPF framework is the ease with which developers can override the default user interface for common Windows controls.  Using Control Templates, you can completely hijack the UI for any control in your application while still getting all the built-in functionality you expect from the control.  I will briefly demonstrate this powerful concept by creating two radio buttons and applying a simple template to control their look and feel.

To start, I just add two radio buttons to a window:

<RadioButton x:Name="Radio1" Canvas.Left="48" Canvas.Top="50" Content="Button 1" />
<RadioButton x:Name="Radio2" Canvas.Left="48" Canvas.Top="120" Content="Button 2" />

The result looks like this:

image

The next step is to create a new template for the control.  If you're using Expression Blend, this is as simple as right-clicking on the control, selecting Edit Control Parts > Create Empty....  Otherwise, you'll need to type all the XAML by hand.  Now that your radio button is using an empty control template, it has no UI.  So now we need to add some visual elements to the control template.

<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
            <Grid>
                <Rectangle x:Name="rectBackground" Fill="#FF5959FF" Stroke="#FF000000" Width="150" Height="40" StrokeThickness="3" RadiusX="4" RadiusY="4"/>
                <TextBlockx:Name="txtContent" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" FontSize="12" FontWeight="Bold" Foreground="White">
                    <ContentPresenter />
                </TextBlock>
            </Grid>
 </ControlTemplate>

Apply this template to both radio buttons and we get this:

image

But now we have a problem: there's no way to know which radio button is selected.  In the default template, the radio button has a BulletDecorator that displays as checked when the radio button is selected.  To distinguish the selected radio button in our template, we will utilize triggers to update certain properties of the template we just created.

<ControlTemplate.Triggers>               
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Fill" TargetName="rectBackground" Value="Orange"/>
                    <Setter Property="Stroke" TargetName="rectBackground" Value="Red"/>
                    <Setter Property="Foreground" TargetName="txtContent" Value="Black"/>
                </Trigger>                
</ControlTemplate.Triggers>

Now the finished product:

image

This is just a simple example of what you can accomplish with control templates in WPF.  From this basic starting point, you can probably see how you can develop much more sophisticated user interfaces with ease.  I encourage you to play around with this and other samples and have fun exploring the limitless possibilities.

Source - Control Template Demo.xaml (1.38 kb)

Currently rated 3.6 by 5 people

  • Currently 3.6/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:
Posted by martin on Wednesday, December 12, 2007 11:31 AM
Permalink | Comments (1) | Post RSSRSS comment feed