每个 ListBox.ItemTemplate>DataTemplate 中的不同 WPF 故事板动画

Different WPF Storyboard Animation in each ListBox.ItemTemplate>DataTemplate

我想为每个 ListView 项目设置不同的动画。

<Window.Resources>
    <Storyboard x:Key="myAnimation" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Duration="0:0:2">
            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="/img/image1.png"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:1">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="/img/image2.png"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<ListBox  Name="SessionList" HorizontalContentAlignment="Stretch" >
    <ListBox.ItemTemplate>
        <DataTemplate>
           <Image x:Name="stateimage">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard Storyboard="{StaticResource myAnimation}">
                        </BeginStoryboard>
                    </EventTrigger>
                </Image.Triggers>
            </Image>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

上面的 XAML 代码可以很好地为每个列表项显示相同的动画 myAnimation。但是我如何实现它来显示不同的动画(即我必须在 Window.Resources 中定义几个故事板), 取决于列表项 ViewModel 的绑定 属性

编辑:

对于下面链接的问题,我终于以这种方式解决了。太棒了!

<Window.Resources>
    <Storyboard x:Key="animLOAD" RepeatBehavior="Forever">...</Storyboard>
    <Storyboard x:Key="animPREPARED" RepeatBehavior="Forever">...</Storyboard>
    <Style x:Key="animStyle" TargetType="{x:Type Image}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=st, Mode=OneWay}" Value="LOAD">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource animLOAD}" />
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=st, Mode=OneWay}" Value="PREPARED">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource animPREPARED}" />
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Image Style="{StaticResource animStyle}" /> 

我不确定您的模型对于这种方法的可访问性如何,但您应该能够在某种程度上使用它。 您可以使用一组 DataTriggers,每个都继承一个 Storyboard:

<DataTrigger Binding="{Binding Property}" Value="SomeValue">                                            
    <DataTrigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource Storyboard}"/>
    </DataTrigger.EnterActions>
</DataTrigger>

我会在 ControlTemplate:

中使用它们
<ControlTemplate TargetType="Image">
    <ControlTemplate.Triggers>
        <!-- DataTriggers -->
    </ControlTemplate.Triggers>
</ControlTemplate>

编辑:

This Question 有类似的解决方案,您可能根本不需要 ControlTemplate