WPF 绑定 ContextMenu MenuItem 的 ItemsSource

WPF Binding ContextMenu MenuItem's ItemsSource

提问by MaorB

I'm trying to bind a single MenuItem's ItemsSource to a ReadOnlyCollection<string>located in the ViewModel. I've read that the ContextMenu is not under the main Visual tree so i can't bind it directly, but any method i try doesn't work. I have the code snippet please let me know what am i doing wrong.

我正在尝试将单个 MenuItem 的 ItemsSource 绑定到ReadOnlyCollection<string>位于 ViewModel 中的一个。我读过 ContextMenu 不在主 Visual 树下，所以我不能直接绑定它，但我尝试的任何方法都不起作用。我有代码片段，请让我知道我做错了什么。

<Window>
…
<DockPanel>
  <!-- Task bar Icon -->
  <tb:TaskbarIcon x:Name="AppNotifyIcon"
       DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
       ToolTipText="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.MainTitle}">
      <tb:TaskbarIcon.ContextMenu>
          <ContextMenu DataContext="{Binding Path=PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
                <MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.NotifyIconOpen}" Click="MenuItem_Open_Click"/>
                <MenuItem Header="Technologies" ItemsSource="{Binding to the ReadOnlyCollection of string in ViewModel}">
                   <MenuItem.ItemContainerStyle>
                       <Style>
                          <Setter Property="MenuItem.Command" Value="{Binding <!--Command in ViewModel-->, RelativeSource={RelativeSource AncestorType=Window}}"/>
                          <Setter Property="MenuItem.CommandParameter" Value="{Binding}"/> <!—Binding to the menuItem Header item -->
                       </Style>
                   </MenuItem.ItemContainerStyle>
               </MenuItem>
               <MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.NotifyIconExit}" Click="MenuItem_Exit_Click"/>
          </ContextMenu>
      </tb:TaskbarIcon.ContextMenu>
   </tb:TaskbarIcon>
…
</DockPanel>

I am trying to bind the second MenuItem's ItemsSource and inside it's ItemContainerStyle i want to bind the command and the commandParameter. **Update: ** i'm using hardcodet's TaskbarIcon for wpf, if it matters.

我正在尝试绑定第二个 MenuItem 的 ItemsSource，在它的 ItemContainerStyle 中，我想绑定命令和 commandParameter。**更新：** 如果重要的话，我正在为 wpf 使用 hardcodet 的 TaskbarIcon。

Thanks

谢谢

回答by Ilan

Try check this out: 1. XAML Code:

试试看这个： 1. XAML 代码：

        <DataGrid x:Name="SelectDataGrid" 
              ItemsSource="{Binding Persons}" HorizontalAlignment="Left" CellEditEnding="SelectDataGrid_OnCellEditEnding"
              VerticalAlignment="Top" AutoGenerateColumns="False" Loaded="SelectDataGrid_OnLoaded">
        <DataGrid.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Technologies" ItemsSource="{Binding MenuItems}">
                    <MenuItem.ItemContainerStyle>
                        <Style TargetType="MenuItem">
                            <Setter Property="Command" Value="{Binding Command}"/>
                            <Setter Property="Header" Value="{Binding Content}"/>
                            <Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContextMenu}}, Path=DataContext}"/>
                        </Style>
                    </MenuItem.ItemContainerStyle>
                </MenuItem>
            </ContextMenu>
        </DataGrid.ContextMenu>
        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Command="{Binding HelloCommand}"></Button>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn></DataGrid>

2. DataContext of the context menu is the same as datagrid and window. 3. Inside the DataContext put the next code:

2. 上下文菜单的DataContext 与datagrid 和window 相同。3. 在 DataContext 中放置下一个代码：

    private void Init()
    {
        MenuItems = new ObservableCollection<MenuItemObject>(new List<MenuItemObject>
        {
            new MenuItemObject {Command = new RelayCommand<object>(Execute), Content = "A"},
            new MenuItemObject {Command = new RelayCommand<object>(Execute), Content = "B"},
            new MenuItemObject {Command = new RelayCommand<object>(Execute), Content = "C"},
            new MenuItemObject {Command = new RelayCommand<object>(Execute), Content = "D"},
        });
    }

    public ObservableCollection<MenuItemObject> MenuItems { get; set; }

    private void Execute(object o)
    {

    }

4. MenuItemsObject model code:

4.MenuItemsObject模型代码：

public class MenuItemObject:BaseObservableObject
{
    private ICommand _command;
    private string _content;

    public ICommand Command
    {
        get { return _command; }
        set
        {
            _command = value;
            OnPropertyChanged();
        }
    }

    public string Content
    {
        get { return _content; }
        set
        {
            _content = value;
            OnPropertyChanged();
        }
    }
}

5. MVVM parts implementation:

5、MVVM部分实现：

    public class BaseObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    protected virtual void OnPropertyChanged<T>(Expression<Func<T>> raiser)
    {
        var propName = ((MemberExpression)raiser.Body).Member.Name;
        OnPropertyChanged(propName);
    }

    protected bool Set<T>(ref T field, T value, [CallerMemberName] string name = null)
    {
        if (!EqualityComparer<T>.Default.Equals(field, value))
        {
            field = value;
            OnPropertyChanged(name);
            return true;
        }
        return false;
    }
}

public class RelayCommand<T> : ICommand
{
    readonly Action<T> _execute;
    readonly Func<T, bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<T> execute, Func<T, bool> canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public void RefreshCommand()
    {
        var cec = CanExecuteChanged;
        if (cec != null)
            cec(this, EventArgs.Empty);
    }

