如何在Silverlight 4中使用上下文菜單創建Treeview？

Question

Silverlight 4現在包含用於右鍵單擊時創建上下文菜單的選項。任何人都可以爲我提供一個樹視圖的例子，爲樹視圖提供一個右鍵單擊上下文菜單？

最終，我想要一個菜單​​根據所選節點深度顯示不同的選項 - 如果示例中包含此選項，則可獲得額外獎勵！

Answer 1

你可以使用這個開源的菜單如下：

http://sl4popupmenu.codeplex.com

控制支持上的TreeView右鍵開箱。該代碼已被改編自樣本代碼的網頁上，而不是使用一個DataGrid一個TreeView：

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(); 
     }; 
    } 

注意，代碼不允許您展現於節點的深度不同的菜單呢。要做到這一點，你可以用下面的方法來獲取被點擊的樹型視圖的父：

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; 
} 

從那裏，你可以通過調用GetParentTreeViewItem功能在一個循環，直到父爲null確定節點的深度。您可以在顯示菜單的情況下放置此代碼，然後在其中添加必要的代碼以顯示相應的菜單。

希望這會有所幫助。

Answer 2

所以，我試了上面的代碼，下載並試圖包含在我現有的Silverlight應用程序中。我能找到一個更簡單的解決方案。這將添加一個上下文菜單，允許右鍵單擊分支（標題或父節點）。

 private ContextMenu menu; 

     foreach(var model in models) 
     { 

      // Populate the Tree View Control 
      var cb = new CheckBox {Content = model.Value}; 
      cb.Click += new RoutedEventHandler(cb_Click); 

      var header = new TreeViewItem {Header = cb}; 

      // Menu for Header 
      menu = new ContextMenu(); 
      MenuItem setAsRows = new MenuItem(); 
      setAsRows.Header = "Set as Rows"; 
      setAsRows.Click += new RoutedEventHandler(setAsRows_Click); 
      menu.Items.Add(setAsRows); 
      MenuItem addToRows = new MenuItem(); 
      addToRows.Header = "Add to Rows"; 
      addToRows.Click += new RoutedEventHandler(addToRows_Click); 
      menu.Items.Add(addToRows); 
      MenuItem setAsCols = new MenuItem(); 
      setAsCols.Header = "Set as Columns"; 
      menu.Items.Add(setAsCols); 
      MenuItem addToCols = new MenuItem(); 
      addToCols.Header = "Add to Columns"; 
      menu.Items.Add(addToCols); 
      header.ContextMenu = menu; 
      treeView1.Items.Add(header); 

      var thisItem = treeView1.Items; 

      // Model Contexts 
      var contexts = myFramework.GetConceptsOfModel(model.Key); 
      // Add Leafs To Branch 
      foreach(var context in contexts) 
      { 
       cb = new CheckBox {Content = context.Value.ToString()}; 
       header.Items.Add(cb); 
      } 
     }