Show icon on SecondaryCommands (UWP)

Question

I set the icons in my SecondaryCommand of CommandBar but aren't shown. Why?

<CommandBar RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0">
  <CommandBar.SecondaryCommands>
    <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Click="shareButton_Click" Icon="ReShare" />
    <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Click="contactButton_Click" />
  </CommandBar.SecondaryCommands>
</CommandBar>

Answer 1

They are not shown because of the default AppBarButton template. You will need to modify it.

Just follow these steps:

1. Temporarily put an AppBarButton in the CommandBar.PrimaryCommands collection.
2. Right click the button in the designer and click on Edit Template > Edit a Copy...
3. In the dialog that opens enter a name for your style, e.g. MyAppBarButtonStyle

4. Set this style to your secondary buttons:

   <CommandBar.SecondaryCommands>
       <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Icon="ReShare" Style="{StaticResource MyAppBarButtonStyle}" />
       <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Style="{StaticResource MyAppBarButtonStyle}" />
   </CommandBar.SecondaryCommands>
   

5. Modify the style to your liking.

By default the following elemnt is used in the overflow menu:

<TextBlock x:Name="OverflowTextLabel" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" TextAlignment="Left" TextWrapping="NoWrap" Text="{TemplateBinding Label}" TextTrimming="Clip" Visibility="Collapsed" VerticalAlignment="Center"/>

You might want to replace it with something like that:

<StackPanel x:Name="OverflowContentRoot" Orientation="Horizontal" Visibility="Collapsed" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
    <ContentPresenter x:Name="OverflowContent" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4"/>
    <TextBlock x:Name="OverflowTextLabel" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" TextAlignment="Left" TextWrapping="NoWrap" Text="{TemplateBinding Label}" TextTrimming="Clip" VerticalAlignment="Center"/>
</StackPanel>

You will also need to modify the overflow visual state to display your new template:

<VisualState x:Name="Overflow">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowContentRoot">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

And increase the button width:

<Setter Property="Width" Value="150"/>

Of course, you'll want to further modify the template to your liking, but this should at least get you going.

Answer 2

Damir's answer somehow put me on the right track and after spending a stupid amount of time on this, I eventually found out a solution that's simple.

Note that it may not suit everyone as the buttons don't get highlighted when hovering over with your mouse but it's the closest and easiest way I've figured out on how to do it on a UWP solution

First define a ControlTemplate in your Styles.xaml or your Page.Resources as such:

<ControlTemplate x:Key="SecondaryCommandTemplate" TargetType="AppBarButton">
    <Grid x:Name="Root" Background="{TemplateBinding Background}">
        <Grid x:Name="ContentRoot" HorizontalAlignment="Stretch" Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <ContentPresenter Grid.Column="0" VerticalContentAlignment="Center" 
             VerticalAlignment="Stretch" x:Name="Content"
             AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" 
             Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" 
             Height="20" Margin="7,0,7,0"/>
            <TextBlock Grid.Column="1" VerticalAlignment="Center" x:Name="TextLabel" 
             Foreground="{TemplateBinding Foreground}" FontSize="12" 
             FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left"
             TextWrapping="Wrap" Text="{TemplateBinding Label}"/>
        </Grid>
    </Grid>
</ControlTemplate>

Then simply define the Template your SecondaryCommands:

<CommandBar.SecondaryCommands>
    <AppBarButton Label="Settings"
                  Icon="Setting" 
                  Command="{Binding CommandBarViewModel.SettingsCommand}"
                  Template="{StaticResource SecondaryCommandTemplate}"/>
    <AppBarButton Label="Admin"
                  Icon="Admin" 
                  Command="{Binding CommandBarViewModel.SettingsCommand}"
                  Template="{StaticResource SecondaryCommandTemplate}"/>
</CommandBar.SecondaryCommands>

It's a simple as that! What I don't get is that after following Damir's suggestion, and examining the XAML style that was generated for the button, I ended up removing all the visual states and I noticed that both my icon and text were displayed!! Why?? I don't understand why would Microsoft want to hide the icon in the SecondaryCommands and I'll be honest, I didn't spot the specific code that actually did it. Once I removed all the VisualStates, I noticed I was left with a template and then it was just a case of adding a grid and playing around with VerticalAlignment, HorizontalAlignment and 'Margin'.

Hope this helps!

Answer 3

Here's a much simpler, less elegant, way to do it. It works because most UWP icons are glyphs of the Segoe MDL2 Assets Font included in Windows.

1. Look up the Unicode point for the symbol you want from Microsoft's Segoe MDL2 Assets Guide (eg. E702 for the Bluetooth icon, E72D for the Share icon).
2. Use something like UnicodeMap to show that letter on screen. Don't worry that it looks like a blank square, it'll work in your app.
3. Copy the character into your XAML as below, making sure to set the FontFamily of your AppBarButton to Segoe MDL2 Assets.

<CommandBar.SecondaryCommands> <AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Help"/> <AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Update database"/> </CommandBar.SecondaryCommands>

And this is what you'll get.

I use this technique in an app that's localised to Russian and Chinese with no problems.

Answer 4

Well its pretty easier than this, use the reference microsoft.midiGmDls in your proyect and it's done.