The purpose of this topic is to get you familiar working with animations that can be implemented when carrying out operations on columns and rows of the XamDataGrid control.
This topic contains the following sections:
There are several animation presets that can be applied to the XamDataGrid control which will allow you to implement animations for row selection, cell actualization and each of the column operation types. Refer to the Working with Columns, topic for more information on types of column operations.
Animation presets are implemented via the <OperationName>AnimationMode properties, exposed from the XamDataGrid control. In addition to animation presets, you can also create customized animations, for more details, refer to Customize Animation Presets section of this topic.
The following table details the XamDataGrid control’s operations with their associated animation preset setter methods as well as the animation presets that can be used with them.
The following example demonstrates how to apply a preset animation for the hiding columns and illustrates an application context in which it might be used in; this example uses a checkbox to toggle the visible state for a column to allow observation of the resulting animation. The first part of the example will walk you through setting up the sample.
Create an instance of the XamDataGrid control with manually defined columns for the FirstName, Sales, and Territory data.
It is necessary to manually define these columns, as you will need to access IsHidden which is exposed directly from the salesColumn object. For more information, refer to the Working with Columns topic. The AutoGenerateColumns to false, this tells the XamDataGrid control not to create columns automatically after its DataSource has been set.
In XAML:
<ig:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="False">
<ig:XamDataGrid.ItemsSource>
<data:SampleSalesTeam />
</ig:XamDataGrid.ItemsSource>
<ig:XamDataGrid.Columns>
<ig:TextColumn PropertyPath="FirstName" />
<ig:TextColumn PropertyPath="Territory" />
<ig:NumericColumn PropertyPath="Sales" />
</ig:XamDataGrid.Columns>
</ig:XamDataGrid>In C#:
var column0 = new TextColumn();
column0.PropertyPath = "FirstName";
var column1 = new TextColumn();
column1.PropertyPath = "Territory";
var column2 = new NumericColumn();
column2.PropertyPath = "Sales";
var DataGrid = new XamDataGrid();
DataGrid.Columns.Add(column0);
DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.AutoGenerateColumns = false;
DataGrid.ItemsSource = new SampleSalesTeam();Apply an animation preset that you want to use when a column is being hidden in the data grid:
In XAML:
<ig:XamDataGrid x:Name="DataGrid" ColumnHidingAnimationMode="FadeOut">
...
</ig:XamDataGrid>In C#:
DataGrid.ColumnHidingAnimationMode = ColumnHidingAnimationMode.FadeOut;Create an instance of control that will trigger hiding of a column in the data grid. For example, you can use a Switch control and handle its Toggled event as it is demonstrated in the code below:
In XAML:
<StackLayout Orientation="Horizontal">
<Label Text="Is Column Hidden"/>
<Switch IsToggled="False" Toggled="Switch_Toggled"/>
</StackLayout>In C#:
var AnimationSwitch = new Switch();
AnimationSwitch.IsToggled = false;
AnimationSwitch.Toggled += Switch_Toggled;
...
private void Switch_Toggled(object sender, ToggledEventArgs e)
{
DataGrid.Columns[2].IsHidden = e.Value;
}Verify the result by running the application.
The following animated graphic shows how hiding the Sales column works in XamDataGrid control. The Column Hide animation starts with the main-phase which is transitioning the Sales column to a hidden state. Notice that the elements of the Sales column become progressively transparent, from the top to bottom within the column. Then the post-phase starts and the remaining columns are re-distributed to appropriately use the unoccupied region that was initially occupied by the previously visible Sales column.
Animations are composed of one or two phases, depending on the column operation being carried out; the table below, lists all column operations with their associated animation phases.
There are three possible animation phases:
Main-Phase controls the primary animation for a column operation, (this is the immediate change in appearance of a column, generally into or out of view).
Pre-Phase includes animations that begin before the associated column is transitioned into view; for example, when adding a column, existing columns are displaced to make room for the new.
Post-Phase is used for column operations that remove a column from view; an example of this is when hiding a column, where after a column is removed, remaining columns are redistributed to fill in the newly available space, that was previously occupied by the hidden column.
The following table provides descriptions for the most important settings provided by the GridAnimationPhaseSettings type:
The process of implementing custom animation consists of the following steps:
Create an instance of the GridColumnAnimationSettings class. This object is used to associate the customized parameters of individual GridAnimationPhaseSettings objects with the desired column operation phase.
Create an instance of the GridAnimationPhaseSettings class, one for each phase of the GridAnimationPhaseSettings object, that you intend to customize. You can customize one or potentially all of the animation phases, but you need to create one GridAnimationPhaseSettings object for each phase to be customized; this object stores the customized parameters for the associated phase. Phases that you have not explicitly customized will maintain their default behaviors, as observed with the animation presets.
Customize values of the GridAnimationPhaseSettings object, via the exposed animation properties. Values which are not explicitly modified will maintain the default values, observed with the animation presets.
Assign the individual GridAnimationPhaseSettings object(s) to desired column operation phase of the GridColumnAnimationSettings object.
Assign the GridColumnAnimationSettings object to the XamDataGrid control using its ColumnAnimationSettings property.
Pre-phase/main-phase occur for animations where an element is being transitioned into view. The pre-phase animation is involved with operations responsible for bringing a column into view, such as adding a column or showing a column. During the pre-phase, before a column is brought into view, existing columns are redistributed or resized in order to make space for the new column to occupy. The main-phase in this scenario is generally started at some point after the pre-phase has been initiated, (by implementing a delay, illustrated in the following example) and involves the actual transition of the column from a hidden, to a visible state.
The examples below demonstrate how to customize animation phases.
This example demonstrates the scenario with an animation consisting of a pre-phase/main-phase, using the example of showing a column.
Create an instance of the XamDataGrid control with manually defined Column objects for the FirstName, Sales, and Territory data. Note that the Sales column is hidden in this example so that it can be displayed later using Column Showing animation.
In XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0">
<Label Text="Is Column Hidden" />
<Switch x:Name="AnimationSwitch" IsToggled="True"/>
</StackLayout>
<ig:XamDataGrid x:Name="DataGrid" Grid.Row="1"
AutoGenerateColumns="False"
ColumnShowingAnimationMode="FadeIn">
<ig:XamDataGrid.ItemsSource>
<data:SampleSalesTeam />
</ig:XamDataGrid.ItemsSource>
<ig:XamDataGrid.Columns>
<ig:TextColumn PropertyPath="FirstName" />
<ig:TextColumn PropertyPath="Territory" />
<ig:NumericColumn PropertyPath="Sales"
IsHidden="{Binding Source={Reference AnimationSwitch}, Path=IsToggled}"/>
</ig:XamDataGrid.Columns>
<!-- TODO add ColumnAnimationSettings -->
</ig:XamDataGrid>
</Grid>In C#:
var column0 = new TextColumn();
column0.PropertyPath = "FirstName";
var column1 = new TextColumn();
column1.PropertyPath = "Territory";
var column2 = new NumericColumn();
column2.PropertyPath = "Sales";
column2.IsHidden = true;
DataGrid.Columns.Add(column0);
DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.AutoGenerateColumns = false;
DataGrid.ItemsSource = new SampleSalesTeam();
DataGrid.ColumnShowingAnimationMode = ColumnShowingAnimationMode.FadeIn;
...
var AnimationSwitch = new Switch();
AnimationSwitch.IsToggled = true;
AnimationSwitch.Toggled += Switch_Toggled;
...
private void Switch_Toggled(object sender, ToggledEventArgs e)
{
DataGrid.Columns[2].IsHidden = e.Value;
}Create an instance of GridColumnAnimationSettings type with custom parameters for pre-phase and main-phase of the column showing animation:
In XAML:
<ig.XamDataGrid.ColumnAnimationSettings>
<ig:GridColumnAnimationSettings>
<ig.GridColumnAnimationSettings.ColumnShowingPrePhase>
<ig:GridAnimationPhaseSettings EasingFunctionType="CircleInOut"
DurationMillisecond="1000"/>
</ig.GridColumnAnimationSettings.ColumnShowingPrePhase>
<ig:GridColumnAnimationSettings.ColumnShowingMainPhase>
<ig:GridAnimationPhaseSettings DurationMilliseconds="2000"
HoldInitialMilliseconds="1000" />
</ig:GridColumnAnimationSettings.ColumnShowingMainPhase>
</ig:GridColumnAnimationSettings>
</ig.XamDataGrid.ColumnAnimationSettings>In C#:
var settings = new GridColumnAnimationSettings();
settings.ColumnShowingPrePhase = new GridAnimationPhaseSettings
{
EasingFunctionType = GridEasingFunctionType.CircleInOut,
DurationMilliseconds = 1000,
};
settings.ColumnShowingMainPhase = new GridAnimationPhaseSettings
{
EasingFunctionType = GridEasingFunctionType.CircleInOut,
DurationMilliseconds = 2000,
HoldInitialMilliseconds = 1000,
};
...
DataGrid.ColumnAnimationSettings = settings;Verify the result by running the application.
The following animated graphic demonstrates how displaying, using customized animation, a column works in XamDataGrid control. The ColumnShowingAnimationMode starts with the ColumnShowingPrePhase which redistributes existing columns to make space for a column to be displayed. In this case, the Territory Column will be shifted to the left, making room for the Sales column to be displayed. Then the ColumnShowingMainPhase of animation starts and the Sales column is being transitioned into view. At this point, elements of this column will progressively gain opacity from top to bottom as they come into view.
Main-phase/post-phase occur for animations where an element is being transitioned out of view.
The main-phase focuses on the primary animation for a column operation; for example, for hiding the column animation, the main-phase specifically involves the transition of the column from a visible state to a hidden state; because when you hide a column, the animation transitions the column out of view, its main-phase occurs simultaneously and usually ends ‘before’ the termination of the animation post-phase. The post-phase of the animation includes periphery elements, such as shifting displayed columns to fill in the space that was initially occupied by the now hidden column.
This example demonstrates the scenario with an animation consisting of a main-phase/post-phase, using the example of hiding a column.
Create an instance of the XamDataGrid control with manually defined Column objects for the FirstName, Sales, and Territory data. Note that the Sales column is visible in this example so that it can be hidden later using Column Hiding animation.
In XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0">
<Label Text="Is Column Hidden" />
<Switch x:Name="AnimationSwitch" IsToggled="False"/>
</StackLayout>
<ig:XamDataGrid x:Name="DataGrid" Grid.Row="1"
AutoGenerateColumns="False"
ColumnHidingAnimationMode="SlideToRightAndFadeOut">
<ig:XamDataGrid.ItemsSource>
<data:SampleSalesTeam />
</ig:XamDataGrid.ItemsSource>
<ig:XamDataGrid.Columns>
<ig:TextColumn PropertyPath="FirstName" />
<ig:TextColumn PropertyPath="Territory" />
<ig:NumericColumn PropertyPath="Sales"
IsHidden="{Binding Source={Reference AnimationSwitch}, Path=IsToggled}"/>
</ig:XamDataGrid.Columns>
<!-- TODO add ColumnAnimationSettings -->
</ig:XamDataGrid>
</Grid>In C#:
var column0 = new TextColumn();
column0.PropertyPath = "FirstName";
var column1 = new TextColumn();
column1.PropertyPath = "Territory";
var column2 = new NumericColumn();
column2.PropertyPath = "Sales";
column2.IsHidden = false;
DataGrid.Columns.Add(column0);
DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.AutoGenerateColumns = false;
DataGrid.ItemsSource = new SampleSalesTeam();
DataGrid.ColumnHidingAnimationMode = ColumnHidingAnimationMode.SlideToRightAndFadeOut;
...
var AnimationSwitch = new Switch();
AnimationSwitch.IsToggled = false;
AnimationSwitch.Toggled += Switch_Toggled;
...
private void Switch_Toggled(object sender, ToggledEventArgs e)
{
DataGrid.Columns[2].IsHidden = e.Value;
}Create an instance of GridColumnAnimationSettings type with custom parameters for main-phase and post-phase of the column hiding animation:
In XAML:
<ig.XamDataGrid.ColumnAnimationSettings>
<ig:GridColumnAnimationSettings>
<ig:GridColumnAnimationSettings.ColumnHidingMainPhase>
<ig:GridAnimationPhaseSettings DurationMilliseconds="2000"
HoldInitialMilliseconds="1000" />
</ig:GridColumnAnimationSettings.ColumnHidingMainPhase>
<ig.GridColumnAnimationSettings.ColumnHidingPostPhase>
<ig:GridAnimationPhaseSettings EasingFunctionType="CircleInOut"
DurationMillisecond="1000"/>
</ig.GridColumnAnimationSettings.ColumnHidingPostPhase>
</ig:GridColumnAnimationSettings>
</ig.XamDataGrid.ColumnAnimationSettings>In C#:
var settings = new GridColumnAnimationSettings();
settings.ColumnHidingMainPhase = new GridAnimationPhaseSettings
{
EasingFunctionType = GridEasingFunctionType.CircleInOut,
DurationMilliseconds = 2000,
HoldInitialMilliseconds = 1000,
};
settings.ColumnHidingPostPhase = new GridAnimationPhaseSettings
{
EasingFunctionType = GridEasingFunctionType.CircleInOut,
DurationMilliseconds = 1000,
};
...
DataGrid.ColumnAnimationSettings = settings;Verify the result by running the application.
The following animated graphic demonstrates how hiding a column, using customized animation, works in XamDataGrid control. The ColumnHidingAnimationMode starts with the ColumnHidingMainPhase which transitions the Sales column out of view by moving each of the column elements to the right margin of the column, where they all become increasingly transparent at the same time. Then the ColumnHidingPostPhase of animation starts and the remaining columns are now repositioned, so that they occupy the space, made available by hiding the Sales column.
The following table lists topics that are related to this topic: