What are the Templates in WPF ?

Open 1 Answers 11 Views Education

What are the Templates in WPF ?

1 Answer


Templates are an integral part of user interface design in WPF. WPF has the following three types of templates:

  • Control Template
  • Items Panel Template
  • Data Template
Control Template
The ControlTemplate of a control defines the appearance of the control. We can change or define a new look and appearance of a control by simply changing the ControlTemplate of a control. ControlTemplates are even more useful when you write your own controls. Using ControlTemplates, you can build a custom button that has a circular layout and changes its color when you mouse over or press it.
The ControlTemplate element in XAML defines a ControlTemplate at design-time. Templates are usually defined as resources using a FrameworkElement's Resources property. The following code snippet is the syntax for defining a ControlTemplate for a Button element.
  1. <Grid>   
  2.    <Grid.Resources>   
  3.       <ControlTemplate x:Key="RoundButtonTemplate" />   
  4.    </Grid.Resources>   
  5. </Grid>  
We need to create a circular button where the outer circle of the button is of a different color than the inner circle and when you mouse over and press the button, it changes the background color.
Add a Grid as contents of the ControlTemplate. Add two Ellipse elements within a Grid with different radii and different color fills.
  1. <Grid.Resources>  
  2.     <ControlTemplate x:Key="RoundButtonTemplate">  
  3.         <Grid>  
  4.             <Ellipse Width="100" Height="100" Name="ButtonBorder" Fill="OrangeRed" />  
  5.             <Ellipse Width="80" Height="80" Fill="Orange" /> </Grid>  
  6.     </ControlTemplate>  
  7. </Grid.Resources>  
The following code snippet creates a Button element and sets its Template to the ControlTemplate that we created-
<Button Template="{StaticResource RoundButtonTemplate}" >OK</Button>
In the previous example, we saw how a Style element can be used within the resources to group multiple properties of elements and set them using the Style property of elements. However, Style functionality does not end here. Style can be used to group and share not only properties, but also resources and event handlers on any FrameworkElement or FrameworkContentElement.
Styles are resources and used as any other resource and can be applied to the current element, parent element, root element and even on the application level. The scope if styles are similar to any other resources. The resource lookup process first looks up for local styles and if not found, it traverses to the parent element in the logical tree and so on. In the end, the resource lookup process looks for styles in the application and themes.
The Style element in XAML represents a style. The typical definition of the Style element looks as in the following:


As you can see from the definition of Style, a Style has one more Setter element. Each Setter consists of a property and a value. The property is the name of the property and the value is the actual value of that property of the element to that the style will be applied to.
Setters Property
The Setters property of Type represents a collection of Setter and EventSetter objects. Listing 4 uses the Setters property and adds a Setter and EventSetter object.
The code snippet in Listing 4 sets the Setters property of a Style by adding a few Setter elements and one EventSetter element using XAML at design-time. 
  1. <Grid>  
  2.     <Grid.Resources>  
  3.         <Style TargetType="{x:Type Button}">  
  4. <Setter Property="Width" Value="200"/> <Setter Property="Height" Value="30"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Background" Value="DarkGreen"/> <Setter Property="BorderBrush" Value="Black"/> <EventSetter Event="Click" Handler="Button1_Click"/>  
  5.         </Style>  
  6.     </Grid.Resources>  
  7.     <Button>Click me</Button>  
  8. </Grid>  
by (280k points)