Today we will learn how to apply cool effects to our application making use of Styles and Triggers. In a previous article, I introduced WPF Styles and explained one of its main uses. Please read it if you still haven’t.
Let’s start by creating a new WPF Application project in Visual Studio. We are going to edit some default properties, so our XAML will look like this:
<Window x:Class="TriggersSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Cool effects with styles and triggers" Height="300" Width="400" Background="CadetBlue">
We are going to start from the interesting part in this article. So now, before adding any controls to our application, let’s open App.xaml. We will add the styles that our controls will use.
Let’s start by creating a new style for a title label. This label’s size will be bigger than default and will have an outer glow effect, similar to the text over glass in Windows Vista. The style will be as follows:
<Style x:Key="TitleLabelStyle" TargetType="{x:Type Label}">
<Setter Property="FontSize" Value="24" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="White" GlowSize="7"/>
</Setter.Value>
</Setter>
</Style>
As you can see, styles are pretty straightforward and self-explaining. Notice, however, that for the OuterGlowBitmapEffect we have to explicitly declare its Value since it is a more complex property than, for instance, FontSize.
Let’s now add another style for a label. This time the label will be similar to the default one except for the font size and the glow effect:
<Style x:Key="LabelStyle" TargetType="{x:Type Label}">
<Setter Property="FontSize" Value="14" />
<Setter Property="Height" Value="30" />
<Setter Property="Width" Value="120" />
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="White" GlowSize="5"/>
</Setter.Value>
</Setter>
</Style>
There isn't too much to explain here since it is almost the same style as the title label uses. In a future article I will show you how to “inherit” styles so you don't have to repeat properties for controls of the same type.
Finally, we will add a new style for a textbox. This style will make use of Triggers. This let us change the control’s appearance when a specific event or condition takes place:
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="14" />
<Setter Property="Width" Value="180" />
<Setter Property="Height" Value="30" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Purple" GlowSize="8"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Gold" GlowSize="8"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Notice here the use of Triggers. When the textbox’s IsFocused property is true it will show a purple glow effect; when the IsMouseOver property is true, it will show a gold glow effect. This gives us a wide array of possibilities to play with, getting cool effects as the ones shown in this article.
Now let’s back to our Window1.xaml XAML code. We will now add the controls and their Style properties. Add a StackPanel whose Orientation property is set to Vertical and its Margin property to 10,10,10,10. The rest of controls will be declared inside this StackPanel.
Then add the title label setting its Style property to the one we have previously declared. Add whatever text as its content.
Add a new StackPanel whose Orientation property is set to Horizontal and its margin property to 10,10,10,10. Inside this StackPanel, let’s add a Label and a TextBox control. Set their Style property accordingly.
Now copy and paste the previous StackPanel and its contents so we end up with 3 labels and 3 textboxes. This is not crucial, but this way we can better test the IsFocused and IsMouseOver glow effects with multiple textboxes. The code should look like this:
<StackPanel Orientation="Vertical" Margin="10,10,10,10">
<Label Style="{DynamicResource TitleLabelStyle}">Outer glow text</Label>
<StackPanel Orientation="Horizontal" Margin="10,10,10,10">
<Label Style="{DynamicResource LabelStyle}">Option 1</Label>
<TextBox Style="{DynamicResource TextBoxStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10,10,10,10">
<Label Style="{DynamicResource LabelStyle}">Option 2</Label>
<TextBox Style="{DynamicResource TextBoxStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10,10,10,10">
<Label Style="{DynamicResource LabelStyle}">Option 3</Label>
<TextBox Style="{DynamicResource TextBoxStyle}"/>
</StackPanel>
</StackPanel>
It’s time to run the application. If everything is right, you should be able to test the effects we have just added to our controls using Styles and Triggers. Enjoy!