ControlTemplate.Triggers WPF equivalent in Silverlight 3

Question

Hi,

I have this controltempalte + trigger stuff in my WPF application.

<ControlTemplate TargetType="me:MyControl" x:Key="fade">
    <ContentPresenter - other stuff />
    <ControlTemplate.Triggers>
        <Trigger Property="IsTransitioned" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation -<stuff>- />                                
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

This works cool in WPF, and is very intuitive too for me to write this based on trigger as above.

When i port this to Silverlight (3), i am told i have to use VSM, states and groups etc. since triggers on control template is not supported. I h ave looked at some samples, and i even atempted to apply teh VSM bits in, in the place of trigger as above, but can't get it to work.

Someone suggested to me that apart from VSM in the xaml, i will have to handle some events etc.

SL3 model is just being painful for me. Please help.

Answer 1

Silverlight 3 introduced interaction triggers which as far as I can tell do what you want but are a little more complex. There's very few examples about them out yet though.

If you're doing this manually you need references to System.Windows.Interactivity and Microsoft.Expression.Interactions (from Blend 3, the class will be in your references tab if you've installed it).

If you add the triggers in Blend then it will add those automatically. This is called Behaviours in Silverlight 3 and you will find these in Blend in the Behaviours section of the Assets tab.

An example of how they work. Note the storyboard sitting in the resource of the second rectangle, I couldn't get it to work inside the ControlStoryboardAction.Storyboard, but it did work if I made the rectangle a ContentControl and put it in the Template. This may be a bug or me missing something :

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    x:Class="SLTrigger.MainPage"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions">
  <Grid x:Name="LayoutRoot">
    <StackPanel>
        <Rectangle Margin="5" Fill="Blue" Width="200" Height="100">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ic:ChangePropertyAction PropertyName="Fill" Duration="0">
                        <ic:ChangePropertyAction.Value>
                            <SolidColorBrush Color="Red"/>
                        </ic:ChangePropertyAction.Value>
                    </ic:ChangePropertyAction>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Rectangle>
        <Rectangle Margin="5" x:Name="AnimatedRectangle2" Fill="Blue" Width="200" Height="100">
            <Rectangle.Resources>
                <Storyboard x:Key="AnimationStoryboard">
                    <ColorAnimation 
                        Storyboard.TargetName="AnimatedRectangle2"
                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                        To="Red"
                        AutoReverse="True"
                        Duration="0:0:0.5" />
                </Storyboard>
            </Rectangle.Resources>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <im:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource AnimationStoryboard}">
                        <!--
                        Doesn't work, but does work inside control templates??
                        <im:ControlStoryboardAction.Storyboard>
                            <Storyboard>
                                <ColorAnimation 
                                        Storyboard.TargetName="AnimatedRectangle2"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="Red"
                                        AutoReverse="True"
                                        Duration="0:0:0.5" />
                            </Storyboard>
                        </im:ControlStoryboardAction.Storyboard>
                        -->
                    </im:ControlStoryboardAction>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Rectangle>
        <ContentControl>
            <ContentControl.Template>
                <ControlTemplate>
                    <Rectangle Margin="5" x:Name="AnimatedRectangle3" Fill="Blue" Width="200" Height="100">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <im:ControlStoryboardAction ControlStoryboardOption="Play">
                                    <im:ControlStoryboardAction.Storyboard>
                                        <Storyboard>
                                            <ColorAnimation 
                                                    Storyboard.TargetName="AnimatedRectangle3"
                                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                                    To="Red"
                                                    AutoReverse="True"
                                                    Duration="0:0:0.5" />
                                        </Storyboard>
                                    </im:ControlStoryboardAction.Storyboard>
                                </im:ControlStoryboardAction>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Rectangle>
                </ControlTemplate>
            </ContentControl.Template>
        </ContentControl>
        <TextBlock TextAlignment="Center" Text="Click the rectangles" />
      </StackPanel>
    </Grid>
</UserControl>

The class file has nothing in it:

using System.Windows.Controls;

namespace SLTrigger
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}