WPF 如何使用数据触发器对列表框项内的图片进行动画处理

本文关键字：处理 动画 数据 何使用 触发器 列表 WPF | 更新日期: 2023-09-27 18:32:10

我有一个列表框，其中包含绑定到对象的模板化列表框项。其中一个 ListBoxItem 控件是图像，它的源也绑定到 DataContext 中的属性，因此 Image 控件内的 pictur 根据该属性是不同的。我想对图像进行动画处理，但只能对图像进行动画处理（当绑定的属性值仅为某个特定值时）。我想还有其他方法可以做到这一点，也许使用隐藏的代码。但我真的很想在 xaml 代码中使用它，所以我认为在 DataTrigger 中使用动画对我来说很有意义，因为动画的开始/结束取决于 DataContext：

                    <DataTrigger Binding="{Binding Path=Value.SomeProperty}"
                                  Value="SomePropertyValue">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetName="SomePropertyIcon">
                                    <StaticResource ResourceKey="SomePropertyValueAnimation"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard TargetName="SomePropertyIcon">
                                    <StaticResource ResourceKey="StopSomePropertyValueAnimation"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>

但我不能以任何方式让它工作。我试图将该代码放入listBox的样式中，然后将该样式应用于图像，它不起作用，我还尝试放入listBox.ItemTamplate和其他地方，但没有任何帮助。这是代码。也许它可以帮助理解（我在这里只粘贴了相关代码）：

<UserControl ...>
<UserControl.Resources>
    <local:SomePropertyToImageConverter x:Key="somePropertyToImageConverter"/>
    <DoubleAnimation x:Key="SomePropertyValueAnimation"  Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" To="45"  Duration="0:0:2" RepeatBehavior="Forever"/>
    <DoubleAnimation x:Key="StopSomePropertyValueAnimation" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"   To="0" Duration="0:0:2"/>
</UserControl.Resources>
<Grid>
    <ListBox Name="myListBox" 
        ItemsSource="{Binding Path=myDataContext}" IsEnabled="True" Focusable="True" SelectionMode="Extended">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Width="20" Height="20" Name="SomePropertyIcon"
                    Source="{Binding Path=Value.SomeProperty, Converter={StaticResource somePropertyToImageConverter}}"/>
                </Grid>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=Value.SomeProperty}"
                                  Value="SomePropertyValue">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetName="SomePropertyIcon">
                                    <StaticResource ResourceKey="SomePropertyValueAnimation"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard TargetName="SomePropertyIcon">
                                    <StaticResource ResourceKey="StopSomePropertyValueAnimation"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=Value.SomeProperty}"
                                  Value="SomePropertyValue">                            
                        <Setter Property="Background" Value="Bisque"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>
</Grid>

WPF 如何使用数据触发器对列表框项内的图片进行动画处理

动画无法更改不存在的属性路径的属性值。您尝试操作的"图像"没有"旋转转换"，您应该添加它，它应该可以工作：

    <Image Width="20" Height="20" Name="SomePropertyIcon"
           Source="{Binding Path=Value.SomeProperty, Converter={StaticResource somePropertyToImageConverter}}">
        <Image.RenderTransform >
            <RotateTransform />
        </Image.RenderTransform>
    </Image>
相关文章：