UWP - 按钮下的 CommandBar 空白区域 [英] UWP - CommandBar blank space under Buttons

问题描述

此代码会生成空白、未对齐和错位，如您在图像中所见.

This code generates a blank space, a misalignment and a misposition as you can see in the image.

    <CommandBar Grid.Row="1" IsOpen="True" VerticalAlignment="Stretch">
        <AppBarButton Icon="Add" Label="Nuovo" MinHeight="40" />
    </CommandBar>

可以看到空白，添加图标太高，标签错位(需要更多的图标空间).

You can see the blank space, the add icon is too high, the Label is misplaced (more space from the icon is needed).

推荐答案

似乎可以通过在 Application.Resources 中定义一些高度来轻松消除底部间隙.

It seems that bottom gap can be eliminated rather easily by defining some heights in Application.Resources.

应用程序.xaml

<Application.Resources>
    <x:Double x:Key="AppBarThemeMinHeight">56</x:Double>
    <x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
</Application.Resources>

MainPage.xaml

MainPage.xaml

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Label="New" >
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xe109;" FontSize="16"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="Select">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xe133;" FontSize="16"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

精细对齐(可选)

AppBarButton(和/或 AppBarToggleButton)

要调整每个按钮的图标位置，请在 Application.Resources 中放置默认 AppBarButton 样式的副本并更改 ContentePresenter(Name="Content") 的 Margin.

Fine Alignment (Optional)

AppBarButton (and/or AppBarToggleButton)

To adjust icon position of each button, put a copy of the default AppBarButton style in Application.Resources and alter Margin of ContentePresenter(Name="Content").

<ContentPresenter x:Name="Content" Margin="0,10,0,3" ... />

命令栏

要调整省略号按钮的位置，同样复制 CommandBar 样式并更改 Button(Name="MoreButton") 的 Padding.

CommandBar

To adjust ellipsis button's position, similarly make a copy of CommandBar style and alter Padding of Button(Name="MoreButton").

<Button x:Name="MoreButton" Padding="16,17,16,0"  ... />

那么，

以上所有解释均基于 generic.xaml ver 10.0.14393 中定义的默认样式.

All the explation here-in-above are based on the default styles defined in generic.xaml ver 10.0.14393.

这篇关于UWP - 按钮下的 CommandBar 空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！