WPF

Styles in WPF

Styles and Templates Introduction

Styles

Style is a way to group similar properties in a single Style object and apply to multiple objects.

Let's have a look at the XAML code in Listing 1 that generates Figure 1. This code creates a Window with three Buttons, a TextBlock and a TextBox.

  1. <Window x:Class="StylesSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="Window1" Height="291" Width="455">  
  5.       
  6.         
  7.     <Grid Height="236" Width="405">  
  8.           
  9.         <TextBlock Margin="12,52,26,83" Name="textBlock1"   
  10.                    Background="Gray" Foreground="Orange"  
  11.                    FontFamily="Georgia" FontSize="12"  
  12.                    Width="370" Height="100" />  
  13.         <TextBox Height="30" Margin="11,16,155,0" Name="textBox1" VerticalAlignment="Top" />  
  14.           
  15.         <Button HorizontalAlignment="Right" Margin="0,14,26,0"  
  16.                 Name="button1" VerticalAlignment="Top"   
  17.                 Height="30" Width="120"  
  18.                 FontFamily="Verdana" FontSize="14" FontWeight="Normal"  
  19.                 Foreground="White" Background="DarkGreen"   
  20.                 BorderBrush="Black" >  
  21.             Browse  
  22.         </Button>          
  23.         <Button HorizontalAlignment="Right" Margin="0,0,30,39" Name="button2"   
  24.                 VerticalAlignment="Bottom"   
  25.                 Height="30" Width="120"  
  26.                 FontFamily="Verdana" FontSize="14" FontWeight="Normal"  
  27.                 Foreground="White" Background="DarkGreen"   
  28.                 BorderBrush="Black" >  
  29.             Spell Check  
  30.         </Button>  
  31.         <Button Margin="129,0,156,39" Name="button3" VerticalAlignment="Bottom"  
  32.                 Height="30" FontFamily="Verdana" FontSize="14" FontWeight="Normal"  
  33.                 Foreground="White" Background="DarkGreen"   
  34.                 BorderBrush="Black" >  
  35.             Save File  
  36.         </Button>  
  37.     </Grid>  
  38. </Window>  
Listing 1

As you can see from Figure 1, all three buttons have the same width, height, background, foreground and fonts and each Button element has the same code.

save file
                                                   Figure 1

Here is the Button element code that sets the Height, Width, Foreground, Background and Font properties.
  1. <Button HorizontalAlignment="Right" Margin="0,14,26,0"  
  2.          Name="button1" VerticalAlignment="Top"   
  3.          Height="30" Width="120"  
  4.          FontFamily="Verdana" FontSize="14" FontWeight="Normal"  
  5.          Foreground="White" Background="DarkGreen"   
  6.          BorderBrush="Black" >  
  7.      Browse  
  8.  </Button>     
All of the three buttons have same property values.

Now, imagine you have a large application with many windows and pages and they have many buttons with the same size and look. That means you will copy the same code again and again. Now what if a user wants to change the background color of all the Button elements in the application from Green to Red? That means, we will need to change the Background property of all Button elements in the application.

This duplicate work can be avoided using styles. You can group properties in a Style and set that style for all Button elements. The next time, if you want to change any property, just simply change that property value in the style and you are all set.

The Style element in XAML represents a style. A Style is usually added to the resources of a FrameworkElement. The x:Key is the unique key identifier of the style.

The code snippet in Listing 2 adds a Style to Window Resources and within the Style we use a setter to set the property type and values and we set the Width, Height, Background, Foreground and other properties.
  1. <Window.Resources>  
  2.     <!-- Green Button Style -->  
  3.     <Style x:Key="GreenButtonStyle" >  
  4.         <Setter Property="Button.Width" Value="120"/>  
  5.         <Setter Property="Button.Height" Value="30"/>  
  6.         <Setter Property="Button.FontFamily" Value="Verdana"/>  
  7.         <Setter Property="Button.FontSize" Value="14"/>  
  8.         <Setter Property="Button.FontWeight" Value="Normal"/>  
  9.         <Setter Property="Button.Foreground" Value="White"/>  
  10.         <Setter Property="Button.Background" Value="DarkGreen"/>  
  11.         <Setter Property="Button.BorderBrush" Value="Black"/>  
  12.     </Style>  
  13.   
  14. </Window.Resources>  
