How to animate the GridCell when the underlining property gets changed in Silverlight 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.
Figure 1: Animated SfDataGrid
You can refer the sample form the following link for animating the GridCell when underlining property gets changed in SfDataGrid.
