Post
Ask Question

Customize WPF Application Using Template And Styles

Introduction

 
In this article, you will learn to customize built-in controls and layout using templates and styles.
 
Overview
 
Learn to customize "VehicalPurchaseManagement system" dashboard using templates and styles.
 
Prerequisites
  • Visual Studio 2010 or above
  • Before starting with this article, please download the code from my previous article.

Demo steps

 
Step 1
 
Add a new folder called Styles and then right click on Styles->Add -> Resource Dictionary as shown below and name the file as 'VPMStyle'. 
 
Open 'VPMStyle.xaml' and observe as below,
  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  3.                     xmlns:local="clr-namespace:VehicalPurchaseManagement.Style">  
  4.       
  5. </ResourceDictionary>  
Step 2
 
Add the below highlighted code in 'VPMStyle.xaml'
  1. <Style x:Key="txtTile" TargetType="{x:Type TextBlock}">  
  2.       <Setter Property="HorizontalAlignment" Value="Center"/>  
  3.       <Setter Property="VerticalAlignment" Value="Center"/>  
  4.       <Setter Property="Foreground" Value="White"/>  
  5.       <Setter Property="FontFamily" Value="Segoe UI Light"/>  
  6.   </Style>  
Here, x:Key is the resource key which uniquely identifies controls that are created and can be referenced in a XAML.
 
x:Type specifies the type of control for which the style will be applied.
 
Step 3
 
Add the below code inside <ResourceDictionary>,
  1. <!--Button control style-->  
  2.    <Style TargetType="{x:Type Button}">  
  3.        <Setter Property="HorizontalAlignment" Value="Stretch"/>  
  4.        <Setter Property="VerticalAlignment" Value="Stretch"/>  
  5.        <Setter Property="Foreground" Value="White"/>  
  6.        <Setter Property="Template">  
  7.            <Setter.Value>  
  8.                <ControlTemplate TargetType="Button">  
  9.                    <Border Background="{TemplateBinding Background}" CornerRadius="0">  
  10.                        <Grid>  
  11.                            <Grid.RowDefinitions>  
  12.                                <RowDefinition Height="28*"/>  
  13.                                <RowDefinition Height="64*"/>  
  14.                                <RowDefinition Height="50*"/>  
  15.                                <RowDefinition Height="8*"/>  
  16.                            </Grid.RowDefinitions>  
  17.                            <Grid.ColumnDefinitions>  
  18.                                <ColumnDefinition Width="15"/>  
  19.                                <ColumnDefinition Width="28*"/>  
  20.                                <ColumnDefinition Width="64*"/>  
  21.                                <ColumnDefinition Width="43*"/>  
  22.                            </Grid.ColumnDefinitions>  
  23.                            <Image Source="{TemplateBinding Tag}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2"  />  
  24.                            <TextBlock  Text="{TemplateBinding Content}"  HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />  
  25.                        </Grid>  
  26.                    </Border>  
  27.                </ControlTemplate>  
  28.            </Setter.Value>  
  29.        </Setter>  
  30.    </Style>  
In this demo, style is defined for a button control with few properties such as HorizontalAlignment, VerticalAlignment, Foreground & Template as common values .
  • ControlTemplate
    It defines the visual appearance of the control which redefines the look and behavior of any element completely.

  • Border control
    It draws a border, background or both around the button.

  • TemplateBinding
    It links the value of a property in a control template to be the value of another property on the templated control.

  • StaticResource
    This markup extension is used to reference a resource. In this case, the resource is txtTile. 
Step 4
 
Open App.xaml and add below line of code inside <Application.Resources>: 
 
This is required for sharing the resources defined in resource dictionary across the application.
  1. <ResourceDictionary>  
  2.            <ResourceDictionary.MergedDictionaries>  
  3.                <ResourceDictionary Source="Style/VPMStyle.xaml"/>  
  4.            </ResourceDictionary.MergedDictionaries>  
  5.        </ResourceDictionary>  
Step 5
 
Open 'VehicalPurchaseManagement.xaml' and modify the Tiles code as below,
  1. <Button Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="3" Background="#FF2A80B9" HorizontalAlignment="Stretch"   
  2.          VerticalAlignment="Stretch" Content="View Orders" Tag="Images\Car2.png"/>  
  3.      <Button Grid.Column="1" Grid.Row="5" Background="#FF3598DC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  4.              Content="Add Stock" Tag="Images\Addcart.png" />  
  5.      <Button Grid.Column="3" Grid.Row="5" Background="#FF36BCDC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  6.              Content="View Stock" Tag="Images\ViewCart.png" />  
  7.      <Button Grid.Column="7" Grid.Row="3" Background="#FFE84C3D" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  8.              Content="View Supplier" Tag="Images\ViewSupplier.png">  
  9.      </Button>  
  10.      <Button Grid.Column="7" Grid.Row="7"  Background="#FFE87B3E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  11.             Content="View Customer" Tag="Images\Viewsupplier.png" />  
  12.      <Button Grid.Column="5" Grid.Row="7" Background="#FFE8A33E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  13.              Content="Edit Customer" Tag="Images\EditSupplier.png" />  
  14.      <Button Grid.Column="5" Grid.Row="3" Background="#FF27AE61" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  15.              Content="Add Supplier" Tag="Images\EditCustomer.png" />  
  16.      <Button Grid.Column="7" Grid.Row="3" Background="#FF27AE61" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  17.             Content="Add Supplier" Tag=" Images\AddSupplier.png" />  
  18.      <Button Grid.Column="7" Grid.Row="5" Background="#FF27AF3E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  19.              Content="Add Customer" Tag="Images\AddCustomer.png" />  
  20.      <Button Grid.Column="5" Grid.Row="5" Background="#FF75AF27" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
  21.              Content="Edit Supplier" Tag="Images\EditSupplier.png"/>  
Step 6
 
Build & execute the application. Observe the output.
 
 
Observation
 
Here, with the reduced code, only text is getting displayed and the images are not displayed. To make the images displayed the button should have a property of type ImageSource. To achieve that you need to create custom control.
 
In the next demo, you will learn to create a Custom control.
 

Summary

 
In this article, we discussed about the customization of built-in controls and layouts using Styles and templates. Please find the attached code for better understanding and let me know if you have any questions/queries regarding the article. Cheers


Similar Articles