Listing 2

Once a Style is added to the resource dictionary, you can use it by using the Style property of a FrameworkElement. The code snippet in Listing 3 sets the Style of a Button using the StaticResource Markup Extension.
  1. <Button HorizontalAlignment="Right" Margin="0,14,26,0"  
  2.         Name="button1" VerticalAlignment="Top"   
  3.         Style="{StaticResource GreenButtonStyle}"  >  
  4.     Browse  
  5. </Button>  
Listing 3

Style

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 are used as any other resource and can be applied to the current element, parent element, root element and even on application level. The scope of styles are similar to any other resources. The resource lookup process first looks at 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 a Style element looks as in following:
  1. <Style>  
  2.    Setters  
  3. </Style>  
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"/>  
  5.             <Setter Property="Height" Value="30"/>  
  6.             <Setter Property="Foreground" Value="White"/>  
  7.             <Setter Property="Background" Value="DarkGreen"/>  
  8.             <Setter Property="BorderBrush" Value="Black"/>  
  9.               
  10.             <EventSetter Event="Click" Handler="Button1_Click"/>  
  11.         </Style>  
  12.     </Grid.Resources>  
  13.       
  14.     <Button>Click me</Button>  
  15. </Grid>  
Listing 4

BasedOn Property

Styles support inheritance. That means we can create styles based on existing styles. When you inherit a style from an existing style, the settings from a parent style are available in the inherited style. To inherit a style from another style, we set the BasedOn property to StaticResource Markup Extension as the style it is being inherited from.

The code snippet in Listing 5 creates a Style BackForeColorStyle that sets the Background and Foreground properties of the control. Then we create a FontStyle style that sets the font properties but is inherited from the BackForeColorStyle. The last style ButtonAllStyle is inherited from FontStyle. In the end, we set the Style of the button.
  1. <Grid Name="RootLayout">  
  2.     <Grid.Resources>  
  3.         <Style x:Key="BackForeColorStyle">  
  4.             <Setter Property="Control.Background" Value="Green"/>  
  5.             <Setter Property="Control.Foreground" Value="White"/>  
  6.         </Style>  
  7.   
  8.         <Style x:Key="FontStyle" BasedOn="{StaticResource BackForeColorStyle}">  
  9.             <Setter Property="Control.FontFamily" Value="Verdana"/>  
  10.             <Setter Property="Control.FontSize" Value="14"/>  
  11.             <Setter Property="Control.FontWeight" Value="Normal"/>  
  12.         </Style>  
  13.   
  14.         <Style x:Key="ButtonAllStyle" BasedOn="{StaticResource FontStyle}">  
  15.             <Setter Property="Button.Width" Value="120"/>  
  16.             <Setter Property="Button.Height" Value="30"/>  
  17.         </Style>  
  18.     </Grid.Resources>  
  19.             
  20.      <Button Name="Button1" Style="{StaticResource ButtonAllStyle}" >  
  21.          Click me  
  22.      </Button>    
  23.   </Grid>  
Listing 4

The code snippet in Listing 5 generates Figure 2 that shows that the button properties have been set from all of the three styles.

click me
                     Figure 2

TargetType Property

The TargetType property can be used to get and set the type for which a style is intended. If the TargetType property of a Style is set and you assign a style to the element that is not the type set in TargetType, you will get an error.

If the TargetType property is not set, you must set the x:Key property of a Style.

