WPF如何根据条件动态显示或隐藏ContextMenu上下文菜单项与分隔符

问题原因 #

你遇到的现象本质是Visibility绑定未达到预期效果，控件仍然保留在布局中仅显示为禁用状态，常见原因有3个：

1. 你自定义的BooleanToVisibilityConverter逻辑不符合预期，false值返回的是Hidden而非Collapsed：Hidden仅隐藏控件但保留布局占位，Collapsed才会完全移除控件的布局空间
2. ContextMenu属于独立的可视化树，和宿主控件不在同一个视觉树中，绑定的DataContext获取异常，导致Visibility属性未收到正确的通知值
3. 直接在元素上赋值的Visibility绑定优先级被样式、触发器等其他更高优先级的依赖属性赋值覆盖

解决方案 #

方案1：替换为系统内置转换器（优先推荐） #

避免自定义转换器的逻辑错误，直接使用WPF官方提供的BooleanToVisibilityConverter：
第一步，在你的资源字典（和ContextMenu同级别或父级资源）中声明转换器实例：

<BooleanToVisibilityConverter x:Key="SysBooleanToVisConverter"/>

第二步，修改原有绑定，使用声明的系统转换器，同时显式指定绑定源避免ContextMenu数据上下文错误：

<ContextMenu x:Key="MyContextMenu">
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command1}" Command="{Binding Command1}" />
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command2}" Command="{Binding Command2}" />
        <Separator />
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command3}" 
                  Command="{Binding Command3}" 
                  Visibility="{Binding PlacementTarget.DataContext.IsItemActive, 
                               RelativeSource={RelativeSource AncestorType=ContextMenu}, 
                               Converter={StaticResource SysBooleanToVisConverter}}" />
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command4}" 
                  Command="{Binding Command4}" 
                  Visibility="{Binding PlacementTarget.DataContext.IsItemActive, 
                               RelativeSource={RelativeSource AncestorType=ContextMenu}, 
                               Converter={StaticResource SysBooleanToVisConverter}}" />
        <Separator Visibility="{Binding PlacementTarget.DataContext.IsItemActive, 
                               RelativeSource={RelativeSource AncestorType=ContextMenu}, 
                               Converter={StaticResource SysBooleanToVisConverter}}"/>
</ContextMenu>

方案2：使用样式触发器控制可见性 #

如果担心绑定优先级被覆盖，可以改用样式触发器实现相同效果：

<ContextMenu x:Key="MyContextMenu">
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command1}" Command="{Binding Command1}" />
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command2}" Command="{Binding Command2}" />
        <Separator />
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command3}" Command="{Binding Command3}">
            <MenuItem.Style>
                <Style TargetType="MenuItem">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsItemActive}" Value="False">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </MenuItem.Style>
        </MenuItem>
        <MenuItem Header="{x:Static localization:Resources.MyContext_Command4}" Command="{Binding Command4}">
            <MenuItem.Style>
                <Style TargetType="MenuItem">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsItemActive}" Value="False">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </MenuItem.Style>
        </MenuItem>
        <Separator>
            <Separator.Style>
                <Style TargetType="Separator">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsItemActive}" Value="False">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Separator.Style>
        </Separator>
</ContextMenu>

注意事项 #

菜单项显示为灰色是Command的CanExecute返回false导致的IsEnabled=false效果，和Visibility属性完全独立，互不影响，你可以根据需求自行控制Command的可用状态。

内容的提问来源于stack exchange，提问作者Mr.Curious