Question

Silverlight 4 now include the option for creating a context menu upon right clicking. Can anyone provide me with an example of a treeview with a right click context menu for the treeview?

Ultimately I want a the menu to show different options depending upon the node depth selected – bonus points if the example includes this!

Answer 1

You can use this open source menu for this:

http://sl4popupmenu.codeplex.com

The control supports right click on TreeViews out of the box. The code has been adapted from the sample code on the homepage to use a TreeView instead of a DataGrid:

    private void GenerateMenu()
    {
        var data = new ObservableCollection<string>("Item 1,Item 2,Item 3,Item 4,Item 6,Item 7,Item 8".Split(','));
        TreeView treeView1 = new TreeView() { Margin = new Thickness(50), ItemsSource = data };
        this.LayoutRoot.Children.Add(dataGrid1);

        // Create the submenu
        var pmTimeSub = new PopupMenu();
        pmTimeSub.AddItem("Time Now", null);
        // Create the main menu
        var pm = new PopupMenu();
        pm.AddItem("Delete row", delegate { data.RemoveAt(dataGrid1.SelectedIndex); });
        pm.AddSeparator();
        pm.AddSubMenu(pmTimeSub, "Get Time ", "images/arrow.png", null, null, false, null); 
        // Attach the submenu pmTimeSub
        pm.AddSeparator();
        pm.AddItem("Demo2", delegate { this.Content = new Demo2(); });

        // Set dataGrid1 as the trigger element
        pm.AddTrigger(TriggerTypes.RightClick, treeView1);

        // Showing main menu
        pm.Showing += (sender, e) =>
        {
            pm.PopupMenuItem(0).Header = "Delete " + treeView1.SelectedItem;
            TreeViewItem tvi = pm.GetClickedElement<TreeViewItem>();

            // Add code to calculate the node depth here using the GetParentTreeViewItem method
            // Add code to modify the menu items according to the node depth value.

            pm.PopupMenuItem(0).IsVisible =
            pm.PopupMenuItem(1).IsVisible = tvi != null;
        };
        // Showing submenu
        pmTimeSub.Showing += delegate
        {
            pmTimeSub.PopupMenuItem(0).Header = DateTime.Now.ToLongTimeString();
        };
    }

Note that the code does not allow you to show different menus upon the node depth yet. To do this you can use the following method to get the parent of the TreeViewItem that was clicked:

 private static TreeViewItem GetParentTreeViewItem(DependencyObject item) 
 { 
     if (item != null) 
     { 
         DependencyObject parent = VisualTreeHelper.GetParent(item); 
         TreeViewItem parentTreeViewItem = parent as TreeViewItem; 
         return parentTreeViewItem ?? GetParentTreeViewItem(parent); 
     }    
     return null; 
 } 

From there you can determine depth of the node by calling the GetParentTreeViewItem function in a loop until the parent is null. You would place this code in the event where the menu is being shown and then add the necessary code in there to show the appropriate menu.

Hope this helps.