以下は最終結果のプレビューです。
図 1: カラー マッピングしたデータ バインドされた Treemap
Expression Blend で Microsoft® WPF® プロジェクトを作成します。
以下の NuGet パッケージをアプリケーションに追加します。
Infragistics.WPF.Treemap
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
この手順は xamTreemap コントロールの DataContext プロパティのバインドにサンプル データ モデルを使用しています。Manufacturer View Model からダウンロードできます。
Blend でプロジェクトを右クリックして、[参照の追加] を選択し、必要なアセンブリを追加します。
図 2: Blend のアセット ライブラリ
DataContext プロパティを ManufacturerViewModel クラスにバインドします。[プロパティ] パネルで、[共通のプロパティ] に移動します。DataContext プロパティのために、新しいオブジェクトを作成して ManufacturerViewModel クラスを使用します(図 3 と図 4)
図 3: xamTreemap の [プロパティ] タブ
図 4: Blend オブジェクト ブラウザー
ItemsSource プロパティをビュー モデルの Manufacturers コレクションにバインドします。
[プロパティ] パネルで、[XamTreemap プロパティ] に移動し、ビュー モデルの Manufacturers コレクションを使用して Data Binding を ItemsSource プロパティに適用します (図 5 と図 6)。
図 5: ItemsSource のバインド
図 6: データ バインドの作成
新しい NodeBinders コレクションを作成します。
[XamTreemap プロパティ] で、NodeBinders に移動し、新しいコレクションを作成します(図 7)
図 7: 新しい Node Binders コレクションの作成
新しい Node Binder をコレクションに追加し、以下のプロパティを設定します。
TargetTypeName = Manufacturer
TextPath = Name
ValuePath = Revenue
注: Node Binder が追加され、xamTreemap がそのデータを表示します(図 8)
図 8: Blend での Treemap のプレビュー
新しい ValueMappers コレクションを作成します。
[XamTreemap プロパティ] で、ValueMappers に移動し、新しいコレクションを作成します(図 9)
図 9: 新しい Value Mappers コレクションの作成
新しい項目をコレクションに追加し、[オブジェクトの選択] ウィンドウから ColorMapper クラスを選択します。
図 10: ColorMapper の選択
新しい Value Mapper を作成した後で、以下のプロパティを設定します。
ValueTypeName = Manufacturer
TargetProperty = Fill
ValuePath = Revenue
From and To プロパティのカラーを選択します。
注: Color Mapper が追加され、xamTreemap がそのデータを表示します(図 11)
図 11: Blend での Color Mapper による Treemap のプレビュー
プロジェクトを保存します。
(オプション) 結果を確認します。
アプリケーションを実行します。手順を正しく実装したバインドには、Treemap は図 1 に示したように表示されます。