Just like CSS for web applications WPF includes the Styling feature which can be used to give consistent look and feel for your controls. Let’s take a look at a simple example. Here is the XAML code which will create the simple interface with 3 Labels and 3 TextBoxes.
<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 I want to change the Background color to “Blue” then I would have to go to each and every TextBox and do it manually.
Let’s introduce WPF styling which will help us to quickly modify the properties of the controls.
<Grid.Resources>
<Style x:Key="textBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property=”Background” Value=”Green”/>
</Style>
</Grid.Resources>
I 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 attributes represents the elements on which the style can be applied which in this case is the TextBox control. If you try to put “textBoxStyle” to 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.
<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 us 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.