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>

Nedry

This is not a good way to ask a question here. Did you try anything so far to solve your problem? Show your effort first so people might show theirs. Please read FAQ, How to Ask and help center if in doubt. – Platinous

@NahuelIanni: My question says it all :) I am not doing something complex, it is simple piece of code. But for you I am updating my question :) – Nedry

@MuhammadSaifullah It seems that no matter you set, the app bar seems to be aligned horizontally depending on the number of PrimaryCommands. It also won't work if you put dummy empty three buttons from left - you will see empty circles. – Austinaustina

@Austinaustina I want to align this button to right side. in VS design button is aligned to right side but when i run it in emulator button is center aligned. is there any way align button in bottombar? – Nedry

@MuhammadSaifullah BottomAppBar in WP8.1 behaves little differently in comparison to desktop app. I don't know the way to align the buttons. – Austinaustina

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.

Billy

Why don't they allow to customize the AppBar as they do in the Windows 8.1 apps? The design of the controls should be as flexible as possible... – Antitoxic

You are confusing the CommandBar control with the AppBar control. They are not the same. CommandBar has a fixed layout, AppBar doesn't. – Billy

Exactly, but in WP8.1 you cannot use the AppBar, I don't know why. The AppBar is there, you can drag it to the BottomAppBar but it just crashes all the App. In Windows8.1 you have both, and as you say, you can customize the layout in the AppBar because in Windows 8.1 it does work. – Antitoxic

Because AppBar is not a Windows Phone control. It is a Windows-only control. There is nothing you can do to make it work. Only CommandBar works on Windows Phone. – Billy

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

Lucerne

my question was for windows phone 8.1 not windows 10 :) – Nedry

Hello, I am running Windows 10. But This is an 8.1 app create from Visual Studio 2013. But fair enough, this is a store app not a phone app :) On phone, probably CommandBar is the better choice :) – Lucerne

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

Seagrave

Unfortunately, VerticalAlignment doesn't play well with all controls in Content part. – Walkabout