CODEWITHSUNDEEP
c#xamluwpuwp-xaml
Matt Brewerton
Matt Brewerton

Reputation: 896

UWP CommandBar has gap at the bottom

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.

enter image description here

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.

Upvotes: 1

Views: 1104

Answers (3)

Vladimir Bolshakov
Vladimir Bolshakov

Reputation: 410

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>

enter image description here

Upvotes: 0

Ivan I
Ivan I

Reputation: 9990

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?

Upvotes: 0

Justin XL
Justin XL

Reputation: 39006

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.

Upvotes: 5

Related Questions