In this article we are going to look at how we can create Triggers in
Silverlight and what do they offer for us.
First Step:
Install Blend 4 SDK from the Microsoft Site.
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=3062
The Dll we require to implement the triggers is
Microsoft.Expression.Interactions.dll.
Please find the screenshot below :
Created a new Silverlight Project and named it as SilverlightTriggers .
Add a reference to the Dll Microsoft.Expression.Interactions.dll .
Lets create a simple trigger to animate the border of the Button .
No code Behind is required . All the work has to be done on the Xaml .
Lets go one step at a time .
Add a Button to the Grid .
<Grid
x:Name="LayoutRoot"
Background="White">
<Button
Content="Button"
Height="87"
HorizontalAlignment="Left"
Margin="219,113,0,0"
Name="Btn"
VerticalAlignment="Top"
Width="148">
</Button>
</Grid>
Add the namespaces to the Button Tag .
<Grid
x:Name="LayoutRoot"
Background="White">
<Button
xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:interactions="http://schemas.microsoft.com/expression/2010/interactions"
Content="Button"
Height="87"
HorizontalAlignment="Left"
Margin="219,113,0,0"
Name="Btn"
VerticalAlignment="Top"
Width="148">
</Button>
</Grid>
Add the StoryBoard in the Resource Tag of the Button .
<Grid
x:Name="LayoutRoot"
Background="White">
<Button
xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:interactions="http://schemas.microsoft.com/expression/2010/interactions"
Content="Button"
Height="87"
HorizontalAlignment="Left"
Margin="219,113,0,0"
Name="Btn"
VerticalAlignment="Top"
Width="148">
<Button.Resources>
<Storyboard
x:Key="Story"
Duration="200"
Storyboard.TargetName="Btn"
Storyboard.TargetProperty="BorderBrush">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame
KeyTime="0:0:0.1"
Value="Yellow"
/>
<DiscreteObjectKeyFrame
KeyTime="0:0:0.2"
Value="{x:Null}"
/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Button.Resources>
</Button>
</Grid>
Finally Add the Trigger . I have added a Simple Trigger which performs the play
operation on the storyboard .
<Grid
x:Name="LayoutRoot"
Background="White">
<Button
xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:interactions="http://schemas.microsoft.com/expression/2010/interactions"
Content="Button"
Height="87"
HorizontalAlignment="Left"
Margin="219,113,0,0"
Name="Btn"
VerticalAlignment="Top"
Width="148">
<Button.Resources>
<Storyboard
x:Key="Story"
Duration="200"
Storyboard.TargetName="Btn"
Storyboard.TargetProperty="BorderBrush">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame
KeyTime="0:0:0.1"
Value="Yellow"
/>
<DiscreteObjectKeyFrame
KeyTime="0:0:0.2"
Value="{x:Null}"
/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Button.Resources>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger
EventName="Click">
<interactions:ControlStoryboardAction
Storyboard="{StaticResource
Story}"
ControlStoryboardOption="Play"
/>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</Button>
</Grid>
Output
The Button is displayed as shown below :
Click on it and you can see it animate . Well you can animate it differently by
changing the storyboard . This is just a illustration . Happy Coding .