Version

Configuring Expanded/Collapsed Node State (xamDataTree)

By default, on first load, the xamDataTree™ control is displayed with all the nodes collapsed; each parent node appears with an expansion icon displayed next to it. Clicking on this icon will expand that particular parent node.

However, you can override the first load default behavior by displaying certain or all nodes as expanded. You can achieve this by setting the XamDataTreeNode object’s IsExpanded property.

The following code demonstrates how to achieve this.

In Visual Basic:

MyTree.Nodes(0).IsExpanded = true

In C#:

MyTree.Nodes[0].IsExpanded = true;

You can also bind the expansion of a node to a particular field on your data object by setting the NodeLayout object’s IsExpandedMemberPath to a field on your object.

In XAML:

<ig:NodeLayout Key="CategoryLayout" TargetTypeName="Category" IsExpandedMemberPath="UnitsInStock" DisplayMemberPath="CategoryName">

You can display custom icons for the expanded and collapsed states of each node in the xamDataTree control. You can achieve this by defining a data template for the ExpandedIconTemplate and CollapsedIconTemplate properties of the xamDataTree control, or you can set them individually for each node layout.

The following code snippet demonstrates how to set icons for nodes’ expanded and collapsed states.

In XAML:

<ig:XamDataTree x:Name="MyTree">
   <ig:XamDataTree.CollapsedIconTemplate>
      <DataTemplate>
         <Image Source="/xamWebChart_XAML;component/Images/MoveToFolder32.png"/>
      </DataTemplate>
   </ig:XamDataTree.CollapsedIconTemplate>
   <ig:XamDataTree.ExpandedIconTemplate>
      <DataTemplate>
         <Image Source="/xamWebChart_XAML;component/Images/Open32.png"/>
      </DataTemplate>
   </ig:XamDataTree.ExpandedIconTemplate>
   <!-- TODO: Add xamDataTree Items -->
</ig:XamDataTree>
Expanded Collapsed Icon Templates 01.png

Related Topics