    public bool CanExecute(object parameter)
    {
        if (_canExecute == null) return true;
        return _canExecute((T)parameter);
    }

    public void Execute(object parameter)
    {
        _execute((T)parameter);
    }
}

public class RelayCommand : RelayCommand<object>
{
    public RelayCommand(Action execute, Func<bool> canExecute = null)
        : base(_ => execute(),
            _ => canExecute == null || canExecute())
    {

    }
}

1. Call to Init method to generate toy menu item's collection DataContext.

2. An Execute is the method called when some menu item is pressed.

6. 调用 Init 方法以生成玩具菜单项的集合 DataContext。

7. Execute 是在按下某个菜单项时调用的方法。

That is all. I'will be glad to help if there will be problems with the code. Regards,

就这些。如果代码有问题，我很乐意提供帮助。问候，

回答by MaorB

Ok, I have found the problem thanks to Ilan's suggestion in the comments of using snoop utility. I saw that in the visual tree, the ContextMenu didn't have its PlacementTarget to point to its parent, the TaskbarIcon (Weird..), but it had an Attached Property called TaskbarIcon.ParentTaskbarIcon from the TaskbarIcon, so i binded the ContextMenu's DataContext to the TaskbarIcon.ParentTaskbarIcon.Tag and that fixed it all.

好的，感谢 Ilan 在使用 snoop 实用程序的评论中的建议，我找到了问题。我在可视化树中看到，ContextMenu 没有它的 PlacementTarget 指向它的父级 TaskbarIcon (Weird..)，但它有一个来自 TaskbarIcon 的名为 TaskbarIcon.ParentTaskbarIcon 的附加属性，所以我绑定了 ContextMenu 的 DataContext到 TaskbarIcon.ParentTaskbarIcon.Tag 并修复了所有问题。

<Window>
...
<DockPanel>
            <!-- Task bar Icon -->
            <tb:TaskbarIcon x:Name="AppNotifyIcon"
                        IconSource="pack://application:,,,/Icons/HwServerIcon.ico"
                        Tag="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                        ToolTipText="{Binding Tag, RelativeSource={RelativeSource Self}}"><!--{Binding Source={StaticResource LocalizedStrings}, Path=Strings.MainTitle}-->
                <tb:TaskbarIcon.ContextMenu>
                    <ContextMenu DataContext="{Binding Path=(tb:TaskbarIcon.ParentTaskbarIcon).Tag, RelativeSource={RelativeSource Self}}">
                        <MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.NotifyIconOpen}" Click="MenuItem_Open_Click"/>
                        <MenuItem Header="Technologies" ItemsSource="{Binding TechnologiesNames}">
                            <MenuItem.ItemContainerStyle>
                                <Style>
                                    <Setter Property="MenuItem.Command" Value="{Binding DataContext.OpenTechnology, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}"/>
                                    <Setter Property="MenuItem.CommandParameter" Value="{Binding}"/>
                                </Style>
                            </MenuItem.ItemContainerStyle>
                        </MenuItem>
                        <MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.NotifyIconExit}" Click="MenuItem_Exit_Click"/>
                    </ContextMenu>
                </tb:TaskbarIcon.ContextMenu>
            </tb:TaskbarIcon>

So, the TaskbarIcon's Tag is pointing the Window's DataContext and the ContextMenu's DataContext is pointing the Taskbar's attached property ParentTaskbarIcon.Tag and from now every binding is performed like it was under the window in the visual tree.

因此，TaskbarIcon 的 Tag 指向 Window 的 DataContext，而 ContextMenu 的 DataContext 指向 Taskbar 的附加属性 ParentTaskbarIcon.Tag，从现在开始，每个绑定都像在可视化树中的窗口下一样执行。

回答by Matthew Hilgenfeld

For a context menu in a ListBox I add my DataContext to the parent control's tag, and find it in a relative source binding to the placement target. There are many questions on SO regarding this though, and some of those may address more specific instances.

对于 ListBox 中的上下文菜单，我将我的 DataContext 添加到父控件的标记，并在与放置目标的相对源绑定中找到它。尽管如此，关于 SO 有很多问题，其中一些可能会解决更具体的情况。

<ListBox ItemsSource="{Binding ItemList}"
         SelectedItem="{Binding SelectedItem}"
         Tag="{Binding}">
                <ListBox.ContextMenu>
                    <ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
                        <MenuItem Header="Delete" 
                                  Command="{Binding Path=DeleteCommand}"/>
                    </ContextMenu>
                </ListBox.ContextMenu>
            </ListBox>

So for your example specifically:

所以对于你的例子，特别是：

<tb:TaskbarIcon x:Name="AppNotifyIcon"
                DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                ToolTipText="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.MainTitle}"
                Tag="{Binding}">
    <tb:TaskbarIcon.ContextMenu>
        <ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
            <MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.NotifyIconOpen}" Click="MenuItem_Open_Click"/>
            <MenuItem Header="Technologies" ItemsSource="{Binding TechnologyList}">
               <MenuItem.ItemContainerStyle>
                   <Style>
                      <Setter Property="MenuItem.Command" Value="{Binding VmCommand}"/>
                      <Setter Property="MenuItem.CommandParameter" Value="{Binding}"/>
                   </Style>
               </MenuItem.ItemContainerStyle>
           </MenuItem>
           <MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=Strings.NotifyIconExit}" Click="MenuItem_Exit_Click"/>
      </ContextMenu>
  </tb:TaskbarIcon.ContextMenu>

Of course your bindings will probably vary, but from here you should at least have the DataContext set, and go from there.

当然，您的绑定可能会有所不同，但从这里开始，您至少应该设置 DataContext，然后从那里开始。