Search code examples
c#visual-studio-2015uwpwindows-10-mobile

Set Icon on SecondaryCommand of CommandBar

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?

Solution

  • 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