How to horizontally align AppBarButton in command bar

Question

I want to align my single AppBarButton to the right on a CommandBar in a Page.BottomBar?

In design it shows the app bar button at the right side but in the emulator, the button is always at the center?

Is there a way to align AppBarButton in a page bottom bar?

Edit:

<Page.BottomAppBar>
    <CommandBar HorizontalAlignment="Right" HorizontalContentAlignment="Right">
        <CommandBar.PrimaryCommands>
        <AppBarButton Margin="100,0,0,0" HorizontalAlignment="Right" HorizontalContentAlignment="Right" IsEnabled="True" Name="btnNext" Icon="Next" x:Uid="AppBarNext" Label="Next1"></AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Answer 1

You cannot center buttons in a CommandBar. Having said that, if you need this type of control you simply need to switch to the AppBar control instead. Same behavior, just more flexibility. The trade-off is that this control is not universal and will not render in Phone. You would need to reveal a CommandBar for your Phone platform head.

Answer 2

HorizontalAlignment doesn't work. This is a work around that we use:

<Page.BottomAppBar>
    <AppBar IsSticky="true">
        <Grid Margin="8,8,8,8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <AppBarButton Grid.Column="0" 
                          x:Name="SelectButton" Icon="Bullets"
                          Label="!Select"  />
            <AppBarButton Grid.Column="1" 
                          x:Name="SelectAllButton" 
                          Icon="SelectAll" 
                          Label="!Select All"/>
            <AppBarButton Grid.Column="3" 
                          x:Name="DetailsButton" 
                          Icon="Edit"
                          Label="!Details"/>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

And it simply works:

Cheers :P

Answer 3

This works for me getting a left justified back button. It is courtesy of Rudy Huyn's blog at: Display an AppBarButton on the left

<Page.TopAppBar>
    <CommandBar>
        <CommandBar.Content>
            <AppBarButton x:Name="Back" Icon="Back" Label="Back" Click="Back_Click" IsCompact="True"/>
        </CommandBar.Content>

        <AppBarButton x:Name="videoButton" Icon="Video" Label="Video"/>
    </CommandBar>
</Page.TopAppBar>

Rudy has some theories about why Microsoft made it this way. Content on the left everything else on the right.

By the way, that IsCompact="True" is very important or you get annoying labels as well as icons.

Cheers Tim