このトピックでは、XamDataGrid コントロールを使用して列または行を操作するときに実装できるアニメーションの使用方法を分かりやすく説明し、理解を深めることができるようにします。
このトピックには、以下のセクションがあります。
XamDataGrid コントロールに、列選択、セル描画、および列操作の各タイプでアニメーションを実装できるアニメーション プリセットを適用できます。列操作の詳細については、「 列の作業」のトピックを参照してください。
アニメーション プリセットは、XamDataGrid から公開される <OperationName>AnimationMode プロパティを使用して実装できます。アニメーション プリセットに加えて、カスタマイズしたアニメーションを作成することも可能です。詳細は、このトピックの「アニメーション プリセットのカスタマイズ」を参照してください。
次の表に、XamDataGrid 操作とこれらに関連付けられたアニメーション プリセット セッター メソッド、およびこれらとともに使用できるアニメーション プリセットを示します。
次の例では、列を非表示にする場合にプリセット アニメーションを適用する方法を説明し、実際に使用されるアプリケーションのコンテキストを示します。この例では、チェックボックスを使用して列の表示状態を切り替え、結果のアニメーションを確認します。例の最初の部分では、サンプルの設定方法を順を追って説明します。
FirstName、Sales、および Territory データの列を手動で定義して、XamDataGrid コントロールのインスタンスを作成します。
salesColumn オブジェクトから直接公開された IsHidden() メソッドにアクセスする必要があるため、手動でこれらの列を定義することが必要です。詳細は、「列の作業」のトピックを参照してください。
AutoGenerateColumns を false に設定すると、XamDataGrid コントロールは DataSource が設定された後に自動的に列を作成しません。
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>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();列がデータ グリッドで非表示になっているときに使用するアニメーション プリセットを適用します。
XAML の場合:
<ig:XamDataGrid x:Name="DataGrid" ColumnHidingAnimationMode="FadeOut">
...
</ig:XamDataGrid>C# の場合:
DataGrid.ColumnHidingAnimationMode = ColumnHidingAnimationMode.FadeOut;データ グリッド内の列を非表示にするコントロールのインスタンスを作成します。たとえば、以下のコードで示すように、Switch コントロールを使用し、その Toggled イベントを処理できます。
次のコードで示すように、この例では、Switch を使用して Sales 列の表示状態を切り替えています。
XAML の場合:
<StackLayout Orientation="Horizontal">
<Label Text="Is Column Hidden"/>
<Switch IsToggled="False" Toggled="Switch_Toggled"/>
</StackLayout>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;
}アプリケーションを実行して、結果を確認します。
次のアニメーション グラフィックスは、XamDataGrid コントロールでの Sales 列の非表示を示しています。列非表示のアニメーションは、Sales 列を非表示の状態にするメインフェーズで始まります。Sales 列の要素は、列内で上から下へ順に透明になります。その後のポストフェーズで残りの列は、表示されていた Sales 列によって占有されていた非占有領域を適切に使用するように再分配されます。
アニメーションは、実行される列操作によって、1 つまたは 2 つのフェーズで構成されます。次の表に、すべての列操作と関連付られたアニメーション フェーズを示します。
次の使用可能な 3 つのアニメーション フェーズがあります。
メインフェーズは、列操作の最初のアニメーションを制御します（列の外観が速やかに変化します。通常は、ビューに表示、またはビューからの非表示です)。
プリフェーズには、関連付けられた列がビュー内に移行する前に開始されるアニメーションが含まれます。たとえば、列の追加では、既存の列が移動して、新しい列を表示するスペースが作られます。
ポストフェーズは、ビューから列を削除する列操作に使用されます。たとえば、列を非表示にする場合に、列が削除された後、残りの列が再配置されて、新しく使用可能になったスペース（非表示になった列が以前占有していた場所）を埋める操作などです。
カスタム アニメーションの実装プロセスは、次の手順で実行します。
GridColumnAnimationSettings クラスのインスタンスを作成します。このオブジェクトは、各 GridAnimationPhaseSettings オブジェクトのカスタマイズ済みパラメーターを、使用する列操作フェーズに関連付けます。
GridAnimationPhaseSettings クラスを作成して、GridAnimationPhaseSettings オブジェクトのフェーズごとに 1 つカスタマイズします。1 つまたはすべて（使用する場合）のアニメーション フェーズをカスタマイズできますが、カスタマイズするフェーズごとに GridAnimationPhaseSettings オブジェクトを 1 つ作成する必要があります。このオブジェクトには、関連付けられたフェーズのカスタマイズ済みパラメーターを格納します。明示的にカスタマイズしなかったフェーズは、アニメーション プリセットで確認したように、デフォルトの動作が維持されます。
公開されたアニメーション プロパティを使用して、GridAnimationPhaseSettings オブジェクトの値をカスタマイズします。明示的に変更しなかった値は、アニメーション フェーズで確認したように、デフォルトの値が維持されます。
各 GridAnimationPhaseSettings オブジェクトを、GridColumnAnimationSettings オブジェクトの目的の列操作フェーズに割り当てます。
ColumnAnimationSettings プロパティ を使用して、XamDataGrid コントロールに GridColumnAnimationSettings オブジェクトを割り当てます。
アニメーションのプリフェーズ / メインフェーズは、要素がビューに移行すると発生します。プリフェーズのアニメーションは、たとえば、列の追加や列の表示など、列をビュー内に表示する操作に関連付られています。プリフェーズの間、列がビュー内に表示される前は、既存の列の再配置やサイズの再設定などにより、新しい列が配置されるスペースを作ります。このシナリオのメインフェーズは、通常プリフェーズが開始された後のいずれかの時点で開始され（次の例で示すように、遅延を実装した場合）、具体的には列を非表示の状態から表示状態に遷移させます。
以下の例は、アニメーション フェーズをカスタマイズする方法を示しています。
この例では、プリフェーズ / メインフェーズで構成されるアニメーションのシナリオについて、列の表示を例に説明します。
FirstName、Sales、および Territory データの Column オブジェクトを手動で定義して、XamDataGrid コントロールのインスタンスを作成します。この例では、Sales 列が非表示ですが、列表示アニメーションを使用して表示します。
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>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;
}列表示アニメーションのプリフェーズおよびメインフェーズで使用する、カスタム パラメータを持つ GridColumnAnimationSettings タイプのインスタンスを作成します。
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>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;アプリケーションを実行して、結果を確認します。
次のアニメーション グラフィックスは、XamDataGrid コントロールでカスタム アニメーションを使用して Sales 列を表示する方法を示しています。ColumnShowingAnimationMode は、既存の列が再配置され、列を表示するためのスペースが確保される ColumnShowingPrePhase で始まります。この場合、Territory 列が左にシフトされ、Sales 列を表示するスペースが確保されます。その後、アニメーションの ColumnShowingMainPhase が開始され、Sales 列が表示されます。この時点で、この列の要素は、表示されると、上から下へ不透明度が徐々に高くなります。
アニメーションのメインフェーズ / ポストフェーズは、要素がビュー外に移行すると発生します。
メインフェーズは、列操作の最初のアニメーションを対象にします。たとえば、列を非表示にするアニメーションでは、列が表示状態から非表示状態になる遷移はメインフェーズで発生します。列を非表示にする場合、アニメーションによって列がビュー外に遷移します。メインフェーズは同時に発生し、通常、アニメーションのポストフェーズが終了する前に終了します。 アニメーションのポストフェーズには、周辺の要素が含まれます。たとえば、表示されている列をシフトして、最初の段階で表示されていた列が非表示になった結果、その列が最初に占めていた場所を埋める操作などです。
次の例では、メインフェーズ/ポストフェーズで構成されるアニメーションのシナリオについて、列の非表示を例に説明します。
FirstName、Sales、および Territory データの Column オブジェクトを手動で定義して、XamDataGrid コントロールのインスタンスを作成します。この例では、Sales 列が表示されますが、列非表示アニメーションを使用して非表示にできます。
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>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;
}列非表示アニメーションのメインフェーズおよびポストフェーズで使用する、カスタム パラメータをもつ GridColumnAnimationSettings タイプのインスタンスを作成します。
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>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;アプリケーションを実行して、結果を確認します。
次のアニメーション グラフィックスは、XamDataGrid コントロールでカスタム アニメーションを使用して Sales 列を非表示する方法を示しています。ColumnHidingAnimationMode は、列の各要素が徐々に透明になっていく、列の右の余白に移動されることによって、Sales 列が非表示になる ColumnHidingMainPhase で始まります。また、アニメーションの ColumnHidingPostPhase の開始でもあります。残りの列は、Sales 列が非表示になったことで空いたスペースを埋めるように再配置されます。
以下の表は、このトピックに関連するトピックを示します。