如何将图标添加到 uwp 中的菜单栏

Question

我正在尝试制作一个 uwp 应用程序，它有一个菜单栏，尽管我想向它添加图标（而不是它的 menuflyoutitems），就像 mac os 菜单栏有图标在右手侧。我正在努力实现同样的目标，但一无所获。请帮助，提前致谢！

Answer 1

I am trying to make an uwp app, which has a menubar, although I would like to add icons to it(not to it's menuflyoutitems),

当然，对于这种情况，更好的方法是自定义 MenuBarItem 样式，并使用图标而不是默认标题属性更新 ContentButton 内容。

例如

<Style x:Key="ImageBarItem" TargetType="MenuBarItem">
    <Setter Property="Background" Value="{ThemeResource MenuBarItemBackground}" />
    <Setter Property="BorderThickness" Value="{ThemeResource MenuBarItemBorderThickness}" />
    <Setter Property="BorderBrush" Value="{ThemeResource MenuBarItemBorderBrush}" />
    <Setter Property="Title" Value="Item" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="ExitDisplayModeOnAccessKeyInvoked" Value="False" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuBarItem">

                <Grid x:Name="ContentRoot" Background="{TemplateBinding Background}">
                    <Grid.Resources>
                        <SolidColorBrush x:Key="ButtonBackground" Color="Transparent" />
                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent" />
                        <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent" />
                        <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent" />
                    </Grid.Resources>

                    <Border
                        x:Name="Background"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" />

                    <Button
                        x:Name="ContentButton"
                        Padding="12,0,12,0"
                        VerticalAlignment="Stretch"
                        AutomationProperties.AccessibilityView="Raw"
                        Background="Transparent"
                        BorderThickness="0"
                        IsTabStop="False">
                        <!--add icon-->
                        <SymbolIcon Symbol="Add" />
                    </Button>

                    <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />

                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="Background.Background" Value="{ThemeResource MenuBarItemBackgroundPointerOver}" />
                                            <Setter Target="Background.BorderBrush" Value="{ThemeResource MenuBarItemBorderBrushPointerOver}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="Background.Background" Value="{ThemeResource MenuBarItemBackgroundPressed}" />
                                            <Setter Target="Background.BorderBrush" Value="{ThemeResource MenuBarItemBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Target="Background.Background" Value="{ThemeResource MenuBarItemBackgroundSelected}" />
                                            <Setter Target="Background.BorderBrush" Value="{ThemeResource MenuBarItemBorderBrushSelected}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法

 <MenuBar VerticalAlignment="Top">
   <MenuBarItem Style="{StaticResource ImageBarItem}" />

如何将图标添加到 uwp 中的菜单栏

How do I add icons to a menubar in uwp

c#

xml

xaml

menubar

uwp