Introduction to Styles in WPF

Introduction

First of all you have to create a new WPF  Project  for that you can do as following.

Imagine you want to create an application with a unique design. All your buttons should have an orange background and an italic font. Doing this the conventional way means that you have to set the Background and the FontStyle property on every single button.

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">

    <Button Background="Orange" FontStyle="Italic"

            Padding="8,4" Margin="4">Styles</Button>

    <Button Background="Orange" FontStyle="Italic"

            Padding="8,4" Margin="4">are</Button>

    <Button Background="Orange" FontStyle="Italic"

            Padding="8,4" Margin="4">cool</Button>

</StackPanel>

Here is the image of project Solution Explorer

This code is neither maintainable nor short and clear. The solution for this problem are styles.

The concept of styles let you remove all properties values from the individual user interface elements and combine them into a style. A style consists of a list of setters. If you apply this style to an element it sets all properties with the specified values. The idea is quite similar to Cascading Styles Sheets (CSS) that we know from web development.

To make the style accessible to your controls you need to add it to the resources. Any control in WPF have a list of resources that is inherited to all controls beneath the visual tree. That's the reason why we need to specify a x:Key="myStyle" property that defines a unique resource identifier.

To apply the style to a control we set the Style property to our style. To get it from the resources we use the {StaticResource [resourceKey]} markup extension.

<Window>

    <Window.Resources>

        <Style x:Key="myStyle" TargetType="Button">

           <Setter Property="Background" Value="Orange" />

           <Setter Property="FontStyle" Value="Italic" />

           <Setter Property="Padding" Value="8,4" />

           <Setter Property="Margin" Value="4" />

        </Style>

    </Window.Resources>

    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">

        <Button Style="{StaticResource myStyle}">Styles</Button>

        <Button Style="{StaticResource myStyle}">are</Button>

        <Button Style="{StaticResource myStyle}">cool</Button>

    </StackPanel>

</Window>

What we have achieved now is

1.     A maintainable code base
2.     Removed the redundancy
3.     Change the appearance of a set of controls from a single point
4.     Possibility to swap the styles at runtime.

Window1.xaml

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="My First WPF Application" Height="300" Width="300">

    <Window.Resources>

        <Style x:Key="myStyle" TargetType="Button">

            <Setter Property="Background" Value="green" />

            <Setter Property="FontStyle" Value="normal" />

            <Setter Property="Padding" Value="8,4" />

            <Setter Property="Margin" Value="4" />

            <Setter Property="FontWeight" Value="bold" />

            <Setter Property="Foreground" Value="White" />

        </Style>

    </Window.Resources>

    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">

        <Button Style="{StaticResource myStyle}" Click="Button_Click">First WPF Application</Button>

    </StackPanel>

  

</Window>

Window1.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace WpfApplication1

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

        }

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            string  [] a = new string[3];

            a[0] = "a";

            a[1] = "b";

            a[2] = "c";

            for (int i = 0; i < a.Length; i++)

            {

                MessageBox.Show(a[i]);

            }

        }

    }

}

Your Application look like this