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

Posted 2023-04-12

【中文标题】如何在 uwp 中将图标添加到菜单栏

【英文标题】：How do I add icons to a menubar in uwp

【发布时间】：2021-11-21 01:15:39

【问题描述】：

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

【参考方案1】：

我正在尝试制作一个具有菜单栏的 uwp 应用程序，尽管我想向它添加图标（而不是它的 menuflyoutitems），

当然，对于这种情况，更好的方法是自定义 MenuBarItem 样式，并使用图标而不是默认的 Title 属性更新 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" />

【讨论】：

我们在哪里添加

等一下，我给你分享样本

好的，谢谢！

请参考代码here。

好的，谢谢你的帮助