WPF Styles (quick guide)

Styles provide a good way of providing a richer feel to your UI. They provide ways to change the look and feel of controls within the UI and establish UI behaviour such as changing the background colour based on some properties or bindings. You can create styles either in code or in xaml. Xaml is the conventional way and in this article I am going to concentrate mostly on how to define and use styles in xaml. Below gives a indication of how a style is declared:

<style>
 <!-- styles can contain a collection of setters -->
  <setter>
  </setter>
 <!-- styles can contain a collection of triggers -->
  <style.triggers> 
  </style.triggers>
</style>

Creating a style is straight forward using the style tags and together within these tags you can provide a list of setter tags which allow you to set values for certain properties. For example within the style tags I can have

<style x:Key="red_background_style">
 <setter Property=”Background” Value=”Red”/>
</style>

So when I apply this style to a control it will change the background of the control to red. If I apply the style to a button control, the button’s background will be red.

There are also other types of setters, such as EventSetters which instead of setting property values it sets event handlers for certain events. The example below shows how the event setter tag maps the mouse_down_handler to be called when the MouseDown event occurs.

<style>
  <eventsetter event=“MouseDown” handler=“mouse_down_handler”>
</style>

Now in general a style is a collection of setters and/or eventsetters and also triggers which I will talk about a bit later. Let’s put together a style and show the xaml. I’m going to apply my style to a button to give it a different look and feel.

<Button Height=“25” Name=“sample_button” Width=“50”>
   <Button.Style>
      <Style>
         <Setter Property=“Content” Value=“fxmax's button”/>
         <Setter Property=“Background” Value=“Green”/>
      </Style>
   </Button.Style>
</Button>

In the above example I have defined a style within the control but I could also have declared this style in a resource collection, and given the style a key this is a name and in my button control set the style property to this style using the key. Putting styles in resource collections and keeping them in a separate file is a good idea. I can then use them in all views for my applications by referencing the resource collection in my xaml files. I can even set the style to be the default style for a particular control using the Target_type property of the style. See this example:

<Window.Resources>
   <Style TargetType=“Button”>
      <Setter Property=“Content” Value=“Style set for all buttons” />
      <Setter Property=“Background” Value=“Red”/>  
   </Style>
</Window.Resources>

Here I have placed the style in the windows resource collection in my Xaml file for my view but set the target type property to be a button. Now all buttons in my view will have this style. If I wanted to have one button in my view to be different I could create a style that is based on the above style but override or add new styles. I can do this with the BasedOn property.

<Window.Resources>
   <Style x:Key=“baseStyle”>
      <Setter Property=Content Value=“base Style”/>
      <Setter Property=“Background” Value=Green/>
      <Setter Property=“FontSize” Value=“15” />
      <Setter Property=“FontFamily” Value=“Arial” />
   </Style>
   <Style x:Key=“newStyle” BasedOn=“{StaticResource baseStyle}”>
      <Setter Property=“Content” Value=“new style: inherited”/>
      <Setter Property=“Background” Value=“AliceBlue”/>
      <setter Property=“FontStyle” Value=“Italic” />
   </Style>
</Window.Resources>

Triggers

When you start putting triggers into your styles then things start to become interesting. Triggers allow you to change style properties when certain conditions occurs. There are five types of triggers that you can have Property Trigger, Multi-Property Trigger, Data Trigger, Multi-Data Trigger

Property Triggers
This is a trigger that monitors a single property and activates when that property meets the condition of the trigger. For example below is a simple trigger that changes the font colour when the mouse is over the control.

<Style.Triggers>
   <Trigger Property=“IsMouseOver” Value=“True”>
      <Setter Property=“Foreground” Value=“Black” />
   </Trigger>
</Style.Triggers>

Multi-Trigger
This is much like the property trigger but monitors more than one property, an example below shows just how this works. The style checks not only if the mouse is over the control but also if the button contains a value of ‘a’.

<style x:key=“buttonStyle” TargetType=“Button”>
 <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property=“Content” Value=“a” />
        <Condition Property=“IsMouseOver” Value=“True” />
      </MultiTrigger.Conditions>
      <Setter Property=“Foreground” Value=“Black” />
 </MultiTrigger>
<style>

Data Triggers and Multi-Data Triggers
The data triggers are much like the property triggers but the difference is that the data trigger monitors the value of bounded data, whereas property triggers deals with property values. Below is another example of a data trigger.

<style>
 <style.triggers>
    <DataTrigger Binding=“{Binding Data.Count}” Value=“0”>
       <Setter Property=“Background” Value=“Red”/>
    </DataTrigger>
 </style.triggers>
</style>

This is the end of the article hope this gives some insight.