WPF Control Template

Kailash Chandra Behera | Wednesday, June 01, 2016

Introduction

Control Template in WPF takes care of the visual appearance of WPF control, this article describes and demonstrates how control template is used in WPF. Here I have taken a button control as an example and customized the appearance of the button control using Control Template.

WPF Control Template defines the visual appearance and visual behavior of WPF control for example a button controller has a shape and it changes background color when mouse clicks and hovers, Every WPF controls associates by its default Template which provides default appearance of control and behavior, using WPF Control Template the visual appearance and visual behavior of WPF control can be customized and you can create your own control as well using WPF Control Template.

There are two ways to implement WPF control template that is Styling and Templating. The Styling and Templating model provides you with such great flexibility that in many cases you do not need to write your own controls

Getting Started

For implementing Control Template, This article have taken a button control for demonstration of control template. In this demonstration the Visual Appearance and Visual Behavior of button controls has customized.

Note:-Please read about WPF styling before continuing this demonstrator you must have knowledge of styling.

Implements Control Template By Style

 <Style TargetType="Button">  
  <!--Set to true to not get any properties from the themes.-->  
  <Setter Property="OverridesDefaultStyle" Value="True"/>  
  <Setter Property="Template">  
   <Setter.Value>  
    <ControlTemplate TargetType="Button">  
     <Grid>  
      <Ellipse Fill="{TemplateBinding Background}"/>  
      <ContentPresenter HorizontalAlignment="Center"  
               VerticalAlignment="Center"/>  
     </Grid>  
    </ControlTemplate>  
   </Setter.Value>  
  </Setter>  
 </Style>  

 <Button Style="{StaticResource DialogButtonStyle}" />

Each control has a default template. This gives the control a basic appearance. The default template is typically shipped together with the control and available for all common windows themes. It is by convention wrapped into a style that is identified by value of the DefaultStyleKey property that every control has. You can also customize the button control by changing the DefaultStyleKey property that means

Implements Control Template by Ellipse

 <Window.Resources>   
    <ControlTemplate x:Key = "ButtonTemplate" TargetType = "Button">  
           //Phase:-1 Declaring Shape of button  
      <Grid>   
       <Ellipse x:Name = "ButtonEllipse" Height = "100" Width = "150" >   
         <Ellipse.Fill>   
          <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">   
            <GradientStop Offset = "0" Color = "Red" />   
            <GradientStop Offset = "1" Color = "Orange" />   
          </LinearGradientBrush>   
         </Ellipse.Fill>   
       </Ellipse>   
       <ContentPresenter Content = "{TemplateBinding Content}"   
         HorizontalAlignment = "Center" VerticalAlignment = "Center" />   
      </Grid>   
                //Phase:-2 Attaching triggers for changing color of button  
      <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 = "YellowGreen" />   
             <GradientStop Offset = "1" Color = "Gold" />   
            </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>

In the First Phase of above XAML code shape of templates is defined, an Ellipse controls is placed for visual appearance and some property of ellipse like height, content position default color also defined

In the second phase some triggers are attached for changing color when some events like mouse hover and mouse pressed. these triggers will be fired when mouse hover event and mouse press event raised in the button control.

Use of Control Template
 <Button Content = "Round Button!" Template = "{StaticResource ButtonTemplate}" Width = "150" Margin = "50" />

Related Articles

  1. Resource in WPF
  2. UpdateSourceTrigger
  3. WPF Binding
  4. WPF Style
  5. WPF Converters
  6. WPF MultiValue Converter
  7. WPF Value Converters
  8. WPF INotifyPropertyChanged Interface
  9. WPF DEPENDENCY PROPERTIES

Summary

In this article we have discussed how to use Control Template for customize WPF button controls, In the same way you can customize the visual appearance of WPF controls. Hope you have clearly got what we have discussion in this article.

Thanks

By at