Description
Triggers are of three types.
- Property triggers
- Data triggers
- Event Triggers
Description
- Property trigger is most commonly used Trigger.
- It is represented as <Trigger> in XAML Source.
- Using this trigger, required values can be set.
Example
In this example, only Textblock control is used.
Create a new window, go to XMAL Source and write the following code:
[csharp]<Window x:Class="WPFTriggers.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | PropertyTrigger" Height="350" Width="525">
<Grid>
<TextBlock Text="Hello, SPlessons!!!" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Blue"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Window>
[/csharp]
Now run the applicatiuon.The output appears as below.
When above window is seen and mouse is moved over the text, then the text color becomes black and gets underlined under the text like below.
Description
- Data Triggers are represented by <Data Trigger>.
- It works by binding the elements.
Example
In this example,one Textblock control, One Stack Panel, and One Radiobutton are used.
Create a new window, go to XMAL Source and write the following code:
[csharp]<Window x:Class="WPFTriggers.DataTriggers" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | DataTriggers" Height="300" Width="300" Background="Bisque">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Background="LightPink" Height="100" Width="120">
<RadioButton Name="Dttest" Content="Hello SPlessons" Background="Beige" FontStyle="Italic"></RadioButton>
<TextBlock HorizontalAlignment="Center" Margin="10" FontSize="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="No" />
<Setter Property="Foreground" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Dttest, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes" />
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Grid>
</Window>
[/csharp]
Now run the applicatiuon.The output appears as below.
When checked on Radiobutton control in above window then "No" will become "YES" and text color changed to Red to Green like below.
Description
- It is represented as <Event Trigger> in XAML Source like .
- Event Triggers are mostly used in Animation part.
Example
In this example, one Textblock control and two events MouseEnter, MouseLeave are used.
Create a new window, go to XMAL Source and write the following code:
[csharp]<Window x:Class="WPFTriggers.EvntTriggers" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | EventTriggers" Height="300" Width="300" Background="GhostWhite">
<Grid>
<TextBlock Name="tbStyled" Text="Hello, SPlessons!" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Pink">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.10" Storyboard.TargetProperty="FontSize" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Window>
[/csharp]
Now run the application.The output appears as below.
Mouse Over on the text in above window. Then the text become bigger like below.
If mouse is moved away from the text, then the text will come to normal position like below.