Introduction to Styling in Windows Presentation Foundation

Just like Cascading Style Sheets (CSS) is used to create consistency among web pages styling in WPF is used to create consistent look and feel for the windows applications. In this article we are going to introduce the basic concepts behind the styling feature of Windows Presentation Foundation.

Introduction:

Just like Cascading Style Sheets (CSS) is used to create consistency among web pages styling in WPF is used to create consistent look and feel for the windows applications. In this article we are going to introduce the basic concepts behind the styling feature of Windows Presentation Foundation.

Implementation:

We are going to develope a simple registration form which will consists of few TextBoxes. Here is the XAML code to create the interface.

<Grid Background="Beige">
        <Grid.RowDefinitions>
            <RowDefinition Height="121*" />
            <RowDefinition Height="141*" />
        </Grid.RowDefinitions>
        <Grid.Resources>

            <Style x:Key="textBoxStyle" TargetType="{x:Type TextBox}">

                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Background" Value="LightGreen"/>
                    </Trigger>
                </Style.Triggers>



            </Style>

        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="97*" />
            <ColumnDefinition Width="181*" />
        </Grid.ColumnDefinitions>
        <StackPanel Name="stackPanel1" Margin="10,10,10,10" Grid.RowSpan="2">
            <Label Height="28" Name="label1" Width="120">First Name</Label>
            <Label Height="28" Name="label2" Width="120">Middle Name</Label>
            <Label Height="28" Name="label3" Width="120">Last Name</Label>
        </StackPanel>
        <StackPanel Grid.Column="1" Name="stackPanel2" Margin="10,10,10,10" Grid.RowSpan="2">
            <TextBox Style="{StaticResource textBoxStyle}" Height="23" Name="textBox1" Width="120" />
            <TextBox Height="23" Name="textBox2" Width="120" />
            <TextBox Height="23" Name="textBox3" Width="120" />
            <Button Height="23" Name="button1" Width="75" Margin="10">Submit</Button>
        </StackPanel>
    </Grid>

Here is the output of the above XAML.

Pretty simple right!

Now, let’s say that we want to make the Background of all the TextBoxes “Green”. Here is one way to do it.

<TextBox Height="23" Name="textBox2" Width="120" Background="Green" />
            <TextBox Height="23" Name="textBox3" Width="120" Background="Green" />

As, you can see the above code is repetitive. Not only that but if we want to change the Background color to “Blue” then we would have to go through all of the TextBoxes and do that manually.

Introducing Styling:

WPF Styling feature can be used to give consistent look and feel to the WPF controls. The styling code can be placed at one place so making changes will be much easier and faster. Here is the style for the TextBox.

<Grid.Resources>

            <Style x:Key="textBoxStyle" TargetType="{x:Type TextBox}">

    <Setter Property=”Background” Value=”Green”/>

            </Style>

        </Grid.Resources>

Note that we have placed the styling code inside the <Grid.Resources> tag. The Style contains a key which is used to uniquely identify the style. The TargetType attribute represents the elements on which the style can be applied which in this case is the TextBox control. If you try to put “textBoxStyle” on a Button control you will be greeted with a compilation error.

To apply the style on the TextBox you will simply use the following code:

<TextBox Style="{StaticResource textBoxStyle}" Height="23" Name="textBox1" Width="120" />

Here is the output:

Now, if you want to change the color from “Green” to “Blue” you can simply go to one place and change the style.

Style can also contain Triggers. Triggers are fired on many different conditions. Let’s take a look at a trigger which will be fired when the control is focused on.

<Style x:Key="textBoxStyle" TargetType="{x:Type TextBox}">

                <Setter Property="Background" Value="Green"/>

                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Background" Value="LightGreen"/>
                    </Trigger>
                </Style.Triggers>

            </Style>

This trigger is using the dependency property “IsFocused”. Whenever the IsFocused property is true the background color is set to light green.

If you remember we defined out styles inside the <Grid.Resource>. This is OK if you want to use the style only on one form. If you desire to use the style on other forms you can define it inside the App.XAML file.

    <Application.Resources>

         <Style x:Key="textBoxStyle" TargetType="{x:Type TextBox}">

                <Setter Property="Background" Value="Green"/>

                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Background" Value="LightGreen"/>
                    </Trigger>
                </Style.Triggers>


            </Style>


    </Application.Resources>

Now, you can use your styles throughout your application.

Conclusion:

Styling is one of the powerfull features of the WPF framework. It helps to create consistent look and feel for the application. It also helps to easily modify the application when needed.