Control Templates

Introduction

Controls in WPF are separated into logic, that defines the states, events and properties and template, that defines the visual appearance of the control. The wireup between the logic and the template is done by DataBinding.

Each control has a default template. This gives the control a basic appearance. The default template is typically shipped together with the control and available for all common windows themes. It is by convention wrapped into a style, that is identified by value of the DefaultStyleKey property that every control has.

The template is defined by a dependency property called Template. By setting this property to another instance of a control template, you can completely replace the appearance (visual tree) of a control.

The control template is often included in a style that contains other property settings. The following code sample shows a simple control template for a button with an ellipse shape.

 
<Style x:Key="DialogButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Ellipse Fill="{TemplateBinding Background}"
                             Stroke="{TemplateBinding BorderBrush}"/>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                </Grid>            
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
 
 

 
<Button Style="{StaticResource DialogButtonStyle}" />
 
 

A Button without and with a custom control template

ContentPresenter

When you create a custom control template and you want to define a placeholder that renders the content, you can use the ContentPresenter. By default it adds the content of the Content property to the visual tree of the template. To display the content of another property you can set the ContentSource to the name of the property you like.

Triggers

{RelativeSource TemplatedParent} not working in DataTriggers of a ControlTemplate

If you want to bind to a property of a property on your control like Data.IsLoaded you cannot use a normal Trigger, since it does not support this notation, you have to use a DataTrigger.

But when you are using a DataTrigger, with {RelativeSource TemplatedParent} it will not work. The reason is, that TemplatedParent can only be used within the ControlTemplate. It is not working in the Trigger section. You have to use the {RelativeSource Self} instead.

What if a Binding working or a Setter is not applied when using a control template

There is something you need to know when setting a value of an element within a control template: The value does have a lower precendence as the local value! So if you are setting the local value in the constructor of the contained element, you cannot override it within the controltemplate. But if you use the element directly in your view, it will work. So be aware of this behavior!.

Here you can find more information about DependencyProperty value precendence: Dependency Property Value Precedence

 Comments on this article

Show all comments

Christian Moser	Commented on 20.April 2009 Hi Andrei, I corrected the typos in the graphics ;-) Thanks for the feedback!
alexlll80	Commented on 7.May 2009 very nice.
Rasbeer	Commented on 13.May 2009 Good one!
khaled	Commented on 17.May 2009 i really like it thankyou
Swathi	Commented on 3.June 2009 Can you give an example for Data Template also?
DaniBoi	Commented on 29.September 2009 How to make something like a ASP .Net Master Page in WPF
Diana	Commented on 23.October 2009 Thanks, your posts are very very useful!
om	Commented on 6.November 2009 Can we partially override the Control Style? Like in comboBox i dont want ToggleButton but other combobox should be as it is?
jojo	Commented on 7.January 2010 good one!!!
Witschi	Commented on 14.January 2010 Hello your doing a nice job! I'm beginner and don't understand the trigger part could you add an example please?
Wendell	Commented on 26.January 2010 With what program or software dis you make the graphics? They are aawessooomeee and I'm really jealous ... Oh nice explanation tho thankx man!
estie	Commented on 10.February 2010 So clear, thankx.
Abirami	Commented on 10.March 2010 Hi Chris, This is really very useful for me, as I am a beginner.. Thanks for this wonderful site :)
aqdlncotcm	Commented on 28.March 2010 rZFfZG <a href=\"http://cgrxmitngrkx.com/\">cgrxmitngrkx</a>, [url=http://rdmgzaglxqdi.com/]rdmgzaglxqdi[/url], [link=http://zugnswetcqpy.com/]zugnswetcqpy[/link], http://mswjahkwyxfq.com/
priya	Commented on 23.April 2010 Hi Mosers u r explaining in a simple and superb way
Swapnil Sawant	Commented on 6.May 2010 a very good site. Thank you
ebrahimi	Commented on 9.May 2010 very good
narayana	Commented on 20.May 2010 superb article keep posting
kln	Commented on 1.July 2010 Nice One!!Good Presentation
chintan darji	Commented on 14.July 2010 Superb article.
Paresh	Commented on 23.July 2010 Simply Superb Article for Beginner :) need more article on WPF,
Paresh	Commented on 23.July 2010 Simply Superb Article for Beginner :) need more article on WPF,
Paresh	Commented on 23.July 2010 Simply Superb Article for Beginner :) need more article on WPF,
ouais	Commented on 29.July 2010 you people I really not getting why you are congrat this guy ! This site is uglying explaning WPF ! just good to run away and find real explanation from programmer !
i	Commented on 3.September 2010 seems really interesting thanks for your efforts to make this material available for us

Name
E-Mail (optional)
Comment