UWP CommandBarの最下部にギャップがあります

Question

私は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のものだと思う。

Answer 1

あなたのCommandBarのハードコードHeight=50を削除してみてください。これはデフォルトのコンパクトな高さが48です。

このデフォルトの高さをカスタマイズする場合は、私の答えはhereです。しかし、の2つのピクセルの差がの場合、OS全体でより一貫性のある外観を得るために、デフォルトのスタイルに従うことをお勧めします。

また、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を使用してください。

Answer 2

あなたはコマンドバーため背景プロパティと既定のスタイルを使用することができます（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> 

Answer 3

CommandBarは、下の垂直方向の配置を持っていない、とその高さがありますそのコンテナの高さよりも低いので、そのようにレンダリングされることが期待されます。

それ以外

は、なぜあなただ​​けの3つのドットを表示するCommandBarを使うのですか、より効率的な/より良い「より」SymbolIconとMenuFlyoutが付属しているとそこにButtonを使用するように見ていることではないでしょうか？