How to Create Custom Theme for WPF?

Perhaps the most basic thing we need to know when designing an interface with wpf is how to make a custom design.It's easy to design interfaces with XAML, which is a great feature that WPF provides. It already looks a lot like HTML in usage. Since it is similar to the use of HTML, the use of this style is also quite similar. Of course, a theme from scratch is not an easy task, so it is recommended to use ready-made themes in most places. But in this article, I basically wanted to create a content that gives an idea about how we can make a special theme for the WPF application.

First of all, there are three important things we need to know. These are as follows:

• Window Resources: Let's think about our MainWindow.xaml file. We want to type styles just for this .xaml file. To do this we need to use <Windows.Resources> in this MainWindow.xaml file, and after that we can set styles for each controls. But We can not use this styles the other views in the project. This is just for local usage. We cannot reach this style as global.
• Application Resources: If you have noticed, there is another file called app.xaml in our project. In this file, you will see <Applications.Resources> tag. We can set styles for controls in this tag. But unlike Window.Resources, the styles in this tag are global. So we can access it from all interface files in the project.
• Resource Dictionaries: We can say that this is the most user-friendly usage method. We can create our styles in this file and then import this file into our application via app.xaml.

I actually mentioned three different uses above. Even though the usage methods are different, the styling process we will do is always the same. That's why I'm going to explain through Resource Dictionary. 

I created a folder named Resources in the project directory. In this folder, I create a xaml file of type Resource Dictionary. You can name this file whatever you want.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <!-- empty resource-->

</ResourceDictionary>

I wrote a style for the button like this:

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Style TargetType="Button" x:Key="Special">
        <Setter Property="Background" Value="Yellow" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="Padding" Value="10" />
    </Style>

</ResourceDictionary>

It's time to link this file to the project. In the App.xaml file, we link our style file as follows:

<Application x:Class="Example.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-Example"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary Source="Resources/MyResource.xaml" />
    </Application.Resources>
</Application>

Now we can use this style in the ui. I go to MainWindow.xaml:

	...

	<StackPanel Grid.Row="2">
            <Button x:Name="button1" Content="test button" Style="{StaticResource Special}" />
            <TextBlock>test</TextBlock>
        </StackPanel> 
    </Grid>
</Window>

After using the style as above, let's run the project. The output is that we got: