Geek Answers Handbook

How to animate the background of a text block when changing the value of a related property?

I have a pretty simple wpftoolkit: datagrid to show the stock market bid and ask.

My grid is tied to ObservableCollection<PriceViewModel>. Mine PriceViewModelimplements INotifyPropertyChanged.

The grid is updated correctly, and I managed to get the background color for the animation, but the animation is interrupted in the application.

The following is the XAML and a fragment of the view model class.

The idea is only to turn red when the price update is lower than the previous one and green when it is higher ... nothing unusual.

     <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>

And view model:

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));
    }

}
+5
source share
2 answers

, , , 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"); }
}
+9

PriceViewModel - . , , ObserveableCollection . reset , reset.

:

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

0

More articles:


All Articles