Let's take a quick look at the code listed in Listing 5. This code creates a Style named GreenButtonStyle and sets a bunch of Button properties.
  1. <Grid>  
  2.   
  3.     <Grid.Resources>  
  4.         <!-- Green Button Style -->  
  5.         <Style x:Key="GreenButtonStyle" >  
  6.             <Setter Property="Button.Width" Value="120"/>  
  7.             <Setter Property="Button.Height" Value="30"/>  
  8.             <Setter Property="Button.FontFamily" Value="Verdana"/>  
  9.             <Setter Property="Button.FontSize" Value="14"/>  
  10.             <Setter Property="Button.FontWeight" Value="Normal"/>  
  11.             <Setter Property="Button.Foreground" Value="White"/>  
  12.             <Setter Property="Button.Background" Value="DarkGreen"/>  
  13.             <Setter Property="Button.BorderBrush" Value="Black"/>  
  14.         </Style>          
  15.     </Grid.Resources>  
  16.       
  17.     <Button HorizontalAlignment="Right" Margin="0,14,26,0"  
  18.             Name="button1" VerticalAlignment="Top"   
  19.             Style="{StaticResource GreenButtonStyle}"  >  
  20.         Browse  
  21.     </Button>  
  22.       
  23. </Grid>  
Listing 5

Now we can simply replace the Style code in Listing 5 with Listing 6 where you may see that we have set the TargetType = “Button” but have removed Button in front of the properties. By setting TargetType fixes that this style can be applied to a Button element only.
  1. <!-- Green Button Style -->  
  2. <Style x:Key="GreenButtonStyle" TargetType="Button" >  
  3.     <Setter Property="Width" Value="120"/>  
  4.     <Setter Property="Height" Value="30"/>  
  5.     <Setter Property="FontFamily" Value="Verdana"/>  
  6.     <Setter Property="FontSize" Value="14"/>  
  7.     <Setter Property="FontWeight" Value="Normal"/>  
  8.     <Setter Property="Foreground" Value="White"/>  
  9.     <Setter Property="Background" Value="DarkGreen"/>  
  10.     <Setter Property="BorderBrush" Value="Black"/>  
  11. </Style>          
Listing 6

Triggers Property

Styles can use triggers within them. The Triggers property of Style represents the triggers applicable on a Style. For example, the following code snippet adds a Trigger for a button when the Button is in a pressed state; it will change the Foreground color of the button to Orange.
  1. <Style.Triggers>  
  2.       <Trigger Property="IsPressed" Value="true">  
  3.             <Setter Property = "Foreground" Value="Orange"/>  
  4.        </Trigger>  
  5. </Style.Triggers>  
Listing 6 shows the complete code of implementing triggers within a style.
  1. <Grid>  
  2.   
  3.     <Grid.Resources>  
  4.         <!-- Green Button Style -->  
  5.         <Style x:Key="GreenButtonStyle" TargetType="Button" >  
  6.             <Setter Property="Width" Value="120"/>  
  7.             <Setter Property="Height" Value="30"/>  
  8.             <Setter Property="FontFamily" Value="Verdana"/>  
  9.             <Setter Property="FontSize" Value="14"/>  
  10.             <Setter Property="FontWeight" Value="Normal"/>  
  11.             <Setter Property="Foreground" Value="White"/>  
  12.             <Setter Property="Background" Value="DarkGreen"/>  
  13.             <Setter Property="BorderBrush" Value="Black"/>  
  14.   
  15.             <Style.Triggers>  
  16.                 <Trigger Property="IsPressed" Value="true">  
  17.                     <Setter Property = "Foreground" Value="Orange"/>  
  18.                  </Trigger>  
  19.             </Style.Triggers>  
  20.   
  21.         </Style>  
  22.     </Grid.Resources>  
  23.   
  24.     <Button HorizontalAlignment="Right" Margin="0,14,26,0"  
  25.             Name="button1" VerticalAlignment="Top"   
  26.             Style="{StaticResource GreenButtonStyle}"  >  
  27.         Browse  
  28.     </Button>  
  29. </Grid>  
Listing 7

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs