UWP - CommandBar blank space under Buttons

Question

This code generates a blank space, a misalignment and a misposition as you can see in the image.

    <CommandBar Grid.Row="1" IsOpen="True" VerticalAlignment="Stretch">
        <AppBarButton Icon="Add" Label="Nuovo" MinHeight="40" />
    </CommandBar>

You can see the blank space, the add icon is too high, the Label is misplaced (more space from the icon is needed).

Answer 1

CommandBar is designed to be used in Page.TopAppBar or Page.BottomAppBar. So if you just want to to show it at bottom of the page, put it in Page.BottomAppBar plainly. Then it will work without any problems.

<Page.BottomAppBar>
    <CommandBar IsOpen="True">
        <AppBarButton Icon="Add" Label="Nuovo"/>
    </CommandBar>
</Page.BottomAppBar>

Or otherwise, if you'd like to manage to use it in the Grid inside Page.Content customizing height or other behaviors, you have to redesign entire Style for CommandBar including Template and Animations, since some important properties are hard-coded in the default Style.

Answer 2

It seems that bottom gap can be eliminated rather easily by defining some heights in Application.Resources.

App.xaml

<Application.Resources>
    <x:Double x:Key="AppBarThemeMinHeight">56</x:Double>
    <x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
</Application.Resources>

MainPage.xaml

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Label="New" >
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xe109;" FontSize="16"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="Select">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xe133;" FontSize="16"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Fine Alignment (Optional)

AppBarButton (and/or AppBarToggleButton)

To adjust icon position of each button, put a copy of the default AppBarButton style in Application.Resources and alter Margin of ContentePresenter(Name="Content").

<ContentPresenter x:Name="Content" Margin="0,10,0,3" ... />

CommandBar

To adjust ellipsis button's position, similarly make a copy of CommandBar style and alter Padding of Button(Name="MoreButton").

<Button x:Name="MoreButton" Padding="16,17,16,0"  ... />

Then,

All the explation here-in-above are based on the default styles defined in generic.xaml ver 10.0.14393.