Skip to main content

WPF Control Template

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 Templating

 <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. WPF Style
  2. WPF Resource
  3. WPF Binding

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

Comments

Post a Comment

Popular posts from this blog

Generate QR Code in WPF

Introduction In my previous two blogs, we have discussed how to display generate and display various barcodes on the web page. In this blog, we are going to demonstrate how to Generate QR Code in the WPF application. Getting Started Here in the demonstration Generate QR Code in WPF , will generate QR code using third party library as there is not inbuilt library provided by Microsoft to generate QR code and will display in WPF image control, In the below, we will see the steps to display QR Code. As I mentioned in the above paragraph that there is no inbuild library provided by Microsoft to generate QR code, I have taken the help of the ZXing library which is a third party free library and available Nuget. This library provides various options to generate barcodes and QR Code from the user-friendly text. Generate QR Code in WPF Here are the steps to generate QR code and let's follow the steps to complete demonstrations. Demonstration:- Generate QR Code Open visual stud
Post a Comment
Read more

Creating Application in Prism

Introduction This article explains an illustration of creating a windows application in Prism Library(WPF Prism). The solution includes recommended practices and techniques and is the basis for the procedures in Prism. This illustration created in the Visual Studio 2012, It can also developed in the visual studio 2008 and 2010, because wpf supports from .net framework 3.5 to latest version. Microsoft.Practices.Prism.dll. This assembly contains the implementation of the Prism Library core components such as modularity, logging services, communication services, and definitions for several core interfaces. It also contains the implementation of Prism Library components that target WPF applications, including commands, regions, and events. Microsoft.Practices.Prism.UnityExtensions.dll. This assembly contains base and utility classes you can reuse in applications built with the Prism Library that consume the Unity Application Block. For example, it contains a bootstrapper base class
1 comment
Read more

WPF Binding

Introduction This blog describes WPF Binding and the measure elements exist with binding with XAML example in XAML and code-behind. Getting Started Binding helps in WPF to flow data from one object to another object, the object which fetches data is called source and the object which receives the data is called target. The Object a be a UI control or object of a class that means in binding you can bind a property of a class and property of another control to WPF UI controls as well. XAML Example <TextBox x:Name="sourceText" Grid.Row="0" /> <Button Grid.Row="1" Content="{Binding ElementName=sourceText, Path=Text}"/> Code Example Button btn=new Button(); Binding binding = new Binding("Text"); binding.Source = sourceText; btn.SetBinding(Button.ContentProperty, binding); In WPF binding has some measure properties or elements that we are using while developing application or projects, here we are going to d
1 comment
Read more