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>

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](http://stackoverflow.com/tour), [How to Ask](http://stackoverflow.com/help/how-to-ask) and [help center](http://stackoverflow.com/help) if in doubt. — Nahuel Ianni, Aug 26 '14 at 13:08
@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 :) — Muhammad Saifullah, Aug 26 '14 at 15:33
@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. — Romasz, Aug 26 '14 at 17:42
@Romasz 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? — Muhammad Saifullah, Aug 26 '14 at 18:19
@MuhammadSaifullah BottomAppBar in WP8.1 behaves little differently in [comparison to desktop app](http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx). I don't know the way to align the buttons. — Romasz, Aug 26 '14 at 20:22

score 7 · Accepted Answer · answered Sep 04 '14 at 15:29

7

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.

answered Sep 04 '14 at 15:29

Jerry Nixon

31,313
14
117
233

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... – Fritjof Berggren Mar 03 '15 at 09:54
1

You are confusing the CommandBar control with the AppBar control. They are not the same. CommandBar has a fixed layout, AppBar doesn't. – Jerry Nixon Mar 10 '15 at 05:08
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. – Fritjof Berggren Mar 11 '15 at 08:13
1

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. – Jerry Nixon Mar 31 '15 at 00:20

score 7 · Answer 2 · answered Aug 25 '15 at 17:40

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

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 :) — Yuchen, Aug 25 '15 at 18:27

Tim · Answer 3 · 2016-11-02T13:47:44.130

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

Unfortunately, `VerticalAlignment` doesn't play well with all controls in `Content` part. — , Mar 12 '17 at 01:54

How to horizontally align AppBarButton in command bar

3 Answers3

Linked