Adding a custom control template in WPF

Question

In simple words, how to add a control template to my WPF Application? I am using Visual studio 2010 with .net 4.

Below are a few questions.

1) According to my understanding, a custom template is something that is used for re-defining an already defined default settings of a control. Am I right In this case ?

2) If we want the button to be with an image whenever I drag and drop from tool-box, then I should have over-ridden the XAML code for the button somewhere.

For example, I have got a control template code below that re-defines how the progress bar should be

[1. A simple example from stack overflow] WPF progressbar style

<ControlTemplate x:Key="CustomProgressBar" TargetType="ProgressBar" >
    <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
        <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
        <Border CornerRadius="0,0,0,0" Margin="1,1,1,1">
            <Border.Background>
                <SolidColorBrush Color="Transparent"/>                       
            </Border.Background>
        </Border>
        <Border BorderThickness="0,0,0,0" BorderBrush="Transparent" Margin="1,1,1,1">
            <Border.Background>
                <SolidColorBrush Color="Transparent"/>                        
            </Border.Background>
        </Border>
        <Rectangle Name="PART_Track" Margin="1,1,1,1" />
        <Decorator Name="PART_Indicator" Margin="1,1,1,1" HorizontalAlignment="Left">
            <Grid Name="Foreground">
                <Rectangle Fill="Transparent" Name="Indicator" />
                <Grid Name="Animation" ClipToBounds="True">
                    <Border Name="PART_GlowRect" Width="100"  Margin="0,0,0,0" HorizontalAlignment="Left" Background="LightBlue"/>                                                            
                </Grid>
                <Grid Name="Overlay">                         
                </Grid>
            </Grid>
        </Decorator>
        <Border BorderThickness="0" CornerRadius="0,0,0,0" BorderBrush="Transparent" />
    </Grid>           
</ControlTemplate>

Also , I tried creating a custom control. Projects->New->Custom control and the VS-2010 produces two files Customcontrol.cs and customcontroldesigner.cs. What should I do afterwards ? (Say I need a button with an image hence always).

Thanks.

Answer 1

(1) Control Templates

From the MSDN (source):

"The ControlTemplate allows you to specify the visual structure of a control. The control author can define the default ControlTemplate and the application author can override the ControlTemplate to reconstruct the visual structure of the control."

You can create a control template in xaml yourself or you can use Expression Blend to create a copy to edit and overwrite the existing template with.

(2) A Button Template

The default control template for a button is as follows:

<ControlTemplate TargetType="{x:Type Button}">
      <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
       <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
       </Trigger>
       <Trigger Property="IsKeyboardFocused" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonPressedBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonPressed}"/>
       </Trigger>
       <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>

To alter it to show different content you would add/change items near the border/ presenter tags. Image does not support direct content so you wont be able to write:

            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                <Image Source="/project;component/Images/image.png">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Image>
            </Border>

(3) Create a control with a button that has an image in it

To do this you can create a UserControl and add a button like below with an image:

<UserControl x:Class="ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Button >
            <Image Source="/project;component/Images/image.png"></Image>
        </Button>
    </Grid>
</UserControl>

This will create a control with an Image in it that is drag-able from the toolbox. Obviously the image source is a static value but you can change it in code, pass the class a path parameter, or create a property to access it.