バージョン

xamDataTree をページに追加

始める前に

このトピックではユーザーができるだけ早く操作に慣れることができるよう、プロシージャー コードおよび XAML を使用して xamDataTree コントロールをページに追加するために必要な基本手順について説明します。

前提:

このトピックは、データ ソースが構成されていることが前提となっています。詳細は 「データ バインド」を参照してください。

達成すること

チェックボックスおよび編集機能で基本的な xamDataTree コントロールを作成します。ドラッグ アンド ドロップなどの追加機能を追加したい場合、適切なトピックの手順に従い、コードをこの基本的な xamDataTree に追加します。

次の手順を実行します

  1. Microsoft® WPF™ プロジェクトを作成します。

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

    • Infragistics.WPF.DataTree

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

  1. コード ビハインドに using/Imports のディレクティブを配置するか xamDataTree の XML 名前空間宣言を追加します。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"

Visual Basic の場合:

Imports Infragistics.Controls.Menus

C# の場合:

using Infragistics.Controls.Menus;

  1. xamDataTree コントロールのインスタンスを LayoutRoot という名前のデフォルトのグリッド レイアウト パネルに追加します。プロシージャー コードでこれを行う場合、ユーザー コントロールの Loaded イベントを処理し、イベント ハンドラーにこのコードを配置することができます。

XAML の場合:

<ig:XamDataTree x:Name="MyTree">
</ig:XamDataTree>

Visual Basic の場合:

Dim MyTree As New XamDataTree()

C# の場合:

XamDataTree MyTree = new XamDataTree();

  1. ItemsSource プロパティを設定することによって、xamDataTree コントロールをデータにバインドします。詳細は、 xamDataTree をデータにバインドを参照してください。データ ソースに基づき GlobalNodeLayouts オブジェクトを構成します。このサンプルでは、CategoryName および ProductName プロパティを含む Category および Product オブジェクトがあることを前提とします。

XAML の場合:

<ig:XamDataTree
    x:Name="MyTree"
    ItemsSource="{Binding Source={StaticResource DataUtil}, Path=CategoriesAndProducts}">
    <ig:XamDataTree.GlobalNodeLayouts>
        <ig:NodeLayout
            Key="CategoryLayout"
            TargetTypeName="Category"
            DisplayMemberPath="CategoryName">
        </ig:NodeLayout>
        <ig:NodeLayout
            Key="ProductLayout"
            TargetTypeName="Product"
            DisplayMemberPath="ProductName">
        </ig:NodeLayout>
    </ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>

Visual Basic の場合:

MyTree.ItemsSource = DataUtil.CategoriesAndProducts

Dim mylayout As New NodeLayout()
mylayout.Key = "CategoryLayout"
mylayout.TargetTypeName = "Category"
mylayout.DisplayMemberPath = "CategoryName"

Dim mylayout2 As New NodeLayout()
mylayout2.Key = "ProductLayout"
mylayout2.TargetTypeName = "Product"
mylayout2.DisplayMemberPath = "ProductName"

MyTree.GlobalNodeLayouts.Add(mylayout)
MyTree.GlobalNodeLayouts.Add(mylayout2)

C# の場合:

MyTree.ItemsSource = DataUtil.CategoriesAndProducts;

NodeLayout mylayout = new NodeLayout();
mylayout.Key = "CategoryLayout";
mylayout.TargetTypeName = "Category";
mylayout.DisplayMemberPath = "CategoryName";

NodeLayout mylayout2 = new NodeLayout();
mylayout2.Key = "ProductLayout";
mylayout2.TargetTypeName = "Product";
mylayout2.DisplayMemberPath = "ProductName";

MyTree.GlobalNodeLayouts.Add(mylayout);
MyTree.GlobalNodeLayouts.Add(mylayout2);

  1. チェックボックスを有効にするために CheckBoxSettings オブジェクトを xamDataTree コントロールに追加します。詳細については、 チェックボックスの表示状態の構成を参照してください。CheckBoxVisibility プロパティを True に設定します。

XAML の場合:

<ig:XamDataTree.CheckBoxSettings>
   <ig:CheckBoxSettings CheckBoxVisibility="Visible"/>
</ig:XamDataTree.CheckBoxSettings>

Visual Basic の場合:

MyTree.CheckBoxSettings.CheckBoxVisibility = Visibility.Visible

C# の場合:

MyTree.CheckBoxSettings.CheckBoxVisibility = Visibility.Visible;

  1. 編集を有効にするために EditingSettings オブジェクトを xamDataTree コントロールに追加します。詳細については、 編集の構成を参照してください。AllowEditing プロパティを True に設定します。

Note

注: 編集を有効にする場合、プロパティが取得可能/設定可能であることを確認してください。

XAML の場合:

<ig:XamDataTree.EditingSettings>
   <ig:TreeEditingSettings AllowEditing="True"/>
</ig:XamDataTree.EditingSettings>

Visual Basic の場合:

MyTree.EditingSettings.AllowEditing = True

C# の場合:

MyTree.EditingSettings.AllowEditing = true;

  1. プロシージャー コードを使用して xamDataTree コントロールを作成する場合、xamDataTree のインスタンスを Grid パネルの Children コレクションに追加します。

Visual Basic の場合:

LayoutRoot.Children.Add(MyTree)

C# の場合:

LayoutRoot.Children.Add(MyTree);

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

関連トピック

xamDataTree について

xamDataTree をデータにバインド

xamDataTree の構成