Saturday, 11 May 2013

Triggers | WPF Tutorial pdf

Triggers are a set of styles that work on a particular condition. You can think Trigger as a part of Style which will be set only when the Condition defined for the Trigger is met.

There are few types of Triggers :
1. Property Trigger : Will be set only when the DependencyProperty of a certain object has been set to a Value.
2. Data Trigger : Will work for any normal Properties using on Binding.
3. Event Trigger : Will work only when some event is triggered from the control.

Now to demonstrate let us look into the code below :
<Style TargetType="{x:Type TextBox}" x:Key="MyTextBoxStyle">
<Setter Property="Text" Value="This is a TextBox with Styles"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="CharacterCasing" Value="Lower"/>
<Setter Property="FlowDirection" Value="RightToLeft"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="UltraBlack"/>
<Setter Property="Width" Value="400"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="0,20,0,10" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="Cyan" Offset="0.0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Red" Offset="1.0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black"/>
</Setter.Value>
</Setter>
<Setter Property="Effect" >
<Setter.Value>
<DropShadowEffect BlurRadius="40" Color="Maroon" Direction="50"
Opacity="0.5"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="40" Color="Red"
Direction="50" Opacity="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="40" Color="Violet"
Direction="50" Opacity="0.9"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="Maroon" />
</MultiTrigger>
</Style.Triggers>
</Style>

Here you can see I have used Property Trigger to change the DropShadowEffect of TextBox when it is focussed. Every WPF control exposes few properties to work with Property Triggers, which will be set to true based on the control appearance changes.
You can use these properties like IsFocused, IsMouseDown etc to work around with Property Triggers.
On the second occasion, I have defined a MultiTrigger. MultiTrigger allows you to mention Condition, so that when all the conditions of the MultiTrigger is met, the Property Setters for the object is applied.
 So you can see when you hover your mouse over the TextBox and your textbox has its focus in it, only then you see the TextBox to appear in Maroon background and Violet DropShadow effect.

No comments: