动画 XAML 列表框项背景颜色答案

【问题标题】：Animate XAML ListBox Item Background Colour动画 XAML 列表框项背景颜色
【发布时间】：2016-08-22 21:47:54
【问题描述】：

我有以下显示摘要网格的 XAML

<ListBox ItemsSource="{Binding Items}" Margin="336,60,10,63">
    <ListBox.Resources>
        <Style TargetType="{x:Type ListBoxItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="1">
                    <Setter Property="Background" Value="Blue" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="2">
                    <Setter Property="Background" Value="Green" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="4">
                    <Setter Property="Background" Value="Orange" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="8">
                    <Setter Property="Background" Value="Red" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="16">
                    <Setter Property="Background" Value="Gray" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="32">
                    <Setter Property="Background" Value="DarkGray" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Label Content="{Binding DisplayName}" />
                <Label Margin="20,0,0,0" Content="{Binding CurrentState}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid  Columns="4"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

目前ListBox项的BackGround Color是根据Status的值来设置的，当值改变时BackGround颜色会正确改变。

我想做的是随着 State 值的变化从一种颜色动画/过渡到另一种颜色。

我一直在这里搜索并遇到this post，这表明我需要使用

<BeginStoryboard>
    <Storyboard>
        <ColorAnimation Storyboard.TargetName="BackgroundGrid" From="Red" To="Blue" Duration="0:0:4" Storyboard.TargetProperty="Background" />
    </Storyboard>
</BeginStoryboard>

大概在我的<DataTrigger></DataTrigger>里面

问题 1： 我注意到的第一件事是在上面的示例中指定了 From 颜色，但我不知道该项目从什么颜色过渡

问题 2： 看来<BeginStoryBoard></BeginStoryBoard> 在<DataTrigger></DataTrigger> 中的语法无效

您可能会说这是我第一次使用 XAML 动画，因此非常感谢任何帮助。

【问题讨论】：

不确定如何处理问题 2，但问题 1 很简单：只是不要包含动画的 From 部分。只有To 才能正常工作。
见How to: Trigger an Animation When Data Changes

标签： wpf xaml

【解决方案1】：

对于@Stewbob 提到的第一个问题，不要在动画中包含From 部分，它可以正常工作。您可以通过在 DataTrigger 上定义 Enter 和 Exit Action 来解决第二个问题，如下所示：

                    <DataTrigger Binding="" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation> //your color animation </ColorAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                             <ColorAnimation> <ColorAnimation />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>

这里要注意的一点是，EnterActions 和 ExitActions 会永久设置值，而简单的 Setter 只会设置临时值，只要在触发器中满足属性条件，就会应用这些临时值。

【讨论】：