Adding xamDataTree to Your Page

Before You Begin

This topic is designed to get you up and running as quickly as possible by describing the basic steps required for adding the xamDataTree control to your page using procedural code and XAML.

Assumptions:

This topic assumes that you have already configured a data source. For more information, see the Data Binding topic.

What You Will Accomplish

You will create a basic xamDataTree control with checkboxes and editing functionality. If you want to add additional functionality such as drag and drop, follow the steps in the appropriate topics and add the code to this basic xamDataTree.

Follow these Steps

Create a Microsoft® WPF™ project.
Add the following NuGet package to your application:
- Infragistics.WPF.DataTree
  
  For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Place the using/Imports directives in your code behind or add an XML namespace declaration for xamDataTree.

In XAML:
```
xmlns:ig="http://schemas.infragistics.com/xaml"
```
In Visual Basic:
```
Imports Infragistics.Controls.Menus
```
In C#:
```
using Infragistics.Controls.Menus;
```

Add an instance of the xamDataTree control to the default Grid layout panel named LayoutRoot. If you are doing this in procedural code, you can handle the user control’s Loaded event and place the code in the event handler.

In XAML:
```
<ig:XamDataTree x:Name="MyTree">
</ig:XamDataTree>
```
In Visual Basic:
```
Dim MyTree As New XamDataTree()
```
In C#:
```
XamDataTree MyTree = new XamDataTree();
```

Bind the xamDataTree control to data by setting the ItemsSource property. For more information, see the Binding xamDataTree to Data topic. Configure the GlobalNodeLayouts object based on your data source; in this sample, we will assume that there are Category and Product objects that contain CategoryName and ProductName properties.

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

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

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

Add the CheckBoxSettings object to the xamDataTree control to enable check boxes. For more information, see the Configuring Check Boxes Visibility (xamDataTree) topic. Set the CheckBoxVisibility property to True.

In XAML:

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

In Visual Basic:

MyTree.CheckBoxSettings.CheckBoxVisibility = Visibility.Visible

In C#:

MyTree.CheckBoxSettings.CheckBoxVisibility = Visibility.Visible;

Add the EditingSettings object to the xamDataTree control to enable editing. For more information, see the Configuring Editing (xamDataTree) topic. Set the AllowEditing property to True.

Note

Note:

When enabling editing, ensure that the property is getable/setable.

In XAML:
```
<ig:XamDataTree.EditingSettings>
   <ig:TreeEditingSettings AllowEditing="True"/>
</ig:XamDataTree.EditingSettings>
```
In Visual Basic:
```
MyTree.EditingSettings.AllowEditing = True
```
In C#:
```
MyTree.EditingSettings.AllowEditing = true;
```

If you are creating the xamDataTree control using procedural code, add the instance of the xamDataTree to the Grid panel’s Children collection.

In Visual Basic:
```
LayoutRoot.Children.Add(MyTree)
```
In C#:
```
LayoutRoot.Children.Add(MyTree);
```

Save and run your application.

Related Topics

About xamDataTree

Binding xamDataTree to Data

Configuring xamDataTree

WPF | Help Topics

Adding xamDataTree to Your Page

Before You Begin

What You Will Accomplish

Follow these Steps