We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WinRT |
Control: SfDataGrid

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.

C#

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

Note:

Refer the following link for UWP code snippet

 

Sample Links:

WRT

UWP

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile