Version

Animation

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.

Introduction

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.

Animation Presets

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.

Applying Animation Presets

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.

  1. 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();
  1. 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;
  1. 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;
}
  1. 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.

Animating DataGridView Operations 1.gif

Customizing Animation Presets

Animation Phases

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.

Grid Operation Pre-Phase Main-Phase Post-Phase

Column Exchanging

None

Column Hiding

None

Column Showing

None

Column Adding

None

Column Moving

None

Column Property Updating

None

None

Note
Note

The ColumnExchanging and ColumnPropertyUpdating operations have phases which differ slightly in name only, from the remaining operations; ColumnExchanging has a Post-Phase equivalent, called ColumnExchangingCleanupPhase and ColumnPropertyUpdating has a single Main-Phase, which is simply designated as the ColumnPropertyUpdatingMainPhase.

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.

Customization Settings

The following table provides descriptions for the most important settings provided by the GridAnimationPhaseSettings type:

Settings Description

Allows you to define the mathematical function for the rate of acceleration for the animation, this is useful for styling the flow of the animation phase.

Allows you to define the total duration of the animation main-phase; this is useful if you need the phase to be executed within a specific time frame and provides added flexibility for orchestrating phases within an animation.

Allows you to define a delay time for the phase, this is particularly useful as it will allow you to customize duration between the end of the pre-phase and beginning of the main-phase of the animation for ease of observation.

Customization Steps

The process of implementing custom animation consists of the following steps:

  1. 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.

  1. 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.

  1. 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.

  2. Assign the individual GridAnimationPhaseSettings object(s) to desired column operation phase of the GridColumnAnimationSettings object.

  1. 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.

Example of Pre-Phase/Main-Phase Animation

This example demonstrates the scenario with an animation consisting of a pre-phase/main-phase, using the example of showing a column.

  1. 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;
}
  1. 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;
  1. 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.

Animating DataGridView Operations 2.gif

Example of main-phase/post-phase animation

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.

  1. 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;
}
  1. 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;
  1. 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.

Animating DataGridView Operations 3.gif

Related Content

The following table lists topics that are related to this topic:

Topic Purpose

This topic provides information on supported column types in the XamDataGrid control.

This topic provides code examples on working with columns in the XamDataGrid control.