UWP CommandBar在底部有空隙

我试图在我的UWP应用程序的底部使用CommandBar，但似乎无法摆脱底部的这种空隙。UWP 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>

我然后使用在bottom.When在设计主电网内我的其他XAML页面此这种控制用户控件也有仍处于底部的那个差距如此之我认为这与控制中的XAML有关。

来源

2017-07-17 Matt Brewerton

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

如果要自定义此默认高度，请查看我的答案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>

这将确保它定位在页面的底部。要添加一个顶部CommandBar，请改为使用Page.TopAppBar。

来源

2017-07-17 21:05:38

这将工作出色，但我使用UserControl为了重用代码，我并不想在每个页面上为BottomAppBar添加XAML。 –

如果出现这种情况，可以参考我的链接答案，在App.Xaml中为命令栏指定不同的紧凑高度，或者直接删除所有硬编码的高度值。 –

我在你的链接答案中使用了解决方案，它可以工作，谢谢！ –

您可以使用背景财产和默认样式命令栏（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>

来源

2017-07-17 21:28:17

CommandBar没有底部垂直对齐，它的高度是低于其容器的高度，因此预计会呈现这样的效果。

除此之外，你为什么要使用CommandBar只是为了显示三个点，那岂不是更有效率/更好看使用Button有一个“更多” SymbolIcon并有MenuFlyout附？

来源

2017-07-17 22:11:37

UWP CommandBar在底部有空隙

回答

相关问题