UWP CommandBar has gap at the bottom

Question

I'm trying to use a CommandBar at the bottom of my UWP app, but I can't seem to get rid of this gap at the bottom.

It's quite hard to see but it's there between the CommandBar and the bottom border of the window. I've tried all sorts of VerticalAlignment configurations but nothing seems to do it. I've created a user control

<UserControl
    x:Class="PivotalTrackerUWP.Controls.NavigationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PivotalTrackerUWP.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:svg="using:Mntone.SvgForXaml.UI.Xaml"
    mc:Ignorable="d"
    d:DesignHeight="50"
    d:DesignWidth="400">

    <Grid Height="50" VerticalAlignment="Bottom">
        <StackPanel VerticalAlignment="Bottom">
            <CommandBar Height="50">
                <CommandBar.SecondaryCommands>
                    <AppBarButton  Label="Preferences"/>
                    <AppBarSeparator/>
                    <AppBarButton Label="My Account"/>
                    <AppBarButton Label="Logout" Click="LogoutButton_Click"/>
                </CommandBar.SecondaryCommands>
            </CommandBar>
        </StackPanel>
    </Grid>
</UserControl>

I am then using this control in my other XAML pages within the main Grid at the bottom.When in the designer for this UserControl there is also still that gap at the bottom so I think it's something with the XAML in the control.

Justin XL · Accepted Answer · 2017-07-17T21:29:58.727

Try removing the hard coded Height=50 on your CommandBar, which has a default compact height of 48.

If you want to customize this default height, have a look my answer here. But for two pixels difference, it's probably worth following the default style for a more consistent look across the OS.

Also, you don't need to specify Height for your Grid too. It will simply stretch to whatever its children need. So just remove Heigjt=50 in there.

However, the best way to display a bottom CommandBar though, is to follow this format -

<Page x:Class="App1.MainPage" ...>

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <AppBarButton Icon="Accept" Label="AppBarButton"/>
            <AppBarButton Icon="Cancel" Label="AppBarButton"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid x:Name="RootGrid">

    </Grid>
</Page>

This will ensure it's positioned at the bottom of the page. To add a top CommandBar, use Page.TopAppBar instead.

This would work brilliantly, but I'm using a Usercontrol for the sake of code re-use, I don't really want to be adding the XAML for the BottomAppBar on every single page. — Matt Brewerton, Jul 18 '17 at 11:47
If that's the case, you can either refer to my linked answer to give the command bar a different compact height in App.Xaml, or simply remove all the hard coded height values. — Justin XL, Jul 18 '17 at 11:49
I used the solution in your linked answer and it works a treat, thanks! — Matt Brewerton, Jul 18 '17 at 12:00

Vladimir Bolshakov · Answer 2 · 2017-07-18T06:44:53.367

You can use Background property and default style for CommandBar (SystemControlBackgroundChromeMediumBrush):

 <Grid Height="50" VerticalAlignment="Bottom" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
    <StackPanel VerticalAlignment="Bottom">
        <CommandBar Height="50">
            <CommandBar.SecondaryCommands>
                <AppBarButton  Label="Preferences"/>
                <AppBarSeparator/>
                <AppBarButton Label="My Account"/>
                <AppBarButton Label="Logout" Click="LogoutButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </StackPanel>
</Grid>

score 0 · Answer 3 · answered Jul 17 '17 at 22:11

CommandBar doesn't have a bottom vertical alignment, and its height is lower than the height of its container so it is expected to render like that.

Other than that, why do you use the CommandBar just to show three dots, wouldn't it be more efficient/better looking to use a Button there with a 'More' SymbolIcon and have MenuFlyout attached?

UWP CommandBar has gap at the bottom

3 Answers3