バージョン

xamDataTree をページに追加

始める前に

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

前提:

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

達成すること

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

次の手順を実行します

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

  2. ソリューション エクスプローラーで次の参照をプロジェクトに追加します。

..InfragisticsWPF4.v20.1.dll ..InfragisticsWPF4.Controls.Menus.XamDataTree.v20.1.dll ..InfragisticsWPF4.DragDrop.v20.1.dll

..InfragisticsWPF4.DataManager.v20.1.dll

  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 の構成