UWP CommandBar 底部有间隙答案

【问题标题】：UWP CommandBar has gap at the bottomUWP CommandBar 底部有间隙
【发布时间】：2017-07-18 14:44:53
【问题描述】：

我正在尝试在我的 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 有关。

【问题讨论】：

标签： c# xaml uwp uwp-xaml

【解决方案1】：

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

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

此外，您也无需为您的Grid 指定Height。它会简单地延伸到它的孩子需要的任何东西。所以只需删除那里的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。

【讨论】：

这会很好地工作，但我使用用户控件是为了代码重用，我真的不想在每个页面上为 BottomAppBar 添加 XAML。跨度>
如果是这种情况，您可以参考我的链接答案以在 App.Xaml 中为命令栏提供不同的紧凑高度，或者直接删除所有硬编码的高度值。
我在您的链接答案中使用了该解决方案，它很有效，谢谢！

【解决方案2】：

CommandBar 没有底部垂直对齐，并且它的高度低于其容器的高度，因此预计会这样渲染。

除此之外，你为什么使用CommandBar 只是为了显示三个点，使用带有“更多”符号图标的Button 并附加MenuFlyout 不是更有效/更好吗？ ?

【讨论】：

【解决方案3】：

您可以为 CommandBar 使用 Background 属性和默认样式（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>

【讨论】：