Question

我有一个带有模板化listboxitem的列表框，它被绑定到一个对象。其中一个listboxitem控件是一个图像，它的源也绑定到datacontext中的属性，因此Image控件中的图像根据该属性而不同。我想为图像设置动画，但仅限于特定的图像（当绑定属性值仅为某个特定值时）。我想还有其他方法可以做到这一点，也许还可以使用代码。但我真的很喜欢在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>

Answer 1

动画无法更改不存在的属性路径的属性值。您尝试操作的“图像”没有“旋转变换”，您应该添加它并且它应该有效：

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

WPF如何使用数据触发器为listboxitem内的图片制作动画？

1 个答案: