Set Icon on SecondaryCommand of CommandBar

Question

I have a command bar width secondary commands:

<CommandBar>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>
</CommandBar>

Why the Like and Dislike icons are not shown?

Answer 1

In Windows 8.1 primary and secondary commands were a way to put the buttons on the left and the right. In Windows 10 UWP, secondary commands are moved to a flyout menu on both desktop and phone. Icons are by default not shown in this flyout menu.

The SecondaryCommands collection can contain only AppBarButton, AppBarToggleButton, or AppBarSeparator command elements. The secondary commands are shown in the overflow menu when the CommandBar is open.

Source: MSDN .

If you would like to try to override the style, have a look at the OverflowPopup control and CommandBarOverflowPresenter style in generic.xaml to get you started.

C:\\Program Files (x86)\\Windows Kits\\10\\DesignTime\\CommonConfiguration\\Neutral\\UAP\\10.0.10240.0\\Generic\\generic.xaml

Answer 2

I've come up with another approach. Hope this helps.

The idea is to utilize the Checked state of an AppBarToggleButton .

Create another class which extends AppBarToggleButton .

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace <YOUR_NAMESPACE>
{
    sealed class SecondaryIconButton : AppBarToggleButton
    {
        public static readonly DependencyProperty GlyphProperty = DependencyProperty.Register(
            "Glyph", typeof( string ), typeof( SecondaryIconButton )
            , new PropertyMetadata( SegoeMDL2.Accept, OnGlyphChanged ) );

        public string Glyph
        {
            get { return ( string ) GetValue( GlyphProperty ); }
            set { SetValue( GlyphProperty, value ); }
        }

        private TextBlock GlyphText;

        public SecondaryIconButton( string Glyph )
            :base()
        {
            IsChecked = true;
            this.Glyph = Glyph;
        }

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            GlyphText = ( TextBlock ) GetTemplateChild( "OverflowCheckGlyph" );
            GlyphText.Width = GlyphText.Height = 16;

            UpdateGlyph();
        }

        // Force the button to always be checked
        protected override void OnPointerReleased( PointerRoutedEventArgs e )
        {
            base.OnPointerReleased( e );
            IsChecked = true;
        }

        private void UpdateGlyph()
        {
            if ( GlyphText == null ) return;
            GlyphText.Text = Glyph;
        }

        private static void OnGlyphChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
        {
            ( ( SecondaryIconButton ) d ).UpdateGlyph();
        }
    }
}

Note that SegeoMDL2.Accept is also a custom class derived from:
https://msdn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font

Now you can invoke this in your xaml with:

<ns:SecondaryIconButton Glyph="&#xE73E;" />

Or create it in code behind:

new SecondaryIconButton( Glyph ) { Label = Label };

Reference:
SecondaryIconButton.cs
SegoeMDL2.cs

Answer 3

Complete code works

public sealed class SecondaryIconButton : AppBarToggleButton
{
    public SecondaryIconButton()
    {
        this.Loaded += SecondaryIconButton_Loaded;
    }

    private void SecondaryIconButton_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateGlyph();
        IsChecked = true;
    }

    public static readonly DependencyProperty GlyphProperty = DependencyProperty.Register(
        "Glyph", typeof(string), typeof(SecondaryIconButton)
        , new PropertyMetadata("\uE706", OnGlyphChanged));

    public string Glyph
    {
        get { return (string)GetValue(GlyphProperty); }
        set { SetValue(GlyphProperty, value); }
    }

    private TextBlock GlyphText;

    public SecondaryIconButton(string Glyph)
        : base()
    {
        IsChecked = true;
        this.Glyph = Glyph;
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        GlyphText = (TextBlock)GetTemplateChild("OverflowCheckGlyph");
        GlyphText.Width = GlyphText.Height = 16;

        UpdateGlyph();
    }

    // Force the button to always be checked
    protected override void OnPointerReleased(PointerRoutedEventArgs e)
    {
        base.OnPointerReleased(e);
        IsChecked = true;
    }

    private void UpdateGlyph()
    {
        if (GlyphText == null) return;
        GlyphText.Text = Glyph;
    }

    private static void OnGlyphChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((SecondaryIconButton)d).UpdateGlyph();
    }
}

Sample

 <CommandBar x:Name="commandbar" RequestedTheme="Dark">
                <CommandBar.SecondaryCommands>
                    <controlEx:SecondaryIconButton Glyph="&#xE109;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="createButton" 
                                      x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
                    <controlEx:SecondaryIconButton Glyph="&#xE174;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="importExportButton" 
                                      x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
                </CommandBar.SecondaryCommands>
                <CommandBar.PrimaryCommands>

                </CommandBar.PrimaryCommands>
            </CommandBar>