如何将DataGrid的GroupItem的ContextMenu的MenuItem绑定到窗口或控件的DataContext？ [英] How do I bind the MenuItem of a ContextMenu of a DataGrid's GroupItem to the DataContext for the window or control?

问题描述

我正在使用的应用程序使用DataGrid向用户显示条目，并将这些条目分组。分组不限于每个条目的单个属性，单个条目可以在多个组中。用户可以随意创建组并将条目添加到这些组。

The application I'm working on uses a DataGrid to present entries to the user and these entries are grouped. The grouping is not tied to a single property of each entry, a single entry can be in multiple groups. The user is able to create groups at will and add entries to those groups.

我们希望用户能够直接从此视图编辑条目和组。要删除组，我们希望用户能够右键单击该组，然后从上下文菜单中选择删除组。

We want the user to be able to edit the entries and the groups directly from this view. To remove a group, we'd like the user to be able to right click on the group and select "Delete group" from the context menu.

能够为GroupItem的Expander提供上下文菜单，但不知道如何将Command或CommandParameter绑定到ViewModel。

I've been able to give the GroupItem's Expander a context menu, but have no idea how to bind the Command or CommandParameter to the ViewModel.

如何获得所需的结果？我知道这可能需要将上下文菜单移动到控件的不同部分，但是我们希望为组标题中的条目提供不同的上下文菜单。我们已经在实时代码中实现了这一点，但是在下面的示例中没有体现。

How do I achieve the results I seek? I appreciate that this might require "moving" the context menu to a different part of the control, but we want a different context menu for the entries to the group headers. This we have achieved in our live code, but is not represented in the example below.

这里是一个简化的示例，代表了我们要实现的目标。

Here is a simplified example to represent what we are trying to achieve.

XAML：

<Window x:Class="DataGridHeaderTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <CollectionViewSource x:Key="GroupedEntriesSource" Source="{Binding Entries}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Key"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

        <Style x:Key="GroupContainerStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander IsExpanded="True" Background="#414040">

                            <Expander.ContextMenu>
                                <ContextMenu>

                                    <!-- How do I bind Command and CommandParameter? -->
                                    <MenuItem Header="Delete group" Command="{Binding DeleteGroupCommand}" CommandParameter="{Binding}" />

                                </ContextMenu>
                            </Expander.ContextMenu>

                            <Expander.Header>
                                <Grid>
                                    <TextBlock Text="{Binding Path=Items[0].Key.Name}"/>
                                </Grid>
                            </Expander.Header>
                            <ItemsPresenter />
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <DataGrid ItemsSource="{Binding Source={StaticResource GroupedEntriesSource}}" AutoGenerateColumns="False">
            <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupContainerStyle}">
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>

            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Binding="{Binding Value.Name, Mode=OneWay}"/>
                <DataGridTextColumn Header="Data" Binding="{Binding Value.Val, UpdateSourceTrigger=LostFocus}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

后面的代码：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Input;

namespace DataGridHeaderTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            CreateData();

            DeleteGroupCommand = new TestCommand(DeleteGroup);

            DataContext = this;
            InitializeComponent();
        }

        void CreateData()
        {
            Entries = new ObservableCollection<KeyValuePair<Group, Entry>>();

            Group group1 = new Group() { Name = "Group1" };
            Group group2 = new Group() { Name = "Group2" };
            Entry entry1 = new Entry() { Name = "Entry1", Val = "Val1" };
            Entry entry2 = new Entry() { Name = "Entry2", Val = "Val2" };
            Entry entry3 = new Entry() { Name = "Entry3", Val = "Val3" };

            Entries.Add(new KeyValuePair<Group, Entry>(group1, entry1));
            Entries.Add(new KeyValuePair<Group, Entry>(group1, entry3));
            Entries.Add(new KeyValuePair<Group, Entry>(group2, entry2));
            Entries.Add(new KeyValuePair<Group, Entry>(group2, entry3));
        }

        void DeleteGroup(object group)
        {
            // I want to run this when "Delete group" is selected from the context menu of the Group Expander.
            // I want the Group object associated with the Group Expander passed as the parameter
        }

        public ObservableCollection<KeyValuePair<Group, Entry>> Entries { get; set; }
        public ICommand DeleteGroupCommand { get; set; }

        public class Group
        {
            public string Name { get; set; }
        }

        public class Entry
        {
            public string Name { get; set; }
            public string Val { get; set; }
        }

        public class TestCommand : ICommand
        {
            public delegate void ICommandOnExecute(object parameter);

            private ICommandOnExecute _execute;

            public TestCommand(ICommandOnExecute onExecuteMethod)
            {
                _execute = onExecuteMethod;
            }

            public event EventHandler CanExecuteChanged
            {
                add { CommandManager.RequerySuggested += value; }
                remove { CommandManager.RequerySuggested -= value; }
            }

            public bool CanExecute(object parameter)
            {
                return true;
            }

            public void Execute(object parameter)
            {
                _execute.Invoke(parameter);
            }
        }
    }
}

