WPF - Style element in WPF

WPF Style element is like CSS Style in ASP.net

How to create a style in Wpf Let see.

Step 1
First Create a WPF Application.

Step 2
Add three button controls on window. It is look like in XAML editor.

   1:  <Window x:Class="SolStyleinWPF.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="300" Width="300">

   5:      <Grid>

   6:  <Button Height="23" Margin="77,68,125,0" Name="button1" VerticalAlignment="Top">A</Button>

   7:          <Button Margin="77,120,125,119" Name="button2">B</Button>

   8:          <Button Height="23" Margin="77,0,125,67" Name="button3" VerticalAlignment="Bottom">C</Button>    </Grid>

   9:  </Window>

Step 3
Inside the window tag add <Window.Resource> property.
Resource - Resource can allow to set the properties of multiple controls at a time.

   1:  <Window.Resources>

   2:          

   3:  </Window.Resources>

Step 4
Inside the Window.Resources the property add the style element and with attribute.
It’s look like this:

   1:  <Window.Resources>

   2:          <Style x:Key="BtnStyle" TargetType="Button">

   3:              

   4:          </Style>    

   5:  </Window.Resources> 

X:Key - Set The Key Name
TargetType - Gets or Sets the Control for which the style is intended.


Step 5
Inside the Style Element add the Setter element with attribute.
It’s look like this:

   1:  <Window.Resources>

   2:          <Style x:Key="BtnStyle" TargetType="Button">

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

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

   5:              <Setter Property="BorderBrush" Value="Brown"></Setter>

   6:              <Setter Property="BorderThickness" Value="3"></Setter>

   7:              <Setter Property="Width" Value="100px"></Setter>

   8:          </Style>    

   9:  </Window.Resources>

Specify the button property name and value

Finally create style for button control and now we can call a style in Button Control
It’s look like this in XAML editor

   1:  <Grid>

   2:         

   3:          <Button Height="23" Margin="77,68,125,0" Name="button1" VerticalAlignment="Top" Style="{StaticResource BtnStyle}">A</Button>

   4:          <Button Margin="77,120,125,119" Name="button2" Style="{StaticResource BtnStyle}">B</Button>

   5:          <Button Height="23" Margin="77,0,125,67" Name="button3" VerticalAlignment="Bottom" Style="{StaticResource BtnStyle}">C</Button>

   6:   

   7:  </Grid>

StaticResource markup extension - The value of StaticResource is determined at the time of loading.

Final XAML Code

   1:  <Window x:Class="SolStyleinWPF.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="300" Width="300">

   5:      

   6:      <Window.Resources>

   7:          

   8:          <Style x:Key="BtnStyle" TargetType="Button">

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

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

  11:              <Setter Property="BorderBrush" Value="Brown"></Setter>

  12:              <Setter Property="BorderThickness" Value="3"></Setter>

  13:              <Setter Property="Width" Value="75"></Setter>

  14:   

  15:          </Style>

  16:          

  17:      </Window.Resources>  

  18:      

  19:      

  20:      <Grid>

  21:         

  22:          <Button Height="23" Margin="77,68,125,0" Name="button1" VerticalAlignment="Top" Style="{StaticResource BtnStyle}">A</Button>

  23:          <Button Margin="77,120,125,119" Name="button2" Style="{StaticResource BtnStyle}">B</Button>

  24:          <Button Height="23" Margin="77,0,125,67" Name="button3" VerticalAlignment="Bottom" Style="{StaticResource BtnStyle}">C</Button>

  25:          

  26:          

  27:      </Grid>

  28:  </Window>

Run The Project

Use Style in Application Wide
If you want make style used in application wide then open app.xaml file. You can find in solution explorer.

Open the app.xaml file and paste only style element inside the Application.Resources element and remove the style element from window.resources nothing but cut and paste the style.
It is look like this;

   1:  <Application x:Class="SolStyleinWPF.App"

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

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

   4:      StartupUri="Window1.xaml">

   5:      

   6:      <Application.Resources>

   7:   

   8:          <Style x:Key="BtnStyle" TargetType="Button">

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

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

  11:              <Setter Property="BorderBrush" Value="Brown"></Setter>

  12:              <Setter Property="BorderThickness" Value="3"></Setter>

  13:              <Setter Property="Width" Value="75"></Setter>

  14:   

  15:          </Style>

  16:   

  17:      </Application.Resources>

  18:      

  19:  </Application>

Run the Project.

Download
Download Source Code