Post
Ask Question

Styling In WPF

Introduction 

 
Let's be honest, the more attractive the UI, the more satisfactory the user experience will be.
 
The concept of styles in WPF is exactly the same as CSS in web development. Styles are used for formatting purposes.
 
They make the UI look more attractive and user-friendly, giving rich looks to the controls.

We can define styles in App.xaml or ResourceDictionaries to reuse them across the application.
 
Inside a control itself, if the usage scope is single control.

There are 3 ways to define a style:
  1. In ResourceDictionaries to use application-wide you need to define the x:Key so that caller can access style using that key as a resource.
  2. In Window.Resources to use them across that screen you need to define x:Key 
  3. Inside a control, itself, applied only on that control: No Need to define x:Key, as style is already defined inside a control which supposes to be styled.
Create a WPF project & add a Resource Dictionary inside your project.
 
Inside a ResourceDictionaries: define a style for a Button, Notice that it is based on control Button and its TargetType is also Button. then add a list of setters, each with Property and Value pair.
  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:A">    
  4.     <Thickness x:Key="MarrginTop">0 30 0 0</Thickness>    
  5.     <Style x:Key="SubmitButtonStyle"    
  6.            BasedOn="{StaticResource {x:Type Button}}"    
  7.            TargetType="Button">    
  8.             <Setter Property="Height" Value="20"/>    
  9.             <Setter Property="Width" Value="100"/>    
  10.             <Setter Property="HorizontalAlignment" Value="Center"/>    
  11.             <Setter Property="VerticalAlignment" Value="Center"/>    
  12.             <Setter Property="Content" Value="Submit"/>    
  13.             <Setter Property="BorderBrush" Value="Black"/>    
  14.             <Setter Property="BorderThickness" Value="2"/>    
  15.             <Setter Property="BorderThickness" Value="2"/>    
  16.             <Setter Property="Margin" Value="{StaticResource MarrginTop}"/>    
  17.     </Style>    
  18. </ResourceDictionary>    
Go to MainWindow.xaml and apply created style there! Use style with Style="{StaticResource SubmitButtonStyle}" 
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="180" Width="300">    
  9.     <Window.Resources>    
  10.         <ResourceDictionary>    
  11.             <ResourceDictionary.MergedDictionaries>    
  12.                 <ResourceDictionary Source="ResourceDictionaryTemplate.xaml"/>    
  13.             </ResourceDictionary.MergedDictionaries>    
  14.         </ResourceDictionary>    
  15.     </Window.Resources>    
  16.     <Grid x:Name="MainGrid">    
  17.         <Button x:Name="ButtonStyleMe"    
  18.          Style="{StaticResource SubmitButtonStyle}"/>    
  19.     </Grid>    
  20. </Window>    
While defining a style in Window.Resources, let's create a style for TextBox where we can read user input.
  1. <Window.Resources>    
  2.         <ResourceDictionary>    
  3.             <ResourceDictionary.MergedDictionaries>    
  4.                 <ResourceDictionary Source="ResourceDictionaryTemplate.xaml"/>    
  5.             </ResourceDictionary.MergedDictionaries>    
  6.             <Style x:Key="TextboxUserInputStyle"    
  7.            BasedOn="{StaticResource {x:Type TextBox}}"    
  8.            TargetType="TextBox">    
  9.                 <Setter Property="Height" Value="20"/>    
  10.                 <Setter Property="Width" Value="200"/>    
  11.                 <Setter Property="HorizontalAlignment" Value="Center"/>    
  12.                 <Setter Property="VerticalAlignment" Value="Top"/>    
  13.                 <Setter Property="BorderBrush" Value="Black"/>    
  14.                 <Setter Property="BorderThickness" Value="2"/>    
  15.                 <Setter Property="Margin" Value="0 50 0 0"/>    
  16.             </Style>    
  17.         </ResourceDictionary>    
  18. </Window.Resources>    
Add TextBox where style can be applied.
  1. <TextBox x:Name="TextBoxUserInput"    
  2.                 Style="{StaticResource TextboxUserInputStyle}"/>    
