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: Silverlight |
Control: SfDataGrid

In SfDataGrid, it is possible to animate the cell background when changing the underlining property by writing the behavior of the Grid inside the DataTemplate of the column.

The following code example demonstrates how to add Behavior inside the DataTemplate of the column in SfDataGrid.Columns that animates the background of the column when the underlining property is changed.

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="150">
                        <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 for animating the column and create the Storyboard for changing the Background property of Grid for DataTemplate of the column. The background color of Grid is animated using property changed event.

The following code example shows the AnimatedBehaviour for changing the background of the column when the underlining 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(object sender, DependencyPropertyChangedEventArgs e)
    {
        BackgroundBrush = new SolidColorBrush { Color = Colors.Transparent };
        if (e.OldValue != null)
        {
            var olddata = e.OldValue as INotifyPropertyChanged;
            if (olddata != null)
                olddata.PropertyChanged -= data_PropertyChanged;
        }
        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.Blue,
                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, new PropertyPath(SolidColorBrush.ColorProperty));
                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 shows the animated SfDataGrid.

F:\Farjana\F Drive\KB\Animation\Silvet.png

Figure 1: Animated SfDataGrid

You can refer the sample form the following link for animating the GridCell when underlining property gets changed in SfDataGrid.

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