このトピックでは、XamDataGrid コントロールを使用した行グループ化の実装プロセスを手順を追って説明します。
このトピックは、以下のセクションで構成されます。
XamDataGrid コントロールは、基本データ項目のプロパティに基づいて行をグループ化する機能があります。別のレコードで複製のデータ値がある場合、その複製値を含むプロパティ パスによってレコードを分割する場合に便利です。
行をグループ化するには、ColumnGroupDescription 要素を XamDataGrid の GroupDescriptions コレクションに追加して、PropertyPath プロパティを設定します。PropertyPath を設定するために ColumnGroupDescription 要素のコンストラクターも使用できます。
複数のプロパティ パスでグループ化する場合、GroupHeaderDisplayMode プロパティを設定することにより、行グループの表示をカスタマイズできます。このプロパティには、Combined または Split の 2 つのオプションがあります。Combined オプションは同じグループ ヘッダーに複数のプロパティ パスをインラインで配置します。Split オプションはグループの順序に基づいて別の階層ヘッダーにプロパティ パスを配置します。
デフォルトで、基本データ項目の特定のプロパティによってグループ化する場合、グループ化されている各プロパティのためにグループ ヘッダーが「プロパティ名: プロパティ値」を表示します。このグループ行が表示される方法を XamDataGrid コントロールの以下のプロパティを設定して変更できます。
グループがグリッドに表示される方法をカスタマイズする ColumnGroupDescription 要素のプロパティおよびイベントもあります。これらのプロパティは以下にリストされます。
以下の例は XamDataGrid コントロールで行をグループ化する方法を紹介します。この例および次の例は SampleSalesPerson データ ソースを使用します。
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid ItemsSource="{Binding}">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Territory"/>
</ig:XamDataGrid.GroupDescriptions>
</ig:XamDataGrid>C# の場合:
XamDataGrid grid = new XamDataGrid() { ItemsSource = new SampleSalesTeam() };
grid.GroupDescriptions.Add(new ColumnGroupDescription("Territory"));以上のコード スニペットは以下のような XamDataGrid になります。
以下の例は、上に説明した DisplayName、ValueFormat、および SortDirection プロパティを使用してグループ ヘッダーを書式設定する方法を紹介します。
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid ItemsSource="{Binding}">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Sales"
DisplayName="Sales Amount"
SortDirection="Descending"
ValueFormat="C"/>
</ig:XamDataGrid.GroupDescriptions>
</ig:XamDataGrid>C# の場合:
XamDataGrid grid = new XamDataGrid() { ItemsSource = new SampleSalesTeam() };
ColumnGroupDescription desc = new ColumnGroupDescription("Sales");
desc.SortDirection = ListSortDirection.Descending;
desc.DisplayName = "Sales Amount";
desc.ValueFormat = "C";
grid.GroupDescriptions.Add(desc);以上のコード スニペットは以下のような XamDataGrid になります。
以下の例は、GroupHeaderDisplayMode が Split に設定された複数のグループの XamDataGrid の結果を示します。
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid x:Name="dataGrid" ItemsSource="{Binding}" GroupHeaderDisplayMode="Split">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Territory"/>
<ig:ColumnGroupDescription PropertyPath="FirstName" />
</ig:XamDataGrid.GroupDescriptions>
</ig:XamDataGrid>以上のコード スニペットは以下のような XamDataGrid になります。
以下の例は、DataTemplateSelector を持つ TemplateSectionHeader を使用してグループ ヘッダーの表示方法をスタイル設定する方法を紹介します。
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
xmlns:local="clr-namespace:MyAppNamespace
...
<ig:XamDataGrid ItemsSource="{Binding}">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Territory"/>
</ig:XamDataGrid.GroupDescriptions>
<ig:XamDataGrid.SectionHeader>
<ig:TemplateSectionHeader Background="Navy">
<ig:TemplateSectionHeader.ContentTemplate>
<local:GroupContentSelector/>
</ig:TemplateSectionHeader.ContentTemplate>
</ig:TemplateSectionHeader>
</ig:XamDataGrid.SectionHeader>
</ig:XamDataGrid>C# の場合:
XamDataGrid grid = new XamDataGrid() { ItemsSource = new SampleSalesTeam() };
grid.GroupDescriptions.Add(new ColumnGroupDescription("Territory"));
TemplateSectionHeader header = new TemplateSectionHeader() { Background = new SolidColorBrush(Color.Navy) };
header.ContentTemplate = new GroupContentSelector();
grid.SectionHeader = header;TemplateSectionHeader の ContentTemplate プロパティと DataTemplateSelector を使用する場合、OnSelectTemplate オーバーライドの BindableObject パラメーターは TemplateSectionHeader 自身で、「オブジェクト項目」パラメーターはプロパティ名である文字列およびプロパティ値であるオブジェクトを含む Dictionary<string, object> です。
C# の場合:
public class GroupContentSelector : DataTemplateSelector
{
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
System.Collections.Generic.Dictionary<string, object> dict = item as Dictionary<string, object>;
KeyValuePair<string, object> itemPair = dict.First();
DataTemplate template = new DataTemplate(() =>
{
Label label = new Label() { HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.Center };
label.TextColor = Color.White;
if(itemPair.Value != null)
{
label.Text = itemPair.Value.ToString();
}
return label;
});
return template;
}
}以上のコード スニペットは以下のような XamDataGrid になります。
