How to apply different skins to WPF applications?
Are you new to WPF development? In WPF, you can replace resources, styles at runtime. It is the added advantage for developer. You can completely change the face of UI by using skins. I hope this article will be useful for you.
Description : Based on our choice we can load different skins to different controls in WPF application. To make better look and feel, you can apply different skins and check which one is best suited for your application.
Add MainWindow.xaml and add following code in MainWindow.xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<Label>Choose Skin</Label>
<ComboBox DockPanel.Dock="Top" HorizontalAlignment="Right" Width="150" SelectionChanged="ComboBox_SelectionChanged"
x:Name="ComboBoxStyle">
<ComboBoxItem>First Style with Yellow color</ComboBoxItem>
<ComboBoxItem>Second Style with Blue color</ComboBoxItem>
</ComboBox>
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Hi Tom" Style="{DynamicResource First_control_style}"/>
<Label Content="Hi Mery" Style="{DynamicResource Second_control_style}"/>
<Button Content="Submit" Style="{DynamicResource Third_control_style}"/>
</StackPanel>
</Grid>
</DockPanel>
</Window>
Add following code in MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;
using System.Windows.Markup;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var selected = ((ComboBox)sender).SelectedItem as ComboBoxItem;
var data = selected.Content.ToString();
switch (data)
{
case "First Style with Yellow color":
//You need to provide full file path of First_Yellow.xaml
ChooseSkinColor("First_Yellow.xaml");
break;
case "Second Style with Blue color":
//You need to provide full file path of Second_Blue.xaml
ChooseSkinColor("Second_Blue.xaml");
break;
}
}
private static void ChooseSkinColor(string nameoffile)
{
ResourceDictionary readdic = null;
using (FileStream userfs = new FileStream(nameoffile, FileMode.Open, FileAccess.Read))
{
readdic = XamlReader.Load(userfs) as ResourceDictionary;
}
Application.Current.Resources = readdic;
}
}
}
Add following code in App.xaml
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="TextBlock" x:Key="First_control_style"/>
<Style TargetType="Label" x:Key="Second_control_style"/>
<Style TargetType="Button" x:Key="Third_control_style"/>
</Application.Resources>
</Application>
Add following code in First_Yellow.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="TextBlock" x:Key="First_control_style">
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="FontSize" Value="12"/>
</Style>
<Style TargetType="Label" x:Key="Second_control_style">
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="Background" Value="Blue"/>
<Setter Property="FontSize" Value="12"/>
</Style>
<Style TargetType="Button" x:Key="Third_control_style">
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="FontSize" Value="12"/>
</Style>
</ResourceDictionary>
Add following code in Second_Blue.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="TextBlock" x:Key="First_control_style">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style TargetType="Label" x:Key="Second_control_style">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style TargetType="Button" x:Key="Third_control_style">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="FontSize" Value="14"/>
</Style>
</ResourceDictionary>
Please remove Second_Blue.xaml.cs and First_Yellow.xaml.cs as those files are not required.