このトピックでは、xamPivotGrid™ セルの内容にカスタム DataTemplates を適用することで、セルをカスタマイズする方法について、順を追って説明します。
以下の表に、このトピックを理解するための前提条件として求められるトピックをリストします。
このトピックには次のセクションがあります。
次の手順では、xamPivotGrid のセルのカスタマイズ機能を使用する方法について説明します。
以下のスクリーンショットは最終結果のプレビューです。
手順を完了するためには、xamPivotGrid コントロールを使用する WPF アプリケーションが必要です。この例では SalesDataSample データ ソースを使用していますが、他のデータを扱うことができるようコード例を変更してかまいません。
このトピックでは、xamPivotGrid のデータ セルおよびヘッダー セル用のカスタム テンプレートを作成し適用する方法について順を追って説明します。以下に手順の概要を示します。
DataTemplates を作成します。
まず、後でセルの内容に割り当てる DataTemplates を作成する必要があります。これらのテンプレートを xamPivotGrid で使用する場合、 データ セルの DataContext は、セルに表示する値が格納された 文字列です 。 ヘッダー セルの場合、データ コンテキストは それぞれの行/列の 組です 。
そのため、DataTemplate 中でセルの値を取得するには、単純なデータ コンテキスト バインディング {Binding} を行う必要があります。
データ テンプレートを、ページのリソース セクションか、ページからアクセス可能な別の ResourceDictionary に追加します。
データ セルのテンプレートを適用します。
DataCellTemplate を作成し、xamPivotGrid の DataCellTemplates コレクションに追加します。
手順 1 で作成したテンプレートの中から 1 つを使用するには、DataCellTemplate オブジェクトを DataCellTemplates コレクションに追加し、その Template プロパティを、適用する DataTemplate に設定する必要があります。
必要に応じていくつでも DataCellTemplates を指定できます。
テンプレートを適用するセルを指定します。
これは、DataCellTemplates の残りのプロパティに値を設定することで実現されます。
列と行の階層を指定します。
ColumnHierarchy プロパティを設定した場合、データ テンプレートが、指定した列階層の中にあるすべてのデータ セルに適用されます。値は、対象にする Hierarchy の Caption プロパティと同じであることが必要です。同様に、 RowHierarchy プロパティの値を指定できます。これにより、列と行の両方の階層中のセルにテンプレートが適用されます。
列と行のレベルを指定します。
これらのプロパティに値を設定すると、データ テンプレートの適用先を定義するより明確な条件を作成できます。Level に整数値を設定すると、テンプレートがそのレベルのセルのみに適用されます。レベル番号は 0 ではなく 1 で始まります。
列と行のラベルを指定します。
これらのプロパティを設定すると、指定したラベルが設定されている列または行ヘッダーのセルのみにテンプレートが適用されます。これにより、カスタム DataTemplate を特定のセルに適用できます。
行と列のヘッダーのテンプレートを適用します。
HeaderTemplate を作成し、 ColumnHeaderTemplates/ RowHeaderTemplates コレクションに追加します。
そのためには、DataCellTemplates を xamPivotGrid の DataCellTemplates コレクションに追加するのと同様の方法を使用します。
テンプレートを適用する列/行ヘッダー セルを指定します。
階層を指定します。
すべての列/行ヘッダー セルにテンプレートを割り当てるには、Hierarchy プロパティを使用します。
レベルを指定します。
Level プロパティを設定すると、テンプレートが指定したレベルのセルに適用されます。DataCellTemplate と同様に、レベル番号は 1 で始まります。
ラベルを指定します。
これにより、列/行のキャプションが指定したものと同じであるヘッダー セルのみにテンプレートが適用されます。
次の例は、カスタム DataTemplates を作成し、xamPivotGrid のデータ セルとヘッダー セルに適用する方法を示します。
DataTemplates をページの Resources に追加します。
XAML の場合:
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<TextBlock Foreground="Red" Text="{Binding}"/>
</DataTemplate>
<DataTemplate x:Key="DataTemplate2">
<TextBlock Foreground="Green" Text="{Binding}"/>
</DataTemplate>
<DataTemplate x:Key="DataTemplate3">
<Grid Background="LightGreen">
<TextBlock Text="{Binding}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DataTemplate4">
<Grid Background="LightBlue">
<TextBlock Text="{Binding}"/>
</Grid>
</DataTemplate>
</UserControl.Resources>DataTemplates を適用します。
XAML の場合:
<ig:XamPivotGrid x:Name="pivotGrid"
DataSource="{StaticResource FlatDataSource}">
<ig:XamPivotGrid.DataCellTemplates>
<ig:DataCellTemplate Template="{StaticResource DataTemplate1}"
ColumnHierarchy="Product"
ColumnLabel="Clothing"/>
<ig:DataCellTemplate Template="{StaticResource DataTemplate2}"
RowHierarchy="Seller"
RowLevel="2"
RowLabel="John Smith"/>
</ig:XamPivotGrid.DataCellTemplates>
<ig:XamPivotGrid.ColumnHeaderTemplates>
<ig:HeaderTemplate Template="{StaticResource DataTemplate3}"
Label="Bikes"/>
</ig:XamPivotGrid.ColumnHeaderTemplates>
<ig:XamPivotGrid.RowHeaderTemplates>
<ig:HeaderTemplate Template="{StaticResource DataTemplate4}"
Hierarchy="Seller"
Level="2"/>
</ig:XamPivotGrid.RowHeaderTemplates>
</ig:XamPivotGrid>C# の場合:
…
pivotGrid.DataCellTemplates.Add((DataCellTemplate)this.Resources["DataTemplate1"]);
pivotGrid.DataCellTemplates.Add((DataCellTemplate)this.Resources["DataTemplate2"]);
pivotGrid.ColumnHeaderTemplates.Add((HeaderTemplate)this.Resources["DataTemplate3"]);
pivotGrid.RowHeaderTemplates.Add((HeaderTemplate)this.Resources["DataTemplate4"]);
…Visual Basic の場合:
pivotGrid.DataCellTemplates.Add(DirectCast(Me.Resources("DataTemplate1"), DataCellTemplate))
pivotGrid.DataCellTemplates.Add(DirectCast(Me.Resources("DataTemplate2"), DataCellTemplate))
pivotGrid.ColumnHeaderTemplates.Add(DirectCast(Me.Resources("DataTemplate3"), HeaderTemplate))
pivotGrid.RowHeaderTemplates.Add(DirectCast(Me.Resources("DataTemplate4"), HeaderTemplate))以下のトピックでは、このトピックに関連する情報を提供しています。