如何在UWP应用的MenuBar菜单栏中添加图标?
方案1:给单个MenuBarItem(顶级菜单项)添加前置图标
无需修改全局样式,直接自定义MenuBarItem的内容模板即可实现,示例代码如下:
<MenuBar> <MenuBarItem> <MenuBarItem.ContentTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Spacing="4"> <!-- 此处可替换为BitmapIcon、Image等任意图标控件 --> <FontIcon Glyph="" 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="" FontSize="14" /> <FontIcon Glyph="" FontSize="14" /> </StackPanel> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
- 给你的MenuBar控件指定样式:
Style="{StaticResource CustomMenuBarStyle}"即可生效
如果需要给右侧图标添加点击交互,直接给图标控件绑定Tapped事件,或者套一层样式透明的Button即可。
内容的提问来源于stack exchange,提问作者Levi Israel
相关产品推荐
相关产品推荐

