Geek Answers Handbook

ControlTemplate.Triggers WPF equivalent in Silverlight 3

I have this controltempalte + trigger element 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 fine in WPF and is very intuitive for me to write this based on the trigger as above.

When I port this to Silverlight (3), they tell me that I need to use VSM, states and groups, etc., since triggers on the control pattern are not supported. I looked at some samples, and even tried to apply the VSM bits at the launch location, as mentioned above, but I can't get it to work.

Someone suggested to me that besides VSM in xaml I will have to handle some events, etc.

The SL3 is just painful for me. Please, help.

+4
source share
1 answer

Silverlight 3 introduced interaction triggers that, as far as I can tell, do what you want, but a little more complicated. However, there are very few examples.

If you do this manually, you need links to System.Windows.Interactivity and Microsoft.Expression.Interactions (from Blend 3, the class will be in the links tab if you installed it).

If you add triggers to Blend, it will automatically add them. This is called Behaviors in Silverlight 3, and you will find them in Blend under the Behaviors section of the Assets tab.

An example of how they work. Pay attention to the storyboard sitting in the resource of the second rectangle, I could not get it to work inside the ControlStoryboardAction.Storyboard, but it worked if I made a ContentControl rectangle and placed it in the template. It may be a mistake, or I'm 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>

There is nothing in the class file:

 using System.Windows.Controls; namespace SLTrigger { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } } }
+11
source

More articles:


All Articles