WPF - ControlTemplate in WPF

A control template is defined by using the ControlTemplate element that is placed inside the Resources element  Same as styles, control templates are type-specific, therefore can only be applied to elements that have the same type as the one defined.
You can change the structure and appearance of a control by modifying the ControlTemplate of that control.

Let see how to create a control template,in this article i am apply controltemplate on button control.

Step 1
Create a WPF Application and give the project name as SolControlTemplate.

Step 2
Add a button control on window,it is look like this

<Window x:Class="SolControlTemplate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Control Template" Height="300" Width="300" Background="Gray">
    
      <Grid>
        <Button Name="BtnOK" Height="50" Width="100">OK</Button>
    </Grid>
</Window>

Step 3
Inside the window element add a Window.Resources Property,it is look like this

 <Window.Resources>
 </Window.Resources> 

Step 4

Inside the Window.Resources property add ControlTemplate element,it is look like this

<Window.Resources>
     <ControlTemplate x:Key="BtnTemplate" TargetType="Button">
     </ControlTemplate>
</Window.Resources>  

Step 5

Create a ControlTemplate on button control,it is look like this

 <Window.Resources>
        
        <ControlTemplate x:Key="BtnTemplate" TargetType="Button">
            <Grid>
            <Rectangle x:Name="ButtonRecTangle" Stroke="Black" StrokeThickness="3" RadiusX="10" RadiusY="10">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Coral"/>
                            <GradientStop Offset="1" Color="WhiteSmoke"/>
                    </LinearGradientBrush>
                </Rectangle.Fill> 
            </Rectangle>

                    <!--For Display Text(Content) in button -->
                <Viewbox>
                    <!--set the button text which user will define on button Ex- OK -->
                    <ContentControl Content="{TemplateBinding Button.Content}"></ContentControl>
                    
                </Viewbox>
            </Grid>
            
            <!--ControlTemplate Trigger-->
            
                        
        </ControlTemplate>

       
    </Window.Resources>  

Step 6
To apply a ControlTemplate trigger for button.ControlTemplate trigger property can write inside the ControlTemplate element,it is look like this

<ControlTemplate.Triggers>
                
                <!--Trigger apply on IsMouseOver-->
                
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonRecTangle" Property="Fill">
                        
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="WhiteSmoke"/>
                                <GradientStop Offset="1" Color="Orange"/>
                            </LinearGradientBrush>
                        </Setter.Value> 
                        
                    </Setter>
                </Trigger>
                
                <!--Trigger apply on IsPressed-->
                
                <Trigger Property="Button.IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="RenderTransformOrigin" Value=".5,.5"/>



   <Setter TargetName="ButtonRecTangle" Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="Orange"/>
                                <GradientStop Offset="1" Color="Coral"/>
                            </LinearGradientBrush>
                        </Setter.Value> 
                    </Setter>
  </Trigger>
            </ControlTemplate.Triggers>  
            
        </ControlTemplate>

Finally ControlTemplate element look like this

 <Window.Resources>
        
        <ControlTemplate x:Key="BtnTemplate" TargetType="Button">
            <Grid>
            <Rectangle x:Name="ButtonRecTangle" Stroke="Black" StrokeThickness="3" RadiusX="10" RadiusY="10">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Coral"/>
                            <GradientStop Offset="1" Color="WhiteSmoke"/>
                    </LinearGradientBrush>
                </Rectangle.Fill> 
            </Rectangle>

                    <!--For Display Text(Content) in button -->
                <Viewbox>
                    <!--set the button text which user will define on button Ex- OK -->
                    <ContentControl Content="{TemplateBinding Button.Content}"></ContentControl>
                    
                </Viewbox>
            </Grid>
            
            <!--ControlTemplate Trigger-->
            
            <ControlTemplate.Triggers>
                
                <!--Trigger apply on IsMouseOver-->
                
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonRecTangle" Property="Fill">
                        
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="WhiteSmoke"/>
                                <GradientStop Offset="1" Color="Orange"/>
                            </LinearGradientBrush>
                        </Setter.Value> 
                        
                    </Setter>
                </Trigger>
                
                <!--Trigger apply on IsPressed-->
                
                <Trigger Property="Button.IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="RenderTransformOrigin" Value=".5,.5"/>

                     <Setter TargetName="ButtonRecTangle" Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="Orange"/>
                                <GradientStop Offset="1" Color="Coral"/>
                            </LinearGradientBrush>
                        </Setter.Value> 
                    </Setter>

               </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
</Window.Resources>

Step 7
To apply ControlTemplate on button control,it is look like this

<Grid>
        <Button Name="BtnOK" Height="50" Width="100" Template="{StaticResource BtnTemplate}">OK</Button>
</Grid>

Full Code

<Window x:Class="SolControlTemplate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Control Template" Height="300" Width="300" Background="Gray">
    
    <Window.Resources>
        
        <ControlTemplate x:Key="BtnTemplate" TargetType="Button">
            <Grid>
            <Rectangle x:Name="ButtonRecTangle" Stroke="Black" StrokeThickness="3" RadiusX="10" RadiusY="10">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Coral"/>
                            <GradientStop Offset="1" Color="WhiteSmoke"/>
                    </LinearGradientBrush>
                </Rectangle.Fill> 
            </Rectangle>

                    <!--For Display Text(Content) in button -->
                <Viewbox>
                    <!--set the button text which user will define on button Ex- OK -->
                    <ContentControl Content="{TemplateBinding Button.Content}"></ContentControl>
                    
                </Viewbox>
            </Grid>
            
            <!--ControlTemplate Trigger-->
            
            <ControlTemplate.Triggers>
                
                <!--Trigger apply on IsMouseOver-->
                
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonRecTangle" Property="Fill">
                        
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="WhiteSmoke"/>
                                <GradientStop Offset="1" Color="Orange"/>
                            </LinearGradientBrush>
                        </Setter.Value> 
                        
                    </Setter>
                </Trigger>
                
                <!--Trigger apply on IsPressed-->
                
                <Trigger Property="Button.IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="RenderTransformOrigin" Value=".5,.5"/>




                    <Setter TargetName="ButtonRecTangle" Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="0" Color="Orange"/>
                                <GradientStop Offset="1" Color="Coral"/>
                            </LinearGradientBrush>
                        </Setter.Value> 
                    </Setter>
</Trigger>
            </ControlTemplate.Triggers>  
            
        </ControlTemplate>

       
    </Window.Resources>  
    
    <Grid>
        <Button Name="BtnOK" Height="50" Width="100" Template="{StaticResource BtnTemplate}">OK</Button>
    </Grid>
</Window>

Run the project.

Output

1.ControlTemplate Button

Click on image for better view

2.When user move the mouse pointer on button control

Click on image for better view

3.When user press the button

Click on image for better view

Download
Download Source Code