当更改绑定属性的值时，如何为文本块的背景添加动画效果？

Question

我有一个相当简单的wpftoolkit：datagrid，用于显示股票市场的买入和卖出。 我的网格绑定到一个ObservableCollection。我的PriceViewModel实现了INotifyPropertyChanged。

网格正确更新，我已经成功让背景颜色动画化，但它在应用动画时是间歇性的。

以下是XAML和视图模型类的代码片段。

想法很简单，只要在价格更新低于以前时将其着色为红色，在更高时将其着色为绿色...没有太多花哨的东西。

     <WpfToolkit:DataGrid Name="PriceDataGrid" RowHeaderWidth="5" 
AutoGenerateColumns="False" VerticalContentAlignment="Center" Margin="0,33,0,0" HorizontalAlignment="Left" Width="868">
        <WpfToolkit:DataGrid.Columns>
            <WpfToolkit:DataGridTemplateColumn Header="Bid"  MinWidth="40">
                <WpfToolkit:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Bid}" Margin="3,1" x:Name="txtTextBlock">
                            <TextBlock.Background>
                                <SolidColorBrush Color="Transparent"></SolidColorBrush>
                            </TextBlock.Background>
                        </TextBlock>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding BidUp}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation 
                                                BeginTime="00:00:00"
                                                Duration="0:0:0.1" 
                                                To="Green" 
                                                AutoReverse="True"
                                                Storyboard.TargetName="txtTextBlock" 
                                                Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding BidDown}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation 
                                                BeginTime="00:00:00"
                                                Duration="0:0:0.1" 
                                                To="Red" 
                                                AutoReverse="True"
                                                Storyboard.TargetName="txtTextBlock" 
                                                Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </WpfToolkit:DataGridTemplateColumn.CellTemplate>
            </WpfToolkit:DataGridTemplateColumn>
            <WpfToolkit:DataGridTextColumn Header="Ask" Binding="{Binding Path=Ask}" MinWidth="40" />
        </WpfToolkit:DataGrid.Columns>
    </WpfToolkit:DataGrid>

还有视图模型：

public class PriceViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    Price _price;

    private bool _bidUp = false;
    private bool _bidDown = false;


    public bool BidUp
    {
        get
        {
            return _bidUp;
        }

        set
        {
            _bidUp = value;
            OnPropertyChanged("BidUp");
        }
    }
    public bool BidDown
    {
        get
        {
            return _bidDown;
        }

        set
        {
            _bidDown = value;
            OnPropertyChanged("BidDown");
        }
    }

    public double Bid 
    { 
        get { return _price.Bid; }
        set
        {
            BidUp = (value > _price.Bid);
            BidDown = (value < _price.Bid);

            _price.Bid = value; 
            OnPropertyChanged("Bid");
        } 
    }

    public double Ask 
    { 
        get { return _price.Ask; } 
        set 
        {
            AskUp = (value > _price.Ask);
            _price.Ask = value; 
            OnPropertyChanged("Ask"); 
        } 
    }


    public PriceViewModel(Price price)
    {
        _price = price;
    }

    private void OnPropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

}

- MattC

Answer 1

我尝试过这种方法，如果在启动新的Storyboard之前停止旧的Storyboard，效果会更好。要停止一个Storyboard，需要给它命名并调用相应的函数。

<StopStoryboard BeginStoryboardName="bidUpStoryboard"/>

尝试像这样

<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding BidUp}" Value="True">
        <DataTrigger.EnterActions>
            <StopStoryboard BeginStoryboardName="bidUpStoryboard"/>
            <StopStoryboard BeginStoryboardName="bidDownStoryboard"/>
            <BeginStoryboard Name="bidUpStoryboard">
                <Storyboard BeginTime="00:00:00">
                    <ColorAnimation 
                        BeginTime="00:00:00"
                        Duration="0:0:0.1" 
                        To="Green" 
                        AutoReverse="True"
                        Storyboard.TargetName="txtTextBlock" 
                        Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
                    </ColorAnimation>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
    </DataTrigger>
    <DataTrigger Binding="{Binding BidDown}" Value="True">
        <DataTrigger.EnterActions>
            <StopStoryboard BeginStoryboardName="bidUpStoryboard"/>
            <StopStoryboard BeginStoryboardName="bidDownStoryboard"/>
            <BeginStoryboard Name="bidDownStoryboard">
                <Storyboard BeginTime="00:00:00">
                    <ColorAnimation 
                        BeginTime="00:00:00"
                        Duration="0:0:0.1" 
                        To="Red" 
                        AutoReverse="True"
                        Storyboard.TargetName="txtTextBlock" 
                        Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
                    </ColorAnimation>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
    </DataTrigger>
</DataTemplate.Triggers>

此外，如果连续两次将BidUp设置为true，它不会触发第二次，因为它将从true变为true。因此，如果您希望每次更改值时都出现闪烁效果，则必须在某个时刻将其设置为false。例如：

public double Bid
{
    get { return _price.Bid; }
    set
    {
        BidUp = false;
        BidDown = false;
        BidUp = (value > _price.Bid);
        BidDown = (value < _price.Bid);
        _price.Bid = value;
        OnPropertyChanged("Bid"); }
}

- Fredrik Hedblad

---

工作得很好。总体而言，我的方法感觉有点复杂，是否有更好的模式来处理这种行为或者我可以将我的触发器泛化？ - MattC

我们能否在不使用DataGrid的情况下执行此方法？ - Alkimake

Answer 2

一个替代方案可能是在你的PriceViewModel上有几个属性 - 一个用于买入价背景，一个用于卖出价背景。然后你可以有一个集合来跟踪ObserveableCollection中哪些项目已经更新了。定时器会定期检查这个集合，并重置应该被重置的单元格背景颜色。

这里有一个例子：

http://noelwatson.com/blog/2012/05/01/WPFBlotterflashingCellsWhenUpdated.aspx

- James St John Smythe