如何在Silverlight 4中使用上下文菜单创建Treeview?

时间:2010-07-11 17:06:14

标签: silverlight treeview contextmenu

Silverlight 4现在包含右键单击时创建上下文菜单的选项。任何人都可以为我提供树视图的示例,并为树视图提供右键单击上下文菜单吗?

最终我希望菜单显示不同的选项,具体取决于所选的节点深度 - 如果示例包含此奖励积分!

2 个答案:

答案 0 :(得分:2)

您可以使用此开源菜单:

http://sl4popupmenu.codeplex.com

控件支持右键单击TreeViews开箱即用。代码已根据主页上的示例代码进行了调整,以使用TreeView而不是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();
        };
    }

请注意,代码不允许您在节点深度上显示不同的菜单。为此,您可以使用以下方法获取单击的TreeViewItem的父级:

 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。您可以将此代码放在显示菜单的事件中,然后在其中添加必要的代码以显示相应的菜单。

希望这有帮助。

答案 1 :(得分:0)

所以,我尝试了上面的代码,下载并尝试包含在我的现有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);
            }
        }