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>

然后我在底部的主Grid中的其他XAML页面中使用此控件.当在UserControl的设计器中时,底部仍然存在间隙,所以我认为它与控件中的XAML有关.

Answer 1

尝试删除硬编码Height=50在你的CommandBar,其中有一个默认的紧凑高度48.

如果您想自定义此默认高度,请在此处查看我的答案.但是对于两个像素差异,可能值得遵循默认样式以在操作系统上获得更一致的外观.

此外,您也不需要Height为您指定Grid.它只会延伸到孩子需要的任何东西.所以只需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>

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