TreeView 元素上下文菜单的 MVVM 命令绑定

Question

我需要将 ViewModel 的命令 (RelayCommand) 与 treeviewitem

conetxtmenu 元素上的单击事件绑定

ViewModel 命令

private RelayCommand _myElementCommand;
public RelayCommand MyCommand
{
    get
    {
        return _myElementCommand?? (_myElementCommand= new RelayCommand(
           x =>
           {
               //LoadData();
               MessageBox.Show("Clicked!");
           }));
    }
}

VIEW

<TreeView x:Name="tvUBR" ItemsSource="{Binding UBRList, UpdateSourceTrigger=PropertyChanged}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center" Text="{ Binding Description }">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="Black" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsMatch}"
                                                Value="True">
                                    <Setter Property="Foreground" Value="Green" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                    <TextBlock.ContextMenu>
                        <ContextMenu>
                            <!--<MenuItem Header="Details" Command="{Binding DropedElementCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>-->
                            <MenuItem Header="Details">
                                <i:Interaction.Triggers>
                                <!-- EventName ??? -->
                                    <i:EventTrigger EventName="Click"> 
                                        <i:InvokeCommandAction Command="{Binding Path=PlacementTarget.Tag.DataContext.MyCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </MenuItem>
                        </ContextMenu>
                    </TextBlock.ContextMenu>
                </TextBlock>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectedItemChanged">
            <i:InvokeCommandAction Command="{Binding SelectedUBRElementCommand}" 
                                            CommandParameter="{Binding SelectedItem, ElementName=tvUBR}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="b:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" Value="True" />
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>

知道如何实现吗？

Answer 1

您可以将 TextBlock 的 Tag 属性绑定到视图模型，然后使用 PlacementTarget 属性绑定到命令ContextMenu:

<HierarchicalDataTemplate ItemsSource="{Binding Children}">
    <StackPanel Orientation="Horizontal">
        <TextBlock VerticalAlignment="Center" Text="{ Binding Description }">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Tag" Value="{Binding DataContext, RelativeSource={RelativeSource AncestorType=TreeView}}" />
                    <Setter Property="Foreground" Value="Black" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMatch}" Value="True">
                            <Setter Property="Foreground" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
            <TextBlock.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Details"
                              Command="{Binding PlacementTarget.Tag.MyCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}" />
                </ContextMenu>
            </TextBlock.ContextMenu>
        </TextBlock>
    </StackPanel>
</HierarchicalDataTemplate>

TreeView 元素上下文菜单的 MVVM 命令绑定

MVVM Command binding for contextemenu of TreeView Element

wpf

binding

command

mvvm

commandbinding