Control Template in WPF

Control template is core component of WPF. Controls in WPF are made from so many components and elements. This is called as visual representation of control. Control Templates are used to replace Visual Tree of an element.

Each control has its own default control template with basic appearance. Control has dependency property called Template. Setting this property can replace appearance of control. Control Template can be specified inside style or in resource file or in resource element of window/user control. Control template can be set to particular type like Button, Listbox, Menu etc.

Control Template also allows you to specify behavior using Trigger or Visual State Manager. In below example I have used trigger to change behavior of control. You can visit my separate post on the Visual State Manager in WPF for more information.

<Window.Resources>

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">

    <Grid>

        <Ellipse x:Name="ButtonEllipse" Height="100" Width="100" >

            <Ellipse.Fill>

                <LinearGradientBrush StartPoint="0,0.2"

                                     EndPoint="0.2,1.4">

                    <GradientStop Offset="0" Color="Cyan"/>

                    <GradientStop Offset="1" Color="Blue"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <ContentPresenter Content="{TemplateBinding Content}"

                            HorizontalAlignment="Center"

                            VerticalAlignment="Center" />

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="IsMouseOver" Value="True">

            <Setter TargetName="ButtonEllipse" Property="Fill" >

                <Setter.Value>

                    <LinearGradientBrush StartPoint="0,0.2"

                                         EndPoint="0.2,1.4">

                        <GradientStop Offset="0" Color="Pink"/>

                        <GradientStop Offset="1" Color="Red"/>

                    </LinearGradientBrush>

                </Setter.Value>

            </Setter>

        </Trigger>

        <Trigger Property="IsPressed" Value="True">

            <Setter Property="RenderTransform">

                <Setter.Value>

                    <ScaleTransform ScaleX="0.8" ScaleY="0.8"

                                    CenterX="0" CenterY="0"  />

                </Setter.Value>

            </Setter>

            <Setter Property="RenderTransformOrigin"

                    Value="0.5,0.5" />

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!"

        Template="{StaticResource ButtonTemplate}"

        Width="150" Margin="5" />

<Button Content="Click Me!" Height="40"

        Width="150" Margin="5" />

</StackPanel>

As per above example, First image demonstrates two buttons first one is with Template and second one is without Template. In second image first button background changed when mouse is hover over the button.

As per XAML code snippet, ButtonTemplate is defined inside window’s resources. Inside ButtonTemplate, Ellipse element is added inside grid and set its background with linear gradient. Also added Content Presenter which is used to display content of button. In our case we set ‘Click Me!’ content to button which will automatically added to Content Presenter because it has template binding with content element of parent control.

Triggers are also added to control template to change behavior of control on certain event. In above code we defined property trigger on IsMouseOver property and IsPressed property. So when mouse hover over the button it will change color specified in linear gradient of setter element and when button is pressed it will scale transform button to 0.8. So the whole control size will reduce when button is pressed.

See also - 

Logical Tree vs. Visual Tree

WPF Class Hierarchy

Styles in WPF

Triggers in WPF

Visual State Manager in WPF

Dependency Property