Click here to Skip to main content
11,705,617 members (48,675 online)
Click here to Skip to main content

Tagged as

WPF: TemplateBinding with ControlTemplate

, 7 Jun 2013 CPOL 48.8K 17
Rate this:
Please Sign up or sign in to vote.
A bit on TemplateBinding and how to use it inside a ControlTemplate.

Introduction

Today I'll try to write a bit on TemplateBinding and how to use it inside a ControlTemplate. TemplateBinding is a type of binding used mainly for template scenarios. Here I am not going to write more on its theoretical aspect as what is TemplateBinding, when to use, blah blah blah, as lot of content is readily available on the net.  So, let's start quickly with the coding part:

First of all, let's create a new project using WPF template and place a button in it as below:

Now, what I am going to do is, I am going to replace this content template for this button. So, in order to do this, open up the Button tag and add Button.Template markup tag with a new ControlTemplate as:

Now as soon as you will add ControlTemplate tag, you will notice that the content of the button is gone and button is shown as a transparent rectangle. This has happened because here I told WPF to replace the default ControlTemplate with the one which I defined. But at this point, our ControlTemplate is blank, so there is no visualization and we can see only a transparent rectangle.

Now go ahead and customize our ControlTemplate by putting Ellipse inside it as:

Now we can see that we get a visualization for a button in the form of ellipse. At this point of time, it works OK, but there are scenarios where this struct breaks down.

For example, let's increase the height of button, from 35 to 105 as:

In the above image, you will notice that button height is increased but the ellipse size is still the same, which is a bad UI design. And the reason this is happening is, inside a ControlTemplate, the height of an ellipse is hard coded. So, no matter, whatever height is set at parent (i.e., Button), it will not get inherited to child control (i.e. Ellipse).

So, now we have to fix this problem by using a special type of binding called TemplateBinding inside ControlTemplate. So, instead of hard coding the height, we will use TemplateBinding as shown below:

By setting the TargetType property of ControlTemplate, we are telling Ellipse that, any property of Button can be set to ellipse. Now, whatever the height of button will be, it will automatically be the height of ellipse also. Isn't it interesting?

Moving forward, let's do something more interesting with Fill property of ellipse.

In the above snippet, I am trying to set the Fill property of an ellipse using TemplateBinding. But now the problem here is, a button doesn't have a Fill property. So, there is no one-to-one mapping for Fill property. Now, what to do?

No need to worry that much because button does have a Background property as:

In the above image, you might have noticed that as soon as ellipse's Fill property is set to Background, ellipse becomes transparent as button's background. Now if we set button's Background property to Red, the same will be applied to ellipse too.

So, one can understand how much magic we can do with TemplateBinding.
Now, let's work a little bit on code cleanup.

ControlTemplate Inside Resource Dictionary

For better code readability, we will move out our ControlTemplate code and put it inside a resource dictionary as:

So, now we can see as earlier that whatever visual property for button is set, all get applied to ellipse as well.

Hope this tip was useful and gave you the basic idea on how to use TemplateBinding.

License

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

Share

About the Author


You may also be interested in...

Comments and Discussions

 
GeneralVery good article for Beginners Pin
Member 953829611-Nov-14 18:06
memberMember 953829611-Nov-14 18:06 
GeneralRe: Very good article for Beginners Pin
Shweta Lodha12-Nov-14 5:48
memberShweta Lodha12-Nov-14 5:48 
QuestionGood Article Pin
Member 110937702-Nov-14 22:59
memberMember 110937702-Nov-14 22:59 
AnswerRe: Good Article Pin
Shweta Lodha12-Nov-14 5:49
memberShweta Lodha12-Nov-14 5:49 
QuestionThe content of the button is not visible Pin
karthik cad/cam22-Sep-14 5:28
memberkarthik cad/cam22-Sep-14 5:28 
AnswerRe: The content of the button is not visible Pin
Shweta Lodha29-Oct-14 6:15
memberShweta Lodha29-Oct-14 6:15 
QuestionVery good explanation Pin
Member 46626734-Jul-14 18:30
memberMember 46626734-Jul-14 18:30 
AnswerRe: Very good explanation Pin
Shweta Lodha8-Jul-14 1:00
memberShweta Lodha8-Jul-14 1:00 
GeneralThis is how one should provide a Document Pin
Member 995663819-Jun-14 1:28
memberMember 995663819-Jun-14 1:28 
GeneralRe: This is how one should provide a Document Pin
Shweta Lodha19-Jun-14 6:08
memberShweta Lodha19-Jun-14 6:08 
Questiongood work Pin
Anindya00214-Apr-14 4:41
memberAnindya00214-Apr-14 4:41 
AnswerRe: good work Pin
Shweta Lodha14-Apr-14 5:03
memberShweta Lodha14-Apr-14 5:03 
QuestionA BUG??? Pin
Khalid Akbar8-Apr-14 23:28
memberKhalid Akbar8-Apr-14 23:28 
AnswerRe: A BUG??? Pin
Shweta Lodha9-Apr-14 4:44
memberShweta Lodha9-Apr-14 4:44 
GeneralRe: A BUG??? Pin
Khalid Akbar12-Apr-14 3:04
memberKhalid Akbar12-Apr-14 3:04 
GeneralRe: A BUG??? Pin
CasaSpider29-Jan-15 2:01
memberCasaSpider29-Jan-15 2:01 
QuestionThanks Pin
sharmi1728-Mar-14 10:00
membersharmi1728-Mar-14 10:00 
AnswerRe: Thanks Pin
Shweta Lodha28-Mar-14 16:27
memberShweta Lodha28-Mar-14 16:27 
QuestionThanks A Lot Pin
JLO201212-Nov-13 22:33
memberJLO201212-Nov-13 22:33 
AnswerRe: Thanks A Lot Pin
Shweta Lodha13-Nov-13 1:18
memberShweta Lodha13-Nov-13 1:18 
GeneralGood Article Pin
JaganGuruRam6-Nov-13 19:17
memberJaganGuruRam6-Nov-13 19:17 
QuestionNot found SetResourceReference in new Groupbox I'm creating in code behind Pin
aripian17-Sep-13 21:37
memberaripian17-Sep-13 21:37 
AnswerRe: Not found SetResourceReference in new Groupbox I'm creating in code behind Pin
Shweta Lodha25-Sep-13 9:11
memberShweta Lodha25-Sep-13 9:11 
GeneralMy vote of 5 Pin
aripian11-Sep-13 15:15
memberaripian11-Sep-13 15:15 
GeneralRe: My vote of 5 Pin
Shweta Lodha25-Sep-13 9:10
memberShweta Lodha25-Sep-13 9:10 
GeneralMy vote of 5 Pin
phamchicong28-Aug-13 17:23
memberphamchicong28-Aug-13 17:23 
GeneralRe: My vote of 5 Pin
Shweta Lodha29-Aug-13 5:46
memberShweta Lodha29-Aug-13 5:46 
GeneralMy vote of 5 Pin
Prashant268215-Jul-13 3:03
memberPrashant268215-Jul-13 3:03 
GeneralRe: My vote of 5 Pin
Shweta Lodha4-Aug-13 2:19
memberShweta Lodha4-Aug-13 2:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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
Web04 | 2.8.150819.1 | Last Updated 7 Jun 2013
Article Copyright 2013 by Shweta Lodha
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid