UWP/WinRT: On the CommandBar overflow menu, why is there ugly blank space on the bottom?

Question

I'm trying to use the CommandBar class, but it isn't behaving.

Here is the XAML for my trivial test:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <CommandBar>
        <AppBarButton Icon="NewWindow"></AppBarButton>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="Secondary Button"></AppBarButton>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Grid>

However, when I press the ... overflow button on the CommandBar to expose the overflow menu, for whatever reason there is an ugly extra blank chin on the bottom of the overflow menu, making the whole thing look rather unprofessional. Here is a screenshot of the problem, with the blank space underneath the Secondary Button being the problematic part.

When testing on a first-party Universal Windows Platform app like the Edge browser, there is no such chin on the dropdown. For what it's worth, though, I suspect that Edge is using a custom version of the CommandBar, as I don't think there is any way to avoid the CommandBar extending downwards when you tap the ... overflow button, or to insert icon buttons into the dropdown menu like used for the Zoom buttons.

Answer 1

This is indeed the default style of the CommandBar.
You can remove that blank space by editing a copy of the CommandBarOverflowPresenter template and removing the bottom margin on the ItemsPresenter. Here is the resulting style:

<Style TargetType="CommandBarOverflowPresenter">
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
    <Setter Property="MaxWidth" Value="{ThemeResource CommandBarOverflowMaxWidth}"/>
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CommandBarOverflowPresenter">
                <Grid Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                    <ScrollViewer AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                        <ItemsPresenter x:Name="ItemsPresenter" Margin="0"/>
                    </ScrollViewer>
                    <Rectangle Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" StrokeThickness="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>