每个 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
。
我想为每个 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
。