如何在WPF中实现Kebab Menu（三点菜单）按钮？

针对你需要的垂直三点式菜单（类似Edge浏览器的样式），在.NET Framework 4.5的WPF应用里，有几种高效的实现方式，以下是最常用的方案：

1. 自定义ToggleButton + Popup 实现原生轻量方案 #

这是最灵活的方式，完全基于WPF原生控件，不需要依赖第三方库：

第一步：定义三点按钮的样式 #

给ToggleButton做一个无默认样式的自定义模板，渲染垂直三点：

<Style x:Key="KebabToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Width" Value="32"/>
    <Setter Property="Height" Value="32"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Background="Transparent">
                    <!-- 垂直三点 -->
                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="4">
                        <Rectangle Width="16" Height="2" Fill="{TemplateBinding Foreground}" RadiusX="1" RadiusY="1"/>
                        <Rectangle Width="16" Height="2" Fill="{TemplateBinding Foreground}" RadiusX="1" RadiusY="1"/>
                        <Rectangle Width="16" Height="2" Fill="{TemplateBinding Foreground}" RadiusX="1" RadiusY="1"/>
                    </StackPanel>
                    <!-- 选中/ hover状态背景 -->
                    <Rectangle x:Name="StatusBackground" Fill="#E0E0E0" Opacity="0" RadiusX="4" RadiusY="4"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="StatusBackground" Property="Opacity" Value="1"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="StatusBackground" Property="Opacity" Value="0.5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

第二步：结合Popup实现菜单弹窗 #

把ToggleButton和Popup绑定，点击按钮时显示菜单：

<Grid>
    <ToggleButton x:Name="KebabButton" Style="{StaticResource KebabToggleButtonStyle}" Foreground="#333"/>
    <Popup IsOpen="{Binding IsChecked, ElementName=KebabButton}" 
           Placement="Bottom" 
           PlacementTarget="{Binding ElementName=KebabButton}"
           StaysOpen="False">
        <!-- 菜单容器，可自定义样式 -->
        <Border Width="180" Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4">
            <StackPanel>
                <MenuItem Header="设置" Cursor="Hand" Padding="12,8">
                    <MenuItem.Icon>
                        <Rectangle Width="16" Height="16" Fill="#333"/>
                    </MenuItem.Icon>
                </MenuItem>
                <Separator/>
                <MenuItem Header="帮助和反馈" Cursor="Hand" Padding="12,8"/>
                <MenuItem Header="关于" Cursor="Hand" Padding="12,8"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

2. 改造原生Menu控件 #

如果需要更完整的菜单交互（比如快捷键、子菜单），可以直接改造WPF的Menu控件：

<Menu>
    <Menu.Template>
        <ControlTemplate TargetType="Menu">
            <ToggleButton Style="{StaticResource KebabToggleButtonStyle}" x:Name="KebabTrigger"/>
            <Popup IsOpen="{Binding IsChecked, ElementName=KebabTrigger}" Placement="Bottom">
                <StackPanel IsItemsHost="True" Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4" Width="180"/>
            </Popup>
        </ControlTemplate>
    </Menu.Template>
    <MenuItem Header="设置"/>
    <MenuItem Header="帮助"/>
    <MenuItem Header="关于"/>
</Menu>

关键注意事项 #

• 样式适配：可以通过绑定Foreground、Background属性，让菜单适配你的应用主题
• 交互逻辑：设置Popup.StaysOpen="False"可以点击外部自动关闭菜单
• 兼容性：以上代码完全兼容.NET Framework 4.5，不需要额外依赖

内容的提问来源于stack exchange，提问作者Willy