How to use TreeView in XAML and Windows phone application Part 2?

Question

REF: Before proceed please read Treeview in XAML first Part then continue.

We can use TreeView.Items.Remove or the TreeView.Items.RemoveAt method to delete an item from the collection of items in the TreeView. The RemoveAt method takes the index of the item in the collection. 

Now, we modify our application and add a new button called Delete Item. The XAML code for this button looks as in the following:

 <Button Height="23" Margin="226,14,124,0" Name="DeleteButton"   
 VerticalAlignment="Top" Click="DeleteButton_Click">  
 Delete Item</Button>​

The button click event handler looks as in the following. On this button click, we find the index of the selected item and use the TreeView.Items.RemoveAt method as in the following. 

private void DeleteButton_Click(object sender, RoutedEventArgs e)  
{  
        TreeView1.Items.RemoveAt  
       (TreeView1.Items.IndexOf(TreeView1.SelectedItem));                    
}  ​ 

The preceding code removes root items from the TreeView, not the sub-items. To remove sub items, we need to find the selected item and then we need to use the TreeViewItem.Items.RemoveAt method.

A TreeView control is placed inside a StackPanel that contains a ScrollViewer control so when the width or height of the panel is more than the visible area, the scroll viewer becomes active and provides horizontal and vertical scrolling functionality. 

To style a TreeView, we can use individual TreeViewItems and set their properties. Alternatively, we can use System.Resources and set Style property. The following code snippet sets TreeViewItem foreground, font size and font weight properties. 

1. <Window.Resources>  
       <Style TargetType="{x:Type TreeViewItem}">  
           <Setter Property="Foreground" Value="Blue"/>              
           <Setter Property="FontSize" Value="12"/>  
           <Setter Property="FontWeight" Value="Bold" />  
       </Style>  
   </Window.Resources> 

                                             Figure 4. 

We can put any controls inside a TreeViewItem such as an image or text. To display an image side by side text, I simply put an Image and TextBlock control within a StackPanel. The Image.Source property takes the name of the image you would like to display in the Image control and TextBlock.Text property takes a string that you would like to display in the TextBlock.

The following code snippet adds image and text to a TreeViewItem. The key here is to add an image and text to the header of TreeViewItems. 

1. <TreeViewItem Name="Child1">  
       <TreeViewItem.Header>  
           <StackPanel Orientation="Horizontal">  
               <Image Source="coffie.jpg" Height="30"></Image>  
               <TextBlock Text="Coffie"></TextBlock>  
           </StackPanel>  
       </TreeViewItem.Header>   
   </TreeViewItem>    

After changing my code for all 5 TreeViewItems, 


                              Figure 5. 

If you put a CheckBox control inside TreeViewItems, you generate a TreeView control with checkboxes in it. The CheckBox can host controls within it as well. For instance, we can put an image and text block as content of a CheckBox.

The following code snippet adds a CheckBox with an image and text to a TreeViewItem.

1. <TreeViewItem Name="Child1">  
       <TreeViewItem.Header>  
           <CheckBox Name="CoffieCheckBox">  
               <StackPanel Orientation="Horizontal">  
               <Image Source="coffie.jpg" Height="30"></Image>  
               <TextBlock Text="Coffie"></TextBlock>  
           </StackPanel>  
           </CheckBox>  
       </TreeViewItem.Header>   
   </TreeViewItem>   

I change the code of TreeViewItems and add the following CheckBoxes to the items. As you may see, I have set the name of the CheckBoxes using the Name property. If you need to access these CheckBoxes, you may access them in the code using their Name property. 

​PART 3: will update soon :)