バージョン

XAML コードを使用して xamTreemap を追加

始める前に

このトピックでは、XAML を使用して xamTreemap コントロールを独自の アプリケーション へ追加する基本的な手順を説明します。コントロールでは、データ オブジェクト モデルを DataContext プロパティにマップする必要があります。トピックは簡易データオブジェクトモデルを提供しますが、カスタムモデルを作成することも可能です。

達成すること

アプリケーションへバインドしたサンプルデータのある xamTreemap コントロールのインスタンスを追加します。

次の手順を実行します

注: このサンプルは xamTreemap コントロールの DataContext プロパティのバインドにサンプル データ モデルを使用しています。サンプル データ モデルは ManufacturerViewModel からダウンロードできます。

  1. Microsoft® WPF アプリケーションを作成します。

  2. 以下の NuGet パッケージをアプリケーションに追加します。

    • Infragistics.WPF.Treemap

    NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。

  1. 以下の XML 名前空間宣言を追加します。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:models="clr-namespace:DATA_MODEL_NAMESPACE"

  1. ManufacturerViewModel へバインドされた DataContext  および Manufacturers プロパティへバインドされた ItemsSource と共に xamTreemap コントロールのインスタンスを追加します。

XAML の場合:

<ig:XamTreemap ItemsSource="{Binding Manufacturers}">
    <ig:XamTreemap.DataContext>
        <models:ManufacturerViewModel />
    </ig:XamTreemap.DataContext>
    <ig:XamTreemap.NodeBinders>
        <!--ノード バインダーを追加します-->
    </ig:XamTreemap.NodeBinders>
    <ig:XamTreemap.ValueMappers>
        <!--値マッパーを追加します-->
    </ig:XamTreemap.ValueMappers>
</ig:XamTreemap>

  1. ノード バインダー をコントロールの NodeBinders コレクションに追加します。

XAML の場合:

<ig:XamTreemap ItemsSource="{Binding Manufacturers}">
    <ig:XamTreemap.DataContext>
        <models:ManufacturerViewModel />
    </ig:XamTreemap.DataContext>
    <ig:XamTreemap.NodeBinders>
        <ig:NodeBinder TargetTypeName="Manufacturer"
                       ValuePath="Revenue"
                       TextPath="Name" />
    </ig:XamTreemap.NodeBinders>
    <ig:XamTreemap.ValueMappers>
        <!--値マッパーを追加します-->
    </ig:XamTreemap.ValueMappers>
</ig:XamTreemap>
xamTreemap Adding xamTreemap Using Xaml Procedural Code 01.png

  1. 値のマッパー をコントロールの ValueMappers コレクションに追加します。

XAML の場合:

<ig:XamTreemap ItemsSource="{Binding Manufacturers}">
    <ig:XamTreemap.DataContext>
        <models:ManufacturerViewModel />
    </ig:XamTreemap.DataContext>
    <ig:XamTreemap.NodeBinders>
        <ig:NodeBinder TargetTypeName="Manufacturer"
                       ValuePath="Revenue"
                       TextPath="Name" />
    </ig:XamTreemap.NodeBinders>
    <ig:XamTreemap.ValueMappers>
        <ig:ColorMapper ValueTypeName="Manufacturer"
                        TargetProperty="Fill"
                        ValuePath="Revenue"
                        From="#90FF0000"
                        To="#90008000"/>
    </ig:XamTreemap.ValueMappers>
</ig:XamTreemap>
xamTreemap Adding xamTreemap Using Xaml Procedural Code 02.png

  1. アプリケーションを保存して実行します。

関連トピック