Last but not least... Inside the control itself let's add a TextBlock which will display whatever user enters in the TextBox. 
  1.  <TextBlock x:Name="TextBlockShowUserDetails" Text="{Binding ElementName=TextBoxUserInput, Path=Text}">    
  2.             <TextBlock.Style>    
  3.                 <Style BasedOn="{StaticResource {x:Type TextBlock}}"    
  4.                     TargetType="TextBlock">    
  5.                     <Setter Property="FontFamily" Value="Baskerville,Georgia"/>    
  6.                     <Setter Property="FontStyle" Value="Italic"/>    
  7.                     <Setter Property="FontWeight" Value="DemiBold"/>    
  8.                     <Setter Property="Height" Value="20"/>    
  9.                     <Setter Property="Width" Value="200"/>    
  10.                     <Setter Property="HorizontalAlignment" Value="Center"/>    
  11.                     <Setter Property="VerticalAlignment" Value="Center"/>    
  12.                     <Setter Property="Margin" Value="0 100 0 0"/>    
  13.                     </Style>    
  14.             </TextBlock.Style>    
  15. </TextBlock>    
Now, your final MainWindow.xaml will look something like this:
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="180" Width="300">    
  9.     <Window.Resources>    
  10.         <ResourceDictionary>    
  11.             <ResourceDictionary.MergedDictionaries>    
  12.                 <ResourceDictionary Source="ResourceDictionaryTemplate.xaml"/>    
  13.             </ResourceDictionary.MergedDictionaries>    
  14.             <Style x:Key="TextboxUserInputStyle"    
  15.            BasedOn="{StaticResource {x:Type TextBox}}"    
  16.            TargetType="TextBox">    
  17.                 <Setter Property="Height" Value="20"/>    
  18.                 <Setter Property="Width" Value="200"/>    
  19.                 <Setter Property="HorizontalAlignment" Value="Center"/>    
  20.                 <Setter Property="VerticalAlignment" Value="Top"/>    
  21.                 <Setter Property="BorderBrush" Value="Black"/>    
  22.                 <Setter Property="BorderThickness" Value="2"/>    
  23.                 <Setter Property="Margin" Value="0 50 0 0"/>    
  24.             </Style>    
  25.         </ResourceDictionary>    
  26.     </Window.Resources>    
  27.     <Grid x:Name="MainGrid">    
  28.         <TextBox x:Name="TextBoxUserInput"    
  29.                  Style="{StaticResource TextboxUserInputStyle}"/>    
  30.         <Button x:Name="ButtonStyleMe"    
  31.                 Style="{StaticResource SubmitButtonStyle}"/>    
  32.         <TextBlock x:Name="TextBlockShowUserDetails" Text="{Binding ElementName=TextBoxUserInput, Path=Text}">    
  33.             <TextBlock.Style>    
  34.                 <Style BasedOn="{StaticResource {x:Type TextBlock}}"    
  35.                     TargetType="TextBlock">    
  36.                     <Setter Property="FontFamily" Value="Baskerville,Georgia"/>    
  37.                     <Setter Property="FontStyle" Value="Italic"/>    
  38.                     <Setter Property="FontWeight" Value="DemiBold"/>    
  39.                     <Setter Property="Height" Value="20"/>    
  40.                     <Setter Property="Width" Value="200"/>    
  41.                     <Setter Property="HorizontalAlignment" Value="Center"/>    
  42.                     <Setter Property="VerticalAlignment" Value="Center"/>    
  43.                     <Setter Property="Margin" Value="0 100 0 0"/>    
  44.                     </Style>    
  45.             </TextBlock.Style>    
  46.         </TextBlock>    
  47.     </Grid>    
  48. </Window>    
Styling In WPF
 
Now run your WPF application and see Styles are applied on each control as expected.
 
I hope this article has cleared the confusion you might have had about styling in WPF.

Feel free to apply them to your project to understand how they work.

Thank you for visiting this article.

If you have any doubts, you can connect with me @
Happy Coding!


Similar Articles