Question: How to add layered Icon to AppBarButton

[harvinders]

I am not able to figure out how do I add a layered icon to an AppBarButton, something that is described here.

It was suggested online that we can use a <Grid> and add two <FontIcon> s, something like

<AppBarToggleButton>
    <Grid>
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE840;" />
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE842;" />
    </Grid>
</AppBarToggleButton>

However, if we do this the Icons won't be displayed if the item moves to the overflow menu. It seems Icons are only displayed if they are part of the Icon property, something like below

<AppBarToggleButton>
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE842;" />
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

[StephenLPeters]

If you leave or set the icon to null does the content get pushed into the overflow menu? ContentPresenter does some magic to set up that wiring by default.

[harvinders]

If I keep the XAML like below, and when the button goes to overflow menu, the menu does show the Label correctly. However, Content, in this case Grid with FontIcons, is not displayed.

<AppBarToggleButton Label="Pinned">
    <Grid>
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE840;" />
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE842;" />
    </Grid>
</AppBarToggleButton>

[ranjeshj]

This does not look like it is currently supported because Grid is not an IconElement. We need a new feature here to stack icons to enable this.

[zhuxb711]

@harvinders
AppBarElementContainer should help you. It allows you to use custom layout controls.

By default, the elements in AppBarElementContainer are different from AppBarButton, but you can use the following Style to make it same. Here is an example style for Button.

<Style x:Key="ButtonLikeCommandBarFlyout"
           TargetType="Button">
        <Setter Property="Background"
                Value="{ThemeResource CommandBarFlyoutButtonBackground}" />
        <Setter Property="Foreground"
                Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="BorderBrush"
                Value="{ThemeResource SystemControlTransparentBrush}" />
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="FontFamily"
                Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight"
                Value="Normal" />
        <Setter Property="UseSystemFocusVisuals"
                Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="AllowFocusOnInteraction"
                Value="False" />
</Style>

At last remember to set AppBarElementContainer.HorizontalContentAlignment = HorizontalAlignment.Stretch