-
Node with expansion indicators (1st priority)
-
Node Layout (2nd priority)
-
XamNetworkNode globally (3rd priority)
This topic demonstrates how to show and hide the children nodes on the xamNetworkNode™ control.
The xamNetworkNode control currently supports three ways to show and hide child nodes:
Show/Hide using the Expansion indicator
Show/Hide without Expansion indicator, using code behind
Enter key on the keyboard (when expansion indicators are visible)
In addition to the default modes, any node can hide itself by setting the node’s Visibility property to “Collapsed”.
The operation of hiding and showing a child node is controlled by the connected parent node by:
Using Expansion indicator
With Mouse click on expansion indicators
With Enter key on the keyboard while the expansion indicator is visible
Using IsExpanded property in code behind, while expansion indicators are disabled
Setting the IsExpanded property.
Options: [Visible | Collapsed | Hidden]
Data Source
Any object that implements IEnumerable (e.g. List, Collection, etc.).
To begin, please read the Getting Started with xamNetworkNode topic as this tutorial uses the code from the "Getting Started" topic as a starting point.
In addition, a few properties must be set in order to achieve the desired functionality.
Properties to set on xamNetworkNode:
ExpansionIndicatorVisibility – [Visible | Collapsed]. The following priority will take place from highest to lowest when specified:
Node with expansion indicators (1st priority)
Node Layout (2nd priority)
XamNetworkNode globally (3rd priority)
Properties to set on NetworkNodeNode:
IsExpanded – [true | false]
The following code example and the screenshot demonstrate enabling expansion indicator on the NetworkNode control for using the plus/minus symbol to show/hide children of the node. While the expansion indicator is enabled, the Enter key on the keyboard can also be used to Show/Hide the children of the selected node.
In XAML:
<ig:XamNetworkNode
ExpansionIndicatorVisibility="Visible">
</ig:XamNetworkNode>In Visual Basic:
node.ExpansionIndicatorVisibility = Visibility.VisibleIn C#:
node.ExpansionIndicatorVisibility = Visibility.Visible;The Figure 1 displays the xamNetworkNode with expansion indicators enabled on the parent node. The parent nodes have connections to the child nodes that can be shown and hidden. The plus sign indicates that the child nodes are hidden.
Figure 1: Hiding/Showing the nodes with expansion indicators.
Use the IsExpanded property of the NetworkNode control (in code behind) to Show/Hide the children of a selected node. Note that since the XamNetworkNode does not expose the Node object in XAML, the node expansion needs to be implemented in code behind.
In Visual Basic:
node.IsExpanded = trueIn C#:
node.IsExpanded = True;Figure 2 shows the selected node about to be hidden using code behind by setting IsExpanded property. The selected node has three child nodes.
Figure 2: Hiding/Showing nodes in code behind without expansion indicators.
Figure 3 shows the parent node from above, hiding its three children. You may also notice that the location of the node is changed.
The reason for the control to rearrange the nodes is because xamNetworkNode recalculates the nodes after changes being made and displays with an optimum layout positioning in the view.
Figure 3: Nodes rearanged after Hiding/Showing operation.