locked
Animation of Individual Items in a Grid

    Question

  • Hi,

    I want to do a blink animation on items in the grid on change of the price property of the model object. Whenever the price changes, I want to make a blink animation like: ColorAnimation from Red to Black for 1 second.

    But, I dont know how to make it work as there are no data triggers in WinRT. Somebody please help me on this.

    My DataTemplate is as follows

                              

     <DataTemplate x:Key="Standard200x80StockItemTemplate"  >
            <Grid HorizontalAlignment="Left" Width="200" Height="80" Background="Black"  Margin="-2,-2,-2,-2" >
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding ISIN}"  Style="{StaticResource StockItemTitleTextStyle}"  Margin="15,0,15,0"/>
                <TextBlock Text="{Binding Last}" Grid.Row="1" FontSize="18"  Margin="15,0,15,0"/>
                <TextBlock Text="{Binding ChangeStr}" Grid.Row="2" FontWeight="Bold" FontSize="12" Foreground="{Binding Change, Converter={StaticResource changePriceColorConverter}}"  Margin="15,0,15,5"/>

                <Border   x:Name="blinkBorder" Grid.Column="1" Margin="1,1,1,1" Grid.RowSpan="3"  Background="{Binding Change, Converter={StaticResource changePriceColorConverter}}"></Border>
      </Grid>

    </DataTemplate>

    Thanks in Advance


    • Edited by Sandeep.mys Thursday, August 14, 2014 6:24 AM
    Thursday, August 14, 2014 6:23 AM

Answers

  • Since there are no DataTriggers available, you could hook up en event handler for the PropertyChanged event for the Model object and create an animation and a Storyboard programmatically. Something like this:

    public sealed partial class MainPage : Page
        {
            private Model _model = new Model();
            public MainPage()
            {
                this.InitializeComponent();
                grid.DataContext = _model;
                _model.PropertyChanged += model_PropertyChanged;
                //make sure to set the Background to a SolidColorBrush initially
                blinkBorder.Background = new SolidColorBrush(Windows.UI.Colors.Transparent); 
     }
    
    void model_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
            {
                if (e.PropertyName == "Change")
                {
                    ColorAnimation animation = new ColorAnimation();
                    animation.To = Windows.UI.Colors.Green;
                    animation.Duration = TimeSpan.FromMilliseconds(1000);
                    animation.FillBehavior = FillBehavior.Stop;
                    Storyboard.SetTarget(animation, blinkBorder);
                    Storyboard.SetTargetProperty(animation, "(Border.Background).(SolidColorBrush.Color)");
                    Storyboard sb = new Storyboard();
                    sb.Children.Add(animation);
                    sb.Begin();
                }
            }
    }
    
    class Model : INotifyPropertyChanged
        {
            private double _change;
            public double Change 
            {
                get { return _change; }
                set { _change = value; RaisePropertyChanged("Change"); }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
            protected void RaisePropertyChanged(string name)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(name));
                }
            }
        }
    
    <Grid x:Name="grid" HorizontalAlignment="Left" Width="200" Height="80" Background="Black"  Margin="-2,-2,-2,-2" >
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                </Grid.ColumnDefinitions>
      ...
                <Border x:Name="blinkBorder">
                </Border>
            </Grid>
    



    Thursday, August 14, 2014 10:20 AM

All replies

  • Since there are no DataTriggers available, you could hook up en event handler for the PropertyChanged event for the Model object and create an animation and a Storyboard programmatically. Something like this:

    public sealed partial class MainPage : Page
        {
            private Model _model = new Model();
            public MainPage()
            {
                this.InitializeComponent();
                grid.DataContext = _model;
                _model.PropertyChanged += model_PropertyChanged;
                //make sure to set the Background to a SolidColorBrush initially
                blinkBorder.Background = new SolidColorBrush(Windows.UI.Colors.Transparent); 
     }
    
    void model_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
            {
                if (e.PropertyName == "Change")
                {
                    ColorAnimation animation = new ColorAnimation();
                    animation.To = Windows.UI.Colors.Green;
                    animation.Duration = TimeSpan.FromMilliseconds(1000);
                    animation.FillBehavior = FillBehavior.Stop;
                    Storyboard.SetTarget(animation, blinkBorder);
                    Storyboard.SetTargetProperty(animation, "(Border.Background).(SolidColorBrush.Color)");
                    Storyboard sb = new Storyboard();
                    sb.Children.Add(animation);
                    sb.Begin();
                }
            }
    }
    
    class Model : INotifyPropertyChanged
        {
            private double _change;
            public double Change 
            {
                get { return _change; }
                set { _change = value; RaisePropertyChanged("Change"); }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
            protected void RaisePropertyChanged(string name)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(name));
                }
            }
        }
    
    <Grid x:Name="grid" HorizontalAlignment="Left" Width="200" Height="80" Background="Black"  Margin="-2,-2,-2,-2" >
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                </Grid.ColumnDefinitions>
      ...
                <Border x:Name="blinkBorder">
                </Border>
            </Grid>
    



    Thursday, August 14, 2014 10:20 AM
  • Dear Magnus,

    Thanks for the solution. Will try this and let you know the result ASAP.

    Meanwhile, wanted to know will there be any performance bottleneck if there is huge number of price updates every second. Bcoz I will be using this to display the real time updates of all the stocks for a particular exchange.

    Thanks and Regards,

    Sandeep 

    Monday, August 18, 2014 4:48 AM