Triggers in Silverlight

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 .