Two Ways To Use Style On Controls In WPF Application

There are 2 ways to perform style on a control in WPF application,

1. Using separate style file
2. Add the style on the same page

Now I will show you a demo to access the style on a button using both ways.

Note: In this article I am using Visual Studio 2015.

Step 1 - Create a project named ‘WpfTestApplication’ of WPF application.



Step 2 - It’s a better approach to create the folder named ‘css’ in the project to store the style files.



Step 3 - Add a Resource Dictionary named ‘MyStyle.xaml’ in the css folder.



Step 4 - Add the below code in ResourceDictionary tag, where,

• ‘Key’ is the style’s unique name.
• ‘TargetType’ tells about the target control type.
• In the setter, property means what behavior you want to change.
• In the setter, value means what will be the value of behavior.
  
  1. <Style x:Key="RedGradientBtn" TargetType="Button">
  2. <Setter Property="Control.Foreground" Value="White" />
  3. <Setter Property="Control.Background" Value="Maroon" />
  4. </Style>

Step 5 - Add the code into the auto generated page named ‘MainWindow.xaml’ to access the resource dictionary file which exists in the css folder means MyStyle.xaml file.

After that add a button on the page with some content, height and width including the style like,
Note - In button style, ‘RedGradientBtn’ is the unique key name which I have already defined in the MyStyle.xaml file.



Step 6 - When I run the page, it will look like,



You can also add the style of MyStyle.xaml in the ‘MainWindow.xaml’ page without adding any other file.
The same output will show,