How To Create And Use Skin Files In WPF

Most of us have experience working with HTML and while working on the layout of the components (in terms of UI), the first thing which comes to our mind is CSS. Well, it works well with the Web Application/pages. But what about Windows applications? We have skin files in WPF. Basically, skin files are nothing but the resource files which help to make a unique layout throughout your WPF Application.

Basic example would be – imagine, you have a Combo Box and button on each screen of a huge project, where the style of these components are different (in terms of height, width, fonts, colors, border, and margins). If your task is to make those things unique, trust me, you are going to have the worst nightmare fixing all these things on each screen, where one has to keep writing the same code over and over on each screen. The fix is to have a skin/resource file, which works like CSS for WPF Application.

Here, are the simple steps to achieve it. For example, I am taking an example of Combo Box.

By default, you should have Project structure like:

You can create a folder named Skins (or Resources/Skins) by right clicking on your project. Once you do that, right click on Skins folder and opt to add new resource dictionary.

Create a dictionary called TestDictionary.xaml .

Here is the content, I am adding between ResourceDictionary tag as style for the all the Combo Boxes I am going to use in my Application (in multiple forms).

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfSkinFiles.Skins">
<Style x:Key="cmbItemStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="Padding" Value="4"/> <Setter Property="FontFamily" Value="Calibri Light"/> <Setter Property="Background" Value="#FFEFE9FD"/> <Setter Property="FontSize" Value="13"/>
</Style>
</ResourceDictionary>

In the code, mentioned above, I am just changing the font details and the background of the Combo Box.

Save this file and open App.xaml file.

Add the reference to above created dictionary file, as shown below:

<Application.Resources>
<ResourceDictionary Source="Skins\TestDictionary.xaml" />
</Application.Resources>

Now, the only task left is to point each of the controls to refer to the newly created style in the skin file.

For example, you can add Combo Box in your MainWindow.xaml file, as shown below and change item container style to the one where we created in the skin file.

<ComboBox x:Name="cmbTest" HorizontalAlignment="Left" Margin="221,91,0,0" VerticalAlignment="Top" Width="120" ItemContainerStyle="{DynamicResource cmbItemStyle}"/>

Once it is done, run your Application – the Combo Box would look as given below:

Not only on MainWindow.xaml but anywhere else in the Application if Combo Box is pointing to the skin file, you should see the same UI for the entire Application. This is a very basic example, using XAML.

Next learning is to change these skin files dynamically, using the code.

Here, is the code, which helps to achieve it.

var rd = new ResourceDictionary();
string pathofskin;
pathofskin = @"Skins\TestDictionary1.xaml";
rd.MergedDictionaries.Add(Application.LoadComponent(new Uri(pathofskin,UriKind.Relative)) as ResourceDictionary);
Application.Current.Resources = rd;

Creating the new object of Resource dictionary and adding all the resource/skin files to the collection (MergedDictionaries) would help Application to point to any of the dictionaries during the execution.

Next step is to just point the correct resource dictionary as per the requirement.

Please let me know, if you have a question or doubts.