What is the template binding vs binding?

A picture is worth a thousand words. In this case it is 7 minutes video: https://www.youtube.com/watch?v=z-0TZR-7xLI

EDIT: Example:

  • A Button has a default ControlTemplate property and Height property
  • You override ControlTemplate property of a Button by writing your own (for example you want to make an Ellipse-looking button instead of Rectangle-looking)
  • After you made an Ellipse in your new ControlTemplate, you want the Ellipse to be the same size as original Button's Height property
  • So you use TemplateBinding in order to reference Button's Height without naming itenter image description here

Eren Ersönmenz already explained it quite well, but i would like to give it another perspective to better understand the concept.

In WPF every control is more or less detached from its presentation. You can always change the template of controls and make it look completely different. A button works as expected with a ControlTemplate only consisting of a Rectangle for example. Now sometimes it is necessary for the ControlTemplate to actually use the properties of the logic part of a control. And thats what TemplateBinding is for it just tells the ControlTemplate "Use this property of the control we are giving the visual presentation". A good example is the Background property on every control, it has no meaning on its own, it gets its meaning by TemplateBinding it to child control in the ControlTemplate.

Binding on its own is very good described in the MSDN. This is a very nice cheat sheet which in fact hangs on my wall right next to me. It gives a good overview of all the different bindings available.


TemplateBinding is used for binding to the element properties within the template definition. In your example, you could have written:

 <Border Padding="{Binding Padding}" ...>

...meaning to bind the border's padding property to the padding property of... what? You'd like to say, "padding property of the control that this template is being used for." You can't give it a name because you don't know the x:Name of the control at this time (even if you did, it wouldn't work because it's in a different namescope). However, you can do this by defining a relative source

<Border Padding="{Binding Padding, RelativeSource={RelativeSource TemplatedParent}" ...>

or use TemplateBinding, which is a shortcut(*) for above

<Border Padding="{TemplateBinding Padding}" ...>

(*) In addition to being less verbose in these templating scenarios, TemplateBinding has a couple of differences compared to a regular binding:

  • It is evaluated at compile-time. (if, for example, Padding property didn't exist, you would get a compile error. But if you were to use a binding with TemplatedParent, you would only see the error at runtime.)
  • It is always a one-way binding.
  • It requires that both the source and target properties are dependency properties.
  • It has much less functionality (no StringFormat, Delay, IsAsync, etc.. see the properties of Binding vs TemplateBindingExtention).

Tags:

Wpf

Mvvm Light