You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在UWP应用的MenuBar菜单栏中添加图标?

UWP MenuBar 顶级区域添加图标解决方案

方案1:给单个MenuBarItem(顶级菜单项)添加前置图标

无需修改全局样式,直接自定义MenuBarItem的内容模板即可实现,示例代码如下:

<MenuBar>
    <MenuBarItem>
        <MenuBarItem.ContentTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Spacing="4">
                    <!-- 此处可替换为BitmapIcon、Image等任意图标控件 -->
                    <FontIcon Glyph="&#xE700;" FontSize="14" />
                    <TextBlock Text="文件" />
                </StackPanel>
            </DataTemplate>
        </MenuBarItem.ContentTemplate>
        <!-- 子菜单项逻辑不受影响,正常编写即可 -->
        <MenuFlyoutItem Text="新建" />
        <MenuFlyoutItem Text="打开" />
    </MenuBarItem>
</MenuBar>

方案2:在整个MenuBar最右侧添加固定状态图标(类Mac菜单栏效果)

需要重写MenuBar的默认控件模板,操作步骤如下:

  • 打开XAML设计器,右键已添加的MenuBar控件,依次选择「编辑模板」→「编辑副本」,将系统默认样式生成到当前页面/应用的资源字典中
  • 在生成的样式代码里,找到ItemsPresenter所在的父布局容器(默认是横向排列的StackPanel)
  • 将该StackPanel的HorizontalAlignment属性修改为Stretch,再在StackPanel末尾添加你需要的图标控件,修改后的模板片段参考:
<Style TargetType="MenuBar" x:Key="CustomMenuBarStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuBar">
                <Grid x:Name="ContentRoot" Background="{TemplateBinding Background}">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                        <ItemsPresenter/>
                        <!-- 右侧自定义图标区,多个图标可嵌套横向StackPanel排列 -->
                        <StackPanel Orientation="Horizontal" Margin="16,0,8,0" Spacing="12">
                            <FontIcon Glyph="&#xE720;" FontSize="14" />
                            <FontIcon Glyph="&#xE777;" FontSize="14" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
  • 给你的MenuBar控件指定样式:Style="{StaticResource CustomMenuBarStyle}"即可生效
    如果需要给右侧图标添加点击交互,直接给图标控件绑定Tapped事件,或者套一层样式透明的Button即可。

内容的提问来源于stack exchange,提问作者Levi Israel

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 12:06:05