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在底部有空隙

回答

相關問題