C# – WPF – Changing styles in WPF (Setter Property usage / Style declaration in XAML)

Posted on January 29, 2014 by

With the current post I will present a simple application, which changes styles of buttons within WPF, based on our selection. In order to change the styles of the design, we define both styles as variables in the XAML code. Thus, our XAML (the content of MainWindow.xaml) looks like this:

<Window x:Class="StylesBenannt.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StylesBenannt" Height="200" Width="300">
    <Window.Resources>
        <Style x:Key="styleA">
            <Setter Property="Control.FontSize" Value="18" />
            <Setter Property="Control.FontFamily" Value="Courier New" />
            <Setter Property="Control.Background" Value="Green" />
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="TextBox.TextAlignment" Value="Right" />
            <Setter Property="Control.Margin" Value="1" />
            <Setter Property="Control.Width" Value="190"> 
            </Setter>

        </Style>
        <Style x:Key="styleB">
            <Setter Property="Control.FontSize" Value="14" />
            <Setter Property="Control.FontFamily" Value="Tahoma" />
            <Setter Property="Control.Background" Value="White" />
            <Setter Property="Control.Foreground" Value="Green" />
            <Setter Property="TextBox.TextAlignment" Value="Center" />
            <Setter Property="Control.Margin" Value="2" />
            <Setter Property="Control.Width" Value="210" />
        </Style>
    </Window.Resources>
    <StackPanel>

        <Button x:Name="bu" Style="{StaticResource styleA}">Style A</Button>
        <CheckBox x:Name="cb" Style="{StaticResource styleA}" FontSize="10" FontWeight="Bold">style A</CheckBox>
        <Button>Independent Button</Button>
        <TextBox x:Name="tb" Style="{StaticResource styleA}">Style B</TextBox>
        <Separator x:Name="sp" Style="{StaticResource styleA}" />
        <GroupBox Header="Change Styles" Margin="0,10,0,0">
            <StackPanel>
                <RadioButton IsChecked="True" Checked="rb1_Checked">styleA</RadioButton>
                <RadioButton Checked="rb2_Checked">styleB</RadioButton>
            </StackPanel>
        </GroupBox>
    </StackPanel>
</Window>

<Window x:Class="StylesBenannt.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="StylesBenannt" Height="200" Width="300">

<Window.Resources>

</Setter>

</Style>

</Style>

</Window.Resources>

<Button x:Name="bu" Style="{StaticResource styleA}">Style A</Button>

<CheckBox x:Name="cb" Style="{StaticResource styleA}" FontSize="10" FontWeight="Bold">style A</CheckBox>

<Button>Independent Button</Button>

<TextBox x:Name="tb" Style="{StaticResource styleA}">Style B</TextBox>

<RadioButton IsChecked="True" Checked="rb1_Checked">styleA</RadioButton>

<RadioButton Checked="rb2_Checked">styleB</RadioButton>

</StackPanel>

</GroupBox>

</StackPanel>

</Window>

This code can be divided into two main parts – the part, declared between the tags <Window.Resources></> and the part, declared in the <StackPanel></> part.

In the first part, we declare two styles, which would be later assigned to the controls. The first style has green background of the control and the second style – white background. In the second part we create the following controls:

button (named bu)
checkbox (named cb)
independent button (w/o name, because we do not need to access it)
textbox (named tb)
separator (named sp)

At the end we embed a stack panel in the current one, containing two radio buttons, used to run our application. The default button runs the C# method (rb1_Checked) and the button with text “styleB” runs rb2_Checked.

So, after we run the application, we get the following two options:

How does it work? The secret is in the C# code 🙂 here:

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;

namespace StylesBenannt
{
    /// <summary>
    /// Logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void rb1_Checked(object sender, RoutedEventArgs e)
        {
            Style st = FindResource("styleA") as Style;
            bu.Style = st;
            cb.Style = st;
            tb.Style = st;
            sp.Style = st;

            bu.Content = "StyleA";
            cb.Content = "StyleA";
            tb.Text = "StyleA";
        }

        private void rb2_Checked(object sender, RoutedEventArgs e)
        {
            Style st = FindResource("styleB") as Style;
            bu.Style = st;
            cb.Style = st;
            tb.Style = st;
            sp.Style = st;

            bu.Content = "styleB";
            cb.Content = "styleB";
            tb.Text = "styleB";
        }
    }
}

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;

namespace StylesBenannt

{

/// <summary>

/// Logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void rb1_Checked(object sender, RoutedEventArgs e)

{

Style st = FindResource("styleA") as Style;

bu.Style = st;

cb.Style = st;

tb.Style = st;

sp.Style = st;

bu.Content = "StyleA";

cb.Content = "StyleA";

tb.Text = "StyleA";

}

private void rb2_Checked(object sender, RoutedEventArgs e)

{

Style st = FindResource("styleB") as Style;

bu.Style = st;

cb.Style = st;

tb.Style = st;

sp.Style = st;

bu.Content = "styleB";

cb.Content = "styleB";

tb.Text = "styleB";

}

What does it do? The needed “InitializeComponent” is a must in the MainWindow() method. The rest are the methods, run upon a change of the radio buttons. A good example for programming code is the following line:

            Style st = FindResource("styleA") as Style;

1	Style st = FindResource("styleA") as Style;

It tells to the compiler, to find a style resource named “styleA” somewhere in the program and to assign it to the variable “st” from type Style. Then with the naming of the buttons, which was created in XAML, we access them in C# and we give them the resource, which we just found. Wonderful, eh? 🙂

If you want to try this out, you may download this application from here.

Anyway, I would advise you to create it by yourself, as far as you have the complete code.

Enjoy it!