如何在WPF Metro窗口底部创建带弹出选项的菜单？

嘿，针对你要在WPF Metro窗口底部创建带弹出菜单的按钮这个需求，我给你两个实用的实现方案，一个是用专门的Metro控件库（推荐），另一个是纯原生WPF控件实现，你可以根据项目情况选择：

MahApps.Metro是WPF Metro风格开发的标配库，自带的DropDownButton控件完美适配“点击按钮弹出菜单”的场景，而且样式完全贴合Metro风格。

步骤： #

1. 先通过NuGet安装MahApps.Metro包，搜索MahApps.Metro即可完成安装。
2. 在App.xaml中添加MahApps的资源字典，确保控件样式生效：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml"/>
            <!-- 可切换主题色，这里用蓝色浅色主题示例 -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

3. 在MetroWindow中构建底部灰色区域和菜单按钮：

<mah:MetroWindow x:Class="YourProject.MainWindow"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
                 Title="Metro Bottom Menu Demo" Height="450" Width="800">
    <Grid>
        <!-- 主内容区域 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <!-- 底部灰色操作栏 -->
        <StackPanel Grid.Row="1" Background="#E0E0E0" Orientation="Horizontal" Padding="10" Height="40">
            <!-- 第一个下拉菜单按钮 -->
            <mah:DropDownButton Content="核心操作" Margin="5" Width="120">
                <mah:DropDownButton.Items>
                    <MenuItem Header="新建项目" Click="NewProject_Click"/>
                    <MenuItem Header="打开文件" Click="OpenFile_Click"/>
                    <Separator/>
                    <MenuItem Header="保存" Click="Save_Click"/>
                </mah:DropDownButton.Items>
            </mah:DropDownButton>
            
            <!-- 第二个下拉菜单按钮 -->
            <mah:DropDownButton Content="更多设置" Margin="5" Width="120">
                <mah:DropDownButton.Items>
                    <MenuItem Header="主题切换"/>
                    <MenuItem Header="账号管理"/>
                </mah:DropDownButton.Items>
            </mah:DropDownButton>
        </StackPanel>
    </Grid>
</mah:MetroWindow>

4. 后台代码处理菜单点击事件：

private void NewProject_Click(object sender, RoutedEventArgs e)
{
    // 执行新建项目逻辑
    MessageBox.Show("新建项目已触发");
}

private void OpenFile_Click(object sender, RoutedEventArgs e)
{
    // 执行打开文件逻辑
    MessageBox.Show("打开文件已触发");
}

private void Save_Click(object sender, RoutedEventArgs e)
{
    // 执行保存逻辑
    MessageBox.Show("保存已触发");
}

如果你的项目不想引入第三方库，可以用原生Button+ContextMenu实现，只需修改点击逻辑让菜单左键弹出。

步骤： #

1. 在窗口中构建底部灰色区域和按钮：

<Window x:Class="YourProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Metro Style Bottom Menu" Height="450" Width="800"
        WindowStyle="None" ResizeMode="CanResize"> <!-- 模拟Metro无边框风格 -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        
        <!-- 底部灰色操作栏 -->
        <Grid Grid.Row="1" Background="#E0E0E0">
            <StackPanel Orientation="Horizontal" Margin="10">
                <Button Content="操作菜单" Margin="5" Width="120" Click="MenuButton_Click">
                    <Button.ContextMenu>
                        <ContextMenu Placement="Bottom"> <!-- 设置菜单在按钮下方弹出 -->
                            <MenuItem Header="选项1" Click="Option1_Click"/>
                            <MenuItem Header="选项2" Click="Option2_Click"/>
                            <Separator/>
                            <MenuItem Header="退出" Click="Exit_Click"/>
                        </ContextMenu>
                    </Button.ContextMenu>
                </Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

2. 后台代码实现左键弹出菜单：

private void MenuButton_Click(object sender, RoutedEventArgs e)
{
    var btn = sender as Button;
    if (btn?.ContextMenu != null)
    {
        btn.ContextMenu.IsOpen = true;
    }
}

private void Option1_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("选项1被点击");
}

private void Option2_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("选项2被点击");
}

private void Exit_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

额外注意点： #

• 底部区域的背景色可以根据需求调整，比如用SystemColors.ControlLightBrush更贴合系统风格，或者自定义Metro风格的灰度值。
• 如果需要菜单弹出位置更精准，可以调整ContextMenu的PlacementTarget和Placement属性。
• 用MahApps的方案时，还可以自定义DropDownButton的样式，比如修改按钮背景、文字颜色等，完全适配你的项目风格。

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