How to animate the GridCell when the underlining property gets changed in WinRT SfDataGrid?

3 mins read

In SfDataGrid, you can animate the cell background when changing the underlining property by writing the behavior for the Grid inside the DataTemplate of column.

The following code example explains how to add Behavior inside the DataTemplate of column in SfDataGrid.Columns that animates the background of the column when you change the underlying property.

XAML

<!—Defining SfDataGrid-->
<syncfusion:SfDataGrid x:Name="datagrid"
                                AllowSorting="False" 
                                AutoGenerateColumns="False"
                                ColumnSizer="Star" 
                                ItemsSource="{Binding Stocks}">
<!—Add Behavior in SfDataGrid.Columns for specific column-->
<syncfusion:SfDataGrid.Columns>
    <syncfusion:GridTextColumn Width="200" MappingName="Change">
         <syncfusion:GridTextColumn.CellTemplate>
            <DataTemplate>
                <Grid Width="200">
                        <i:Interaction.Behaviors>
                            <local:AnimateBehavior/>
                        </i:Interaction.Behaviors>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="changeValue"
                                    Grid.Column="1"
                                    HorizontalAlignment="Center"
                                    FontSize="24"
                                    FontWeight="Light"
                                    Foreground="{Binding Change,                                                   Converter={StaticResource changeForegroundConverter}}"
                                    Text="{Binding Change}" />
                    <Path Width="18"
                                Height="18"
                                Margin="0,0,0,0"
                                Data="{Binding Change,
                                                Converter={StaticResource stockChangeConverter}}"
                                Fill="{Binding Foreground,
                                                ElementName=changeValue}"
                                Stretch="Uniform">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <RotateTransform Angle="0" />
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </DataTemplate>
        </syncfusion:GridTextColumn.CellTemplate>
    </syncfusion:GridTextColumn>
</syncfusion:SfDataGrid.Columns>

You can define the ColorAnimation to animate the column and create the Storyboard for changing the Background property of Grid for DataTemplate of column. The background color of Grid is animated by using the property changed event.

The following code example explains the AnimatedBehaviour of a changed Background of a column when the underling ViewMode property gets changed.

public class AnimateBehavior : Behavior<Grid>
{
    public string Property { get; set; }
    public ColorAnimation ColorAnimation { get; set; }
    public Brush BackgroundBrush { get; set; }
    protected override void OnAttached()
    {
        BackgroundBrush = new SolidColorBrush { Color = Colors.Transparent };
        AssociatedObject.Background = BackgroundBrush;
        this.AssociatedObject.DataContextChanged += AssociatedObject_DataContextChanged;
        this.WireEvents();
    }
    void AssociatedObject_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
    {
        BackgroundBrush = new SolidColorBrush { Color = Colors.Transparent };
        this.WireEvents();
    }
    void WireEvents()
    {
        var data = this.AssociatedObject.DataContext as INotifyPropertyChanged;
        if (data != null)
        {
            data.PropertyChanged += data_PropertyChanged;
        }
    }
      // PropertyChanged event of SfDataGrid  
    void data_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName.Equals("Change"))
        {
            //Defining ColourAnimation
            ColorAnimation = new ColorAnimation
            {
                From = Colors.Transparent,
                To = Colors.White,
                Duration = new Duration(TimeSpan.FromMilliseconds(400)),
                AutoReverse = true,
                FillBehavior = FillBehavior.Stop
            };
            //Creating Storyboard for Animate the Background color of the GridCell
            Storyboard.SetTarget(ColorAnimation, AssociatedObject.Background);
            Storyboard.SetTargetProperty(ColorAnimation, "(Path.Color)");
            Storyboard sb = new Storyboard();
            sb.Children.Add(ColorAnimation);
            sb.Begin();
        }               
    }
    protected override void OnDetaching()
    {
        if (this.AssociatedObject.DataContext == null) return;
        var data = this.AssociatedObject.DataContext as INotifyPropertyChanged;
        if (data != null)
            data.PropertyChanged -= data_PropertyChanged;
    }
}

The following screenshot displays the animated SfDataGrid.

Refer the following link for UWP code snippet