推荐答案

这应该是技巧：

XAML：

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" x:Name="root">
    <Window.Resources>
            <CollectionViewSource x:Key="GroupedEntriesSource" Source="{Binding Entries}">
                <CollectionViewSource.GroupDescriptions>
                    <PropertyGroupDescription PropertyName="Key"/>
                </CollectionViewSource.GroupDescriptions>
            </CollectionViewSource>


            <Style x:Key="GroupContainerStyle" TargetType="{x:Type GroupItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type GroupItem}">
                            <Expander IsExpanded="True" Background="#414040" Tag="{Binding ElementName=root, Path=DataContext}">
                                <Expander.ContextMenu>
                                    <ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
                                        <MenuItem Header="Delete group" Command="{Binding DeleteGroupCommand}" CommandParameter="{TemplateBinding DataContext}" />

                                    </ContextMenu>
                                </Expander.ContextMenu>

                                <Expander.Header>
                                    <Grid>
                                        <TextBlock Text="{Binding Path=Items[0].Key.Name}"/>
                                    </Grid>
                                </Expander.Header>
                                <ItemsPresenter />
                            </Expander>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>

        <Grid>
            <DataGrid ItemsSource="{Binding Source={StaticResource GroupedEntriesSource}}" AutoGenerateColumns="False">
                <DataGrid.GroupStyle>
                    <GroupStyle ContainerStyle="{StaticResource GroupContainerStyle}">
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <DataGridRowsPresenter/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </DataGrid.GroupStyle>

                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" Binding="{Binding Value.Name, Mode=OneWay}"/>
                    <DataGridTextColumn Header="Data" Binding="{Binding Value.Val, UpdateSourceTrigger=LostFocus}"/>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
</Window>

代码隐藏：

public partial class MainWindow : Window {
    public MainWindow() {
      InitializeComponent();
      CreateData();

      DeleteGroupCommand = new TestCommand(DeleteGroup);

      DataContext = this;

    }

    void CreateData() {
      Entries = new ObservableCollection<KeyValuePair<Group, Entry>>();

      Group group1 = new Group() { Name = "Group1" };
      Group group2 = new Group() { Name = "Group2" };
      Entry entry1 = new Entry() { Name = "Entry1", Val = "Val1" };
      Entry entry2 = new Entry() { Name = "Entry2", Val = "Val2" };
      Entry entry3 = new Entry() { Name = "Entry3", Val = "Val3" };

      Entries.Add(new KeyValuePair<Group, Entry>(group1, entry1));
      Entries.Add(new KeyValuePair<Group, Entry>(group1, entry3));
      Entries.Add(new KeyValuePair<Group, Entry>(group2, entry2));
      Entries.Add(new KeyValuePair<Group, Entry>(group2, entry3));
    }

    void DeleteGroup(object group) {
      // I want to run this when "Delete group" is selected from the context menu of the Group Expander.
      // I want the Group object associated with the Group Expander passed as the parameter
    }

    public ObservableCollection<KeyValuePair<Group, Entry>> Entries {
      get; set;
    }
    public ICommand DeleteGroupCommand { get; }

    public class Group {
      public string Name {
        get; set;
      }
    }

    public class Entry {
      public string Name {
        get; set;
      }
      public string Val {
        get; set;
      }
    }


  }

  public class TestCommand : ICommand {
    public delegate void ICommandOnExecute(object parameter);

    private ICommandOnExecute _execute;

    public TestCommand(ICommandOnExecute onExecuteMethod) {
      _execute = onExecuteMethod;
    }

    public event EventHandler CanExecuteChanged {
      add {
        CommandManager.RequerySuggested += value;
      }
      remove {
        CommandManager.RequerySuggested -= value;
      }
    }

    public bool CanExecute(object parameter) {
      return true;
    }

    public void Execute(object parameter) {
      _execute.Invoke(parameter);
    }
  }

您可能必须编辑CommandParameter的绑定，因此它将满足您的需求

You probably have to edit the Binding of the CommandParameter so it will fit your needs

编辑：

修复了Xaml以启用适当的功能复制粘贴

Fixed the Xaml to enable proper Copy-Paste

这篇关于如何将DataGrid的GroupItem的ContextMenu的MenuItem绑定到窗口或控件的DataContext？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！