How To Create Templated Controls

Data Binding

When you're creating a control template and you want to bind to the templated parent you can use:

<TextBlock Name="tb" Text="{TemplateBinding Caption}"/>

<!-- Which is the same as -->
<TextBlock Name="tb" Text="{Binding Caption, RelativeSource={RelativeSource TemplatedParent}}"/>

Although the two syntaxes shown here are equivalent in most cases, there are some differences:

1. TemplateBinding accepts only a single property rather than a property path, so if you want to bind using a property path you must use the second syntax:

   <!-- This WON'T work as TemplateBinding only accepts single properties -->
   <TextBlock Name="tb" Text="{TemplateBinding Caption.Length}"/>
   
   <!-- Instead this syntax must be used in this case -->
   <TextBlock Name="tb" Text="{Binding Caption.Length, RelativeSource={RelativeSource TemplatedParent}}"/>

2. A TemplateBinding only supports OneWay mode for performance reasons (this is the same as WPF). This means a TemplateBinding is actually equivalent to {Binding RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}. If TwoWay binding is required in a control template, the full syntax is needed as shown below. Note that Binding will also use the default binding mode unlike TemplateBinding.

   {Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}

3. TemplateBinding can only be used on IStyledElement.

<!-- This WON'T work as GeometryDrawing is not a IStyledElement. -->
<GeometryDrawing Brush="{TemplateBinding Foreground}"/>

<!-- Instead this syntax must be used in this case. -->
<GeometryDrawing Brush="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>