How to animate the GridCell when the underlining property gets changed in UWP 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
Sample Links:
Conclusion
I hope you enjoyed learning about how to animate the GridCell when the underlining property gets changed in UWP SfDataGrid.
You can refer to our UWP SfDataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP SFDataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
