WPF Control Template Binding Tutorial and Sample

WPF ControlTemplate binds to Template property of controls which defines the structure and appearance of the control. This tutorial of control template will show you some samples of it. Control template is one of the best way to create custom controls by changing various parameters. If you want to change your button to round shape then no need to write new control. You just have to change control template to change the shape.

You can define control template in resource dictionary so that it can be reused. Similar to other elements in dictionary you can specify key as well as target type for your control template. If you specify target type it won’t apply directly still you have to assign using key. In WPF, a control is often a composite of FrameworkElement objects. ControlTemplate combines FrameworkElement objects to build a single control. A ControlTemplate must have only one FrameworkElement as its root element. The root element usually contains other FrameworkElement objects. The combination of objects makes up the control’s visual structure.

wpf-control-template-binding-tutorial-example

wpf-control-template-binding-tutorial-example

Without ability to create and assign control template all controls in WPF would have same general appearance. A ControlTemplate is intended to be a self-contained unit of implementation detail that is invisible to outside users and objects, including styles. The only way to manipulate the content of the control template is from within the same control template.

Control template provides:

1. Triggers

2. Animation

3. Style

When you create a new ControlTemplate, you still might want to use the public properties to change the control’s appearance. The TemplateBinding markup extension binds a property of an element in ControlTemplate to a public property defined by control. TemplateBinding enables properties on the control to act as parameters to the template. That is, when a property on a control is set, that value is passed on to the element that has the TemplateBinding on it.

A TemplateBinding is an optimized form of a Binding for template scenarios, analogous to a Binding constructed with {Binding RelativeSource={RelativeSource TemplatedParent}}.

Tutorial and sample of basic control template:

<ControlTemplate TargetType="Button">
  <Border Name="Root">
    <!--Create the SolidColorBrush for the Background of button with name so that it can be referred to elsewhere in the
        control template.-->
    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Red"/>
    </Border.Background>
      <!--Use a ContentPresenter to display the Content of the Button.-->
      <ContentPresenter Margin="4,5,4,4" />
    </Border>
</ControlTemplate>
<Style TargetType="Button">
    <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <Ellipse Fill="{TemplateBinding Background}"/>
          <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

If only control template satisfies your customization then it is preferred over defining custom control.

Leave a Reply

Your email address will not be published. Required fields are marked *