更改绑定属性的值时，如何为文本块的背景设置动画？ [英] How to animate the background of a textblock when changing the value of the bound property?
问题描述
我有一个非常简单的wpftoolkit：datagrid来显示股票市场的出价和要价。
I have a pretty simple wpftoolkit:datagrid to show stock market bid and ask.
我的网格绑定到 ObservableCollection< PriceViewModel>。 。我的 PriceViewModel 实现了 INotifyPropertyChanged 。
My grid is bound to an ObservableCollection<PriceViewModel>. My PriceViewModel implements INotifyPropertyChanged.
网格正确更新了并且我设法使背景色动画化，但是在应用动画时它是断断续续的。
The grid correctly updates and I have managed to get the background color to animate but it is intermittent in apply the animation.
下面是视图模型类的XAML和代码段。
Below is the XAML and snippet of the view model class.
想法只是在价格更新低于前一次时将颜色涂成红色，而当价格更新时将其颜色涂成绿色...没什么花哨的。
The idea is just to color red when a price update is lower than the previous and green when it's higher...nothing too fancy.
<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));
}
}
推荐答案
我尝试过此方法，如果在启动新的故事板之前先停止 Storyboard s，则效果会更好。要停止 Storyboard ，命名并调用
I tried this and it seems to work better if you stop the Storyboards before you start the new one. To stop a Storyboard, name it and call
<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。例如，
Also, if BidUp is set to true two times in a row, it won't trigger the second time since it will go from true to true, so if you want the flashing effect to appear each time a value changes you will have to set it to false at some point. e.g.
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"); }
}
这篇关于更改绑定属性的值时，如何为文本块的背景设置动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
