Set icon on SecondaryCommand CommandBar

Question

I have helper command line width 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 don't my Like and Dislike icons appear?

Answer 1

In Windows 8.1, primary and secondary commands were a way to place buttons on the left and right. In Windows 10 UWP, secondary commands are moved to the drop-down menu on both the desktop and the phone. Default icons do not appear in this pop-up menu.

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

Source: MSDN .

If you want to try redefining the style, look at the OverflowPopup style and CommandBarOverflowPresenter style in the generic.xaml file to get started.

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

Answer 2

I came up with a different approach. Hope this helps.

The idea is to use the AppBarToggleButton Checked State.

Create another class that 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 also a custom class derived from:
https://msdn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font

Now you can call this in your xaml with:

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

Or create it in the code behind:

 new SecondaryIconButton( Glyph ) { Label = Label }; 

Reference:
SecondaryIconButton.cs
SegoeMDL2.cs