值更改时为文本框背景设置动画答案

【问题标题】：Animate TextBox background when value has changed值更改时为文本框背景设置动画
【发布时间】：2013-11-12 17:34:57
【问题描述】：

我想根据 ViewModel 中的新值设置文本框（价格）背景颜色的动画。

颜色可以根据新值不同（大于 0 -> 绿色 - 小于 0 -> 红色）

我能看到的唯一动画是在设置新值时启动。之后动画就不会再出现了。

<TextBox HorizontalAlignment="Left" Height="23" Margin="10,178,0,0" TextWrapping="Wrap" Text="{Binding price}" VerticalAlignment="Top" Width="120" x:Name="ChangeField">
    <TextBox.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding price, Converter={StaticResource formatter}}" Value="positive">
                        <DataTrigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="pos"></StopStoryboard>
                            <BeginStoryboard x:Name="pos">
                                <Storyboard>
                                    <ColorAnimation  AutoReverse="True" To="Green" Duration="0:0:0:0.100" Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)"></ColorAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <RemoveStoryboard BeginStoryboardName="pos"></RemoveStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBox.Style>
    </TextBox>

价格可能每秒变化几次，所以我需要在设置新价格值时中止正在运行的动画。

【问题讨论】：

好的，现在我知道出了什么问题。当我遇到“肯定”情况并且之后来自转换器的所有更新也带有“肯定”时，DataTrigger 永远不会进入“EnterActions”。现在我需要知道如何重置 DataTrigger 的值

标签： c# wpf datatrigger coloranimation wpf-animation

【解决方案1】：

故事板对于简单的颜色变化来说似乎有点矫枉过正。我将绑定背景颜色并为价格创建一个 IValueConverter，它只是跟随价格的 NotificationChanges。

我建议使用 IValueConverter 绑定到 Price 的 Background 元素并隔离那里的着色逻辑...

Xaml

<TextBlock x:Name="ChangeField" 
           Text="{Binding price}" 
           Background="{Binding price, Converter={StaticResource PriceToColorConverter}}" />

代码

[ValueConversion(typeof(decimal), typeof(Brush))]
public class PriceToColorConverter : IValueConverer
{
   public object Convert(object value, Type target)
   {
      decimal price;
      decimal.Parse(value.ToString(), price);
      return (price > 0 ? Brushes.Green : Brushes.Red);
   }
}

【讨论】：

嗨，对不起，我忘了告诉我我需要一个“flash”动画。所以当价格上涨时，我想闪烁绿色。 1 秒后颜色必须回到默认颜色。根据我对 WPF 的理解，我需要一个触发器来启动这些动画。

【解决方案2】：

我想这就是你要找的。我已经对其进行了测试，并且背景颜色会在一瞬间发生变化。基本上你有一个小错误：持续时间应该是 hh:mm:ss.fff 但你设置了 hh:mm:ss:??.fff。

<TextBox HorizontalAlignment="Left" Height="23" Margin="10,178,0,0" TextWrapping="Wrap" Text="{Binding price}" VerticalAlignment="Top" Width="120" x:Name="ChangeField">
    <TextBox.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding  price, Converter={StaticResource formatter}}" Value="positive">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation  AutoReverse="True" To="Green" Duration="0:0:0.100"  
                                                Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>

【讨论】：