Introduction
In this article we will explore about Tree View control in Silverlight 3. We will see how can we expand and Collapse all in a single go.
Crating Silverlight Project
Fire up Expression Blend 3 and create a Silverlight Application. Name it as ExpandCollapseTreeViewSL3.
Now go ahead and add a Tree View control to your application.
Then you can add TreeViewItem into your Tree View.
Add several, and if you want to add children of any parent then select the particular TreeViewItem and add another Treeview Item.
I have created the below hierarchy:
If you see the design view, it will look similar to the following:
Here is the XAML code behind for the TreeView: {codecitation class="brush: xml; gutter: true;" width="650px"}
<controls:TreeView x:Name="MyTreeView" HorizontalAlignment="Left" Width="197" Margin="0,0,0,202">
<controls:TreeView.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="LightBlue" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</controls:TreeView.Background>
<controls:TreeViewItem Margin="0" Header="Item 1">
<controls:TreeViewItem Margin="0" Header="Sub Item 1"/>
</controls:TreeViewItem>
<controls:TreeViewItem Margin="0" Header="Item 2">
<controls:TreeViewItem Margin="0" Header="Sub Item 1"/>
<controls:TreeViewItem Margin="0" Header="Sub Item 2"/>
</controls:TreeViewItem>
<controls:TreeViewItem Margin="0" Header="Item 3">
<controls:TreeViewItem Margin="0" Header="Sub Item 1">
<controls:TreeViewItem Margin="0" Header="Sub Item 1"/>
</controls:TreeViewItem>
</controls:TreeViewItem>
</controls:TreeView>
{/codecitation} We will see how can we Expand all or Collapse all in a single button click.
Add two Buttons to your application saying Expand All and Collapse all. 
Now add Click Events for the above two Buttons. {codecitation class="brush: xml; gutter: true;" width="650px"}
<Button x:Name="btnExpand" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="75" Content="Expand All" Margin="0,0,0,176" Click="btnExpand_Click"/>
<Button x:Name="btnCollapse" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Content="Collapse All" Margin="0,0,2,176" Click="btnCollapse_Click"/>
{/codecitation} Expanding All
Now in the Event Handler for btnExapnd write the following code:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private void btnExpand_Click(object sender, System.Windows.RoutedEventArgs e)
{
for (int i = 0; i < MyTreeView.Items.Count; i++)
{
ExpandAllTreeViewItems((TreeViewItem)MyTreeView.ItemContainerGenerator.ContainerFromIndex(i));
}
}
{/codecitation}
Add the method ExpandAllTreeViewItems, and add following code:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private void ExpandAllTreeViewItems(TreeViewItem currentTreeViewItem)
{
if (!currentTreeViewItem.IsExpanded)
{
currentTreeViewItem.IsExpanded = true;
currentTreeViewItem.Dispatcher.BeginInvoke(() => ExpandAllTreeViewItems(currentTreeViewItem));
}
else
{
for (int i = 0; i < currentTreeViewItem.Items.Count; i++)
{
TreeViewItem child = (TreeViewItem)currentTreeViewItem.ItemContainerGenerator.ContainerFromIndex(i);
ExpandAllTreeViewItems(child);
}
}
}
{/codecitation} Collapsing All
Now in the Event Handler of btnExpandAll add the following code:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private void btnCollapse_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < MyTreeView.Items.Count; i++)
{
CollapseAllTreeViewItems((TreeViewItem)MyTreeView.ItemContainerGenerator.ContainerFromIndex(i));
}
}
{/codecitation}
Add the method CollapseAllTreeViewItems, and add the following code: {codecitation class="brush: csharp; gutter: true;" width="650px"}
private void CollapseAllTreeViewItems(TreeViewItem rootTreeViewItem)
{
Stack<TreeViewItem> treeViewItemsStack = new Stack<TreeViewItem>();
treeViewItemsStack.Push(rootTreeViewItem);
while (treeViewItemsStack.Count != 0)
{
TreeViewItem current = treeViewItemsStack.Pop();
current.IsExpanded = false;
for (int i = 0; i < current.Items.Count; i++)
{
treeViewItemsStack.Push(current.ItemContainerGenerator.ContainerFromIndex(i) as TreeViewItem);
}
}
}
{/codecitation} That’s it we are done, now run your application to see the Expand All and Collapse All Buttons in action. 
Enjoy Coding. Thank you
| About the Author |
 | | Diptimaya Patra |
Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.
Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra
|
|
|