Reader Level:
Articles

Triggers in Silverlight

By Mahadesh Mahalingappa on August 10, 2011
In this article we are going to look at how we can create Triggers in Silverlight and what do they offer for us.
  • 0
  • 0
  • 12953
Download Files:
 

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 :

Creating Triggers in Silverlight

Created a new Silverlight Project and named it as SilverlightTriggers .

Add a reference to the Dll Microsoft.Expression.Interactions.dll .

Creating Triggers in Silverlight

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 :

Creating Triggers in Silverlight

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 .

Mahadesh Mahalingappa

I am a C# developer interested in coding in Latest Microsoft Technolgies like Silverlight , WPF and WCF. I am very much interested in advanced concepts like MEF , MVVM, AOP .

COMMENT USING

Trending up