Conditional trigger actions with WinRTTriggers
WinRTTriggers is a available from the codeplex project site or from nuget.
Sample code for this post can be downloaded here.
The latest update to WinRTTriggers (v1.1.0) includes 2 big changes:
- Multiple actions can be specified against a trigger
- An action can have conditions associated to it
The first point is fairly self explanatory, but the second deserves a bit more elaboration.
Take the situation where on the first use of your application you want to introduce the user to certain features using a storyboard animation. In the view model you might have some flag to indicate “first use”:
1public class SampleViewModel : ViewModelBase
2{
3 private bool isFirstUse;
4
5 public bool IsFirstUse
6 {
7 get { return this.isFirstUse; }
8 set
9 {
10 if (this.isFirstUse != value)
11 {
12 this.isFirstUse = value;
13 this.OnPropertyChanged();
14 }
15 }
16 }
17}
In your page, you include the view model as a resource and databind it to the page:
1<Page
2 x:Class="ConditionalActionSample.MainPage"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:local="using:ConditionalActionSample"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8 mc:Ignorable="d"
9 xmlns:Triggers="using:WinRT.Triggers">
10
11 <Page.Resources>
12 <local:SampleViewModel x:Name="ViewModel">
13 <local:SampleViewModel.IsFirstUse>True</local:SampleViewModel.IsFirstUse>
14 </local:SampleViewModel>
15 </Page.Resources>
16
17 <Page.DataContext>
18 <Binding Source="{StaticResource ViewModel}" />
19 </Page.DataContext>
The content of the page is really simple – just a “magic” button and some introductory text that is initially hidden by setting the opacity to 0:
1 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
2 <Button x:Name="magicButton" Content="Click for magic..." />
3 <Border x:Name="border" Opacity="0" CornerRadius="500" BorderThickness="3" Background="#FF9FB292" BorderBrush="#FF162314" Margin="152,239,-510,239" Padding="20,0,478,0" RenderTransformOrigin="0.5,0.5">
4 <TextBlock FontSize="34.667" TextWrapping="Wrap" Foreground="#FF266C05" TextAlignment="Center" VerticalAlignment="Center" Text="This button is magic. Clicking it performs all sorts of wonderous actions." />
5 </Border>
6 </Grid>
7</Page>
Next up, there’s a storyboard that just flashes the introductory text:
1 <Page.Resources>
2 <local:SampleViewModel x:Name="ViewModel">
3 <local:SampleViewModel.IsFirstUse>True</local:SampleViewModel.IsFirstUse>
4 </local:SampleViewModel>
5 <Storyboard x:Name="FirstLoadStoryboard">
6 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
7 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
8 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1" >
9 <EasingDoubleKeyFrame.EasingFunction>
10 <BounceEase Bounces="1"/>
11 </EasingDoubleKeyFrame.EasingFunction>
12 </EasingDoubleKeyFrame>
13 </DoubleAnimationUsingKeyFrames>
14 </Storyboard>
15 </Page.Resources>
And finally, the bit that ties it all together, the triggers on the page:
1 <Triggers:Interactions.Triggers>
2 <Triggers:EventTrigger EventName="Loaded">
3 <Triggers:ControlStoryboardAction Storyboard="{StaticResource FirstLoadStoryboard}" Action="Start">
4 <Triggers:Condition LeftOperand="{Binding IsFirstUse}" Operator="Equals" RightOperand="True" />
5 </Triggers:ControlStoryboardAction>
6 </Triggers:EventTrigger>
7 </Triggers:Interactions.Triggers>
Notice that the Condition element within the ControlStoryboardAction element instructs that it should only fire when the IsFirstUse property equals “True”.
Running the code in its current state will cause the storyboard to start – if the view model’s IsFirstUse value is changed to False, the storyboard will not be started when the application loads.
This is just one example of how you might use a condition on an action – hopefully you’ll find them useful in many other situations.