How do I add icons to a menubar in uwp-CodePudding

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), like a mac os menubar has icons on the right-hand side. I am trying to achieve the same thing, but have found nothing. please help, thanks in advance!

CodePudding user response：

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),

Sure, for this scenario, the better way is custom MenuBarItem style, and update the ContentButton content with icon but not default Title propety.

For example

<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>

Usage

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