Tuesday 29 June 2010

Expanded TreeViewItem Style in Silverlight TreeView

By default TreeView item child is not expanded. It remains collapsed. To make it expanded we have to apply following style in .xaml page where TreeViwe controls are used.


<controls:TreeView x:Name="trvLeftMenu"  BorderThickness="0,1,0,0" Margin="0" Width="auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                       ItemContainerStyle="{StaticResource expandedTreeViewItemStyle}">
</controls:TreeView>

ItemContainerStyle – is the expand property.
expandedTreeViewItemStyle – is the name of style.

Below is the calling style.

<UserControl.Resources>
<Style x:Key="expandedTreeViewItemStyle" TargetType="controls:TreeViewItem">
            <Setter Property="IsExpanded" Value="True" />
</Style>
</UserControl.Resources>


Treeview control of Silverlight

Using TreeView is pretty simple to use. It takes TreeViewItem as its child. Depending on child item we can feed TreeViewItem  to TreeView. If we need inner child we will feed TreeViewItem  to TreeViewItem . Like –

<controls:TreeView x:Name="trvLeftMenu"  BorderThickness="0,1,0,0" Margin="0" Width="auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> </controls:TreeView>

trvLeftMenu.Items.Clear();
for (int i = 0; i < builderList.Count; i++)
{
TreeViewItem item1 = new TreeViewItem();
for (int j = 0; j < builderList[i].SalesOffices.Count; j++)
{
      TreeViewItem soItem = new TreeViewItem();
      item1.Items.Add(soItem);
}
trvLeftMenu.Items.Add(item1);
}

Through this way we can build up a tree. Child item and inner child item binding. There are various properties of TreeView and TreeViewItem. Header property hold header name. We can bind image with text in stackpanel then bind that stackpanel as a Header of TreeView.
mhItem.Selected += new RoutedEventHandler(modelHomeItem_Selected);
If we apply Selected event it will execute when we click on items on run time.