Some time ago I started reading this book – Pro WPF 4.5 in C#. As far as it was given to me in order to write some reviews on it, today I have decided to write something about chapter 11. What chapter 11 tells us? Pretty much the chapter is named “Styles and Behaviours” and it explains anything you want to know about styles and behaviours in WPF with C# and even beyond that. In this article I would explain something about styles and Event Triggers in WPF 4.5 and I would not write about behaviours.
So, long story short – what is a style? The book says “A collection of property values that can be applied to an element”. Or with other words, we may say – “I want to define a style called “GreenItalicButton” and whenever I apply it to an element “Button” I get a button with italic name and green background.
What is a trigger? It is better to see it, than to read about it. The book says that triggers are linked to styles through the Style.Trigger collection. Roughly, they are attached to dependency properties and you can create some events by responding to changes in IsFocused, IsMouseOver, IsPRressed properties of the Control Class </end of copy paste from the book>.
Let’s check the example:
We have 3 buttons in a stack panel. Nothing unusual. The interesting part is that we have declared 3 styles in WPF, in order to make our buttons.
Here is the first style:
|
1 2 3 4 5 |
<Style x:Key="BigFontButtonStyle"> <Setter Property="Control.FontFamily" Value="Times New Roman"/> <Setter Property="Control.FontSize" Value="17"/> <Setter Property="Control.FontWeight" Value="Bold"/> </Style> |
What does it do? Actually, nothing, but if you implement it to a button it makes it font “Times New Roman”, its font size 17 and its font value – bold. All the buttons are using this style.
Here is the second style:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}"> <Setter Property="Control.Foreground" Value="White"/> <Setter Property="Control.Background" Value="Green"/> <Style.Triggers> <Trigger Property="Control.IsMouseOver" Value="True"> <Setter Property="Control.Background" Value="Red"/> </Trigger> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="FontSize" To="22" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style> |
This style inherits the first style and it changes the foreground and the background of the button. Furthermore, we have two triggers on it – a normal one and event trigger. The normal one changes the background of the button, once the mouse is over. The event trigger increases the font size of the button to 22 for 2 seconds, once the mouse is over.
The third style looks like this:
|
1 2 3 4 5 6 7 8 9 |
<Style x:Key="ItalicEmphasizedBigFontButtonStyle" BasedOn="{StaticResource EmphasizedBigFontButtonStyle}"> <Setter Property="Control.FontStyle" Value="Italic"/> <Style.Triggers> <Trigger Property="Control.IsFocused" Value="True"> <Setter Property="Control.Foreground" Value="Red"/> </Trigger> </Style.Triggers> </Style> |
It inherits the second one, which inherits the first one. It changes the font style to “Italic”. One more style is added – if you press the button, its font color is changed to red.
Pretty much that is all. Here is the whole WPF code together:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<Window x:Class="BehaviorTest.Menu" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Menu" Height="321" Width="244" > <Window.Resources> <Style x:Key="BigFontButtonStyle"> <Setter Property="Control.FontFamily" Value="Times New Roman"/> <Setter Property="Control.FontSize" Value="17"/> <Setter Property="Control.FontWeight" Value="Bold"/> </Style> <Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}"> <Setter Property="Control.Foreground" Value="White"/> <Setter Property="Control.Background" Value="Green"/> <Style.Triggers> <Trigger Property="Control.IsMouseOver" Value="True"> <Setter Property="Control.Background" Value="Red"/> </Trigger> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="FontSize" To="22" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style> <Style x:Key="ItalicEmphasizedBigFontButtonStyle" BasedOn="{StaticResource EmphasizedBigFontButtonStyle}"> <Setter Property="Control.FontStyle" Value="Italic"/> <Style.Triggers> <Trigger Property="Control.IsFocused" Value="True"> <Setter Property="Control.Foreground" Value="Red"/> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <StackPanel Margin="5" Button.Click="ButtonClick"> <Button Style="{StaticResource BigFontButtonStyle}">PlayMediaTest</Button> <Button Style="{StaticResource EmphasizedBigFontButtonStyle}">FadeInAndOutTest</Button> <Button Style="{StaticResource ItalicEmphasizedBigFontButtonStyle}">DragInCanvasTest</Button> </StackPanel> </Grid> </Window> |
If you want to download the application and see how it works, you may do so here.
Enjoy it!