如何设置TreeView样式中定义的ContextMenu的DataContext

时间:2013-12-20 14:39:13

标签: wpf mvvm treeview contextmenu menuitem

我有一个TreeView,它在Style中定义了ContextMenu。 MenuItems有绑定它们的命令,但我无法绑定这些命令。我意识到这是因为ContextMenu在可视化树中不存在,所以我尝试使用PlacementTarget对象和Tag属性,我在其他示例中看到过它但它仍然无法正常工作。我有什么想法。

<Grid Name="MyGrid" DataContext="{Binding}">
    <TreeView Name="TreeView"
        ItemsSource="{Binding TreeViewElements}"
        Tag="{Binding DataContext, ElementName=MyGrid}">
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="ContextMenu">
                    <Setter.Value>
                        <ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={x:Static RelativeSource.Self}}">
                            <MenuItem Header="Do Something" 
                                      Command="{Binding DoSomethingCommand}"/>
                        </ContextMenu>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.ItemContainerStyle>
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding SubElements}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="2" Text="{Binding HeaderText}" ></TextBlock>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>

更新

下面的答案都是完全有效和正确的,但经过一番反思,我意识到我正在以错误的方式看待这个问题。我看了一下this article by Josh Smith,他解释说使用ViewModel模式意味着你使用TreeView来显示数据而不是放置数据。因此,我能够将TreeView中的每个项目视为自己的视图模型。这意味着我可以从我的上下文菜单中针对特定的ViewModel执行任何命令(如果需要,可以使用我的新ViewModel上的父属性导航到父视图模型)。

1 个答案:

答案 0 :(得分:2)

ContextMenu确实有DataContext。您无需明确设置它。

在您的情况下,ContextMenu中的DataContext与TreeViewItem的相同。这意味着它不是ViewModel,而是项目本身。

假设您有一个Person类型的对象列表。然后命令应该放在Person中。

public class Person : INotifyPropertyChanged
{
    private string name;

    public string Name
    {
        get { return name; }
        set { name = value; this.OnPropertyChanged("Name"); }
    }

    public ICommand DoSomethingCommand
    {
        get
        {
            return new RelayCommand(x => MessageBox.Show("Works!"));
        }
    }

    ...

然后XAML应该是这样的:

        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="ContextMenu">
                    <Setter.Value>
                        <ContextMenu>
                            <MenuItem Header="Do Something" 
                                  Command="{Binding DoSomethingCommand}"/>
                        </ContextMenu>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.ItemContainerStyle>

但是,如果在ViewModel中有命令,则需要向ContextMenu的DataContext提供ViewModel实例。

以下是一个例子:

class MainWindowViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Person> employee;

    public MainWindowViewModel()
    {
        this.Employee = new ObservableCollection<Person>();
        this.Employee.Add(new Person { Name = "Test" });
    }

    public ObservableCollection<Person> Employee
    {
        get { return this.employee; }
        set { this.employee = value; this.OnPropertyChanged("Employee"); }
    }

    public ICommand DoSomethingCommand
    {
        get
        {
            return new RelayCommand(x => MessageBox.Show("Works!"));
        }
    }

    ...

然后XAML看起来像这样:

    <TreeView x:Name="treeView" ItemsSource="{Binding Employee}">
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=DataContext}"></Setter>
                <Setter Property="ContextMenu">
                    <Setter.Value>
                        <ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
                            <MenuItem Header="Do Something" 
                                  Command="{Binding DoSomethingCommand}"/>
                        </ContextMenu>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>

或者XAML看起来像这样:

    <TreeView x:Name="treeView" ItemsSource="{Binding Employee}">
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="ContextMenu">
                    <Setter.Value>
                        <ContextMenu DataContext="{x:Reference treeView}">
                            <MenuItem Header="Do Something" 
                                  Command="{Binding DataContext.DoSomethingCommand}"/>
                        </ContextMenu>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>