Click here to Skip to main content
12,349,379 members (69,288 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

93.2K views
41 bookmarked
Posted

Introduction to WPF Templates

, 15 Nov 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
An article that gives an introduction to WPF templates

Introduction

Windows Presentation Foundation allows the developer to completely change the look and feel of the controls. This is accomplished by using Control Templates. It means you can render your Button as an Ellipse which when hovered will change its color. Actually, that is exactly what we are going to do in this article.

Why Control Templates and Why Not Styles?

In one of the previous articles, we talked about Styles in WPF. You can check out the article: Introduction to Styling in Windows Presentation Foundation.

One question you might ask is why not use styles to change the look of the controls. Styles can change the appearance of your control but they will be dependent on the properties provided by the control itself. It means you will not be able to render your Button as a Polygon. Control Templates allow changing the look of the control by providing a template which will be used by the control.

Creating a Round Button

In this article, we are going to create a round button by using control templates. The first task is to create a simple button control. Here is the code for that:

<Button Content="Push Me!" >

This will create a very simple button control on the WPF form. Let’s create a template for this button. We will place the template in the App.xaml file so that we can use it throughout the application.

<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">      
        <Grid>
           <Ellipse Name="el1" Fill="Orange" Width="100" Height="100">            
           </Ellipse>                                     
        </Grid> 
</ControlTemplate> 

The control template defined above is really simple! First a unique key “buttonTemplate” is assigned to the control template. Also, the TargetType of the template is set to “Button” which means this template can only be applied to a Button control. Next, we define an Ellipse inside the Grid control. It is a simple Ellipse filled with orange color.

WPFControlTemplates_002.png

Now, let’s apply the template to the Button control:

<Button Content="Push Me!" Template="{StaticResource buttonTemplate}" 
	Click="Button_Clicked"></Button>

As soon as you apply the control template, the Button will change its display and will be rendered as an Ellipse as shown below:

There is one problem with the above rendering; the content of the Button control which is “Push Me!” is not displayed. Let’s make it appear inside the Ellipse. The ContentPresenter control can be used to display the content of a WPF control.

<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" 
	Content="{TemplateBinding Button.Content}" />

And here is the result:

WPFControlTemplates_002.png

We are not done yet! Let’s also add a trigger to the Button control so that it changes the color of the Ellipse once the mouse is over it.

<ControlTemplate.Triggers>
          <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter TargetName="el1" Property="Fill" Value="Yellow"/>
          </Trigger>
        </ControlTemplate.Triggers>

The trigger is fired on the Button.IsMouseOver event. The Setter is used to change the Fill property of the Ellipse to “Yellow”. Now, when you hover over the Ellipse, it will change from orange to yellow.

Conclusion

WPF Control Template is a very important feature of the WPF Framework. It allows you to change the look and feel of the WPF controls and render them in completely different way from their default format.

I hope you liked the article. Happy coding!

History

  • 14th November, 2008: Initial version

License

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

Share

About the Author

azamsharp
Web Developer
United States United States
I am the founder of knowledge base website, HighOnCoding, GridViewGuy, RefactorCode.com and ScreencastADay.com.

HighOnCoding is a website which will get you high legally with useful information. There are tons of articles, videos and podcasts hosted on HighOnCoding.

HighOnCoding.com www.HighOnCoding.com


My Blog:

Blog



Buy my iPhone app ABC Pop

You may also be interested in...

Comments and Discussions

 
QuestionOther templates? Pin
Nachiappan Kumarappan31-Jan-16 16:26
professionalNachiappan Kumarappan31-Jan-16 16:26 
GeneralMy vote of 5 Pin
Member 1076929223-Jul-14 21:12
memberMember 1076929223-Jul-14 21:12 
Questionwhere to add ContentPresenter? Pin
satyaChandu23-Jan-14 2:47
membersatyaChandu23-Jan-14 2:47 
AnswerRe: where to add ContentPresenter? Pin
satyaki mishra8-May-14 1:03
membersatyaki mishra8-May-14 1:03 
GeneralMy vote of 3 Pin
VikramBansod2-Dec-12 2:06
memberVikramBansod2-Dec-12 2:06 
GeneralMy vote of 3 Pin
hari111r13-Nov-12 17:08
memberhari111r13-Nov-12 17:08 
GeneralMy vote of 5 Pin
Member 77800365-Nov-12 14:05
memberMember 77800365-Nov-12 14:05 
Questionthanx Pin
Rockstar2005907-Sep-12 2:53
memberRockstar2005907-Sep-12 2:53 
GeneralMy vote of 4 Pin
Shweta Lodha9-Jun-12 0:28
memberShweta Lodha9-Jun-12 0:28 
GeneralMy vote of 4 Pin
vdasus2-Jan-12 5:15
membervdasus2-Jan-12 5:15 
GeneralMy vote of 2 Pin
loveuhameshah2-Dec-11 5:28
memberloveuhameshah2-Dec-11 5:28 
GeneralMy vote of 3 Pin
Salam633113-Oct-11 4:41
memberSalam633113-Oct-11 4:41 
GeneralMy vote of 5 Pin
mojmos26-Sep-11 1:22
membermojmos26-Sep-11 1:22 
GeneralSuggestion Pin
Bill Warner17-Nov-08 4:40
memberBill Warner17-Nov-08 4:40 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160621.1 | Last Updated 15 Nov 2008
Article Copyright 2008 by azamsharp
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid