バージョン

テンプレートを使用したセルのカスタマイズ - 手順とコード例

トピックの概要

目的

このトピックでは、xamPivotGrid™ セルの内容にカスタム DataTemplates を適用することで、セルをカスタマイズする方法について、順を追って説明します。

前提条件

以下の表に、このトピックを理解するための前提条件として求められるトピックをリストします。

トピック 目的

このセクションは xamPivotGrid コントロールの主要機能について説明します。ここに記載されているトピックでは、アプリケーションで xamPivotGrid コントロールを効果的に使用する方法が説明されています。

このトピックでは、xamPivotGrid コントロールを使用して作業を開始する方法について説明するため、このコントロールを WPF アプリケーションに追加するための手順を順を追って説明しています。

xamPivotGrid コントロールを使用すると、データ セルと、ヘッダー列と行のセルにカスタム データ テンプレートを指定できます。このトピックはこの機能の概要です。

テンプレートを使用したセルのカスタマイズ

概要

次の手順では、xamPivotGrid のセルのカスタマイズ機能を使用する方法について説明します。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

xamPivotGrid Customizing Cells with Templates Procedure and Code Example 1.png

要件

手順を完了するためには、xamPivotGrid コントロールを使用する WPF アプリケーションが必要です。この例では SalesDataSample データ ソースを使用していますが、他のデータを扱うことができるようコード例を変更してかまいません。

概要

このトピックでは、xamPivotGrid のデータ セルおよびヘッダー セル用のカスタム テンプレートを作成し適用する方法について順を追って説明します。以下に手順の概要を示します。

手順

  1. DataTemplates を作成します。

まず、後でセルの内容に割り当てる DataTemplates を作成する必要があります。これらのテンプレートを xamPivotGrid で使用する場合、 データ セルの DataContext は、セルに表示する値が格納された 文字列ですヘッダー セルの場合、データ コンテキストは それぞれの行/列の 組です

そのため、DataTemplate 中でセルの値を取得するには、単純なデータ コンテキスト バインディング {Binding} を行う必要があります。

データ テンプレートを、ページのリソース セクションか、ページからアクセス可能な別の ResourceDictionary に追加します。

  1. データ セルのテンプレートを適用します。

DataCellTemplate を作成し、xamPivotGrid の DataCellTemplates コレクションに追加します。

手順 1 で作成したテンプレートの中から 1 つを使用するには、DataCellTemplate オブジェクトを DataCellTemplates コレクションに追加し、その Template プロパティを、適用する DataTemplate に設定する必要があります。

必要に応じていくつでも DataCellTemplates を指定できます。

  1. テンプレートを適用するセルを指定します。

これは、DataCellTemplates の残りのプロパティに値を設定することで実現されます。

  • 列と行の階層を指定します。

  • ColumnHierarchy プロパティを設定した場合、データ テンプレートが、指定した列階層の中にあるすべてのデータ セルに適用されます。値は、対象にする HierarchyCaption プロパティと同じであることが必要です。同様に、 RowHierarchy プロパティの値を指定できます。これにより、列と行の両方の階層中のセルにテンプレートが適用されます。

  • 列と行のレベルを指定します。

  • これらのプロパティに値を設定すると、データ テンプレートの適用先を定義するより明確な条件を作成できます。Level に整数値を設定すると、テンプレートがそのレベルのセルのみに適用されます。レベル番号は 0 ではなく 1 で始まります。

  • 列と行のラベルを指定します。

  • これらのプロパティを設定すると、指定したラベルが設定されている列または行ヘッダーのセルのみにテンプレートが適用されます。これにより、カスタム DataTemplate を特定のセルに適用できます。

Note
注:

これらのプロパティはすべてオプションですが、テンプレートが適用されるように少なくとも 1 つを設定する必要があります。一部または全部のプロパティが設定されている場合、プロパティの値がすべて一致するセルにテンプレートが適用されます。2 つ以上のテンプレートで競合がある場合、最も具体的なテンプレートが適用されます。一致するセルがない場合、テンプレートはまったく適用されません。

  1. 行と列のヘッダーのテンプレートを適用します。

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))

関連コンテンツ

以下のトピックでは、このトピックに関連する情報を提供しています。

トピック 目的

これは、xamPivotGrid のセル カスタマイズ機能に関連する最も注意すべきプロパティのリストです。

CellControlAttached イベントを使用し、セルの値に基づいてカスタム スタイルをデータ セルに適用する方法の説明です。