c# - UWP CommandBar 底部有空隙

Question

我正在尝试在我的 UWP 应用底部使用 CommandBar，但我似乎无法摆脱底部的这个空白。

很难看到，但它位于 CommandBar 和窗口底部边框之间。我尝试了各种 VerticalAlignment 配置，但似乎无济于事。我创建了一个用户控件

<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>

然后我在底部主网格内的其他 XAML 页面中使用此控件。当在设计器中为此 UserControl 时，底部仍然存在间隙，因此我认为它与控件中的 XAML 有关。

Answer 1

尝试删除 CommandBar 上的硬编码 Height=50，它的默认紧凑高度为 48。

如果你想自定义这个默认高度，看看我的回答here .但对于 两个像素 的差异，可能值得遵循默认样式以获得跨操作系统的更一致的外观。

此外，您也不需要为Grid 指定Height。它会简单地延伸到它的 child 需要的任何东西。所以只需删除那里的 Heigjt=50。

但是，显示底部 CommandBar 的最佳方式是遵循这种格式 -

<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>

这将确保它位于页面底部。要添加 top CommandBar，请改用 Page.TopAppBar。