ControlTemplate.Triggers Silverlight 3中的WPF等效项

时间:2009-08-08 18:13:38

标签: silverlight triggers vsm

我的WPF应用程序中有这个controltempalte +触发器。

<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>

这在WPF中很酷,对我来说也非常直观,我可以根据上面的触发器来编写它。

当我将其移植到Silverlight(3)时,我被告知我必须使用VSM,状态和组等,因为不支持控件模板上的触发器。 我已经看了一些样本,我甚至试图在上面的触发位置应用某个VSM位,但无法使其工作。

有人向我建议,除了xaml中的VSM,我将不得不处理一些事件等。

SL3型号对我来说很痛苦。请帮忙。

1 个答案:

答案 0 :(得分:11)

Silverlight 3引入了交互触发器,据我所知,你可以做什么,但有点复杂。尽管如此,关于它们的例子很少。

如果您手动执行此操作,则需要引用System.Windows.Interactivity和Microsoft.Expression.Interactions(如果已安装,则该类将位于您的引用选项卡中)。

如果在Blend中添加触发器,则会自动添加这些触发器。这在Silverlight 3中称为“行为”,您可以在“资源”选项卡的“行为”部分的“混合”中找到它们。

他们如何运作的一个例子。注意位于第二个矩形的资源中的故事板,我无法让它在ControlStoryboardAction.Storyboard中工作,但如果我将矩形设为ContentControl并将其放入模板中,它确实有效。这可能是一个错误,或者我错过了一些东西:

<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>

类文件中没有任何内容:

using System.Windows.Controls;

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