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>

然后我在底部主网格中的其他XAML页面中使用此控件。当在UserControl的设计器中时，底部仍然存在差距所以我认为它与XAML有关在控制中。

Answer 1

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

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

另外，您也不需要为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，请改用<ngb-tabset (tabChange)="tabChange($event)" [activeId]="activeId"> <ngb-tab *ngFor="let comp of components; [id]="start" title="tab1"> <template ngbTabContent > <div> *createTab="comp" </div> </template> </ngb-tab> </ngb-tabset>。

Answer 2

您可以对 CommandBar （ 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没有底部垂直对齐方式，其高度低于其容器的高度，因此预计会像这样呈现。

除此之外，为什么你只使用CommandBar来显示三个点，这样就不会更有效/更好地使用Button来表示＆＃39;更多＆＃39; SymbolIcon并附加MenuFlyout？

UWP CommandBar底部有空隙

3 个答案: