UWP - Пробел CommandBar под кнопками - PullRequest
Новая
       37

UWP - Пробел CommandBar под кнопками

0 голосов
/ 12 апреля 2020

Этот код генерирует пустое пространство, смещение и неправильное расположение, как вы можете видеть на изображении. 

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

enter image description here Вы можете увидеть пустое пространство, добавить слишком высокий значок, метка не на месте (требуется больше места для значка).

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Кажется, что нижний разрыв может быть легко устранен путем определения некоторых высот в Application.Resources.

App.xaml 

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

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)

Чтобы настроить положение значка каждой кнопки, поместите копию стиля AppBarButton по умолчанию в Application.Resources и измените Margin of ContentePresenter (Name = "Content"). 

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

CommandBar

Чтобы отрегулировать положение кнопки с многоточием, аналогичным образом сделайте копию стиля CommandBar и измените Padding of Button (Name = "MoreButton"). 

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

Тогда

Screenshot (close state/open state) of the thin CommandBar copycatting the slender BottomAppBar used in Alarms & Clock UWP app.

Все приведенные здесь объяснения основаны на стилях по умолчанию, определенных в generi c .xaml ver 10.0.14393 .

0 голосов
/ 13 апреля 2020

CommandBar предназначен для использования в Page.TopAppBar или Page.BottomAppBar. Поэтому, если вы просто хотите показать его внизу страницы, просто поместите его в Page.BottomAppBar. Тогда он будет работать без каких-либо проблем. 

<Page.BottomAppBar>
    <CommandBar IsOpen="True">
        <AppBarButton Icon="Add" Label="Nuovo"/>
    </CommandBar>
</Page.BottomAppBar>

Или в противном случае, если вы захотите использовать его в сетке внутри Page. CommandBar, включая Template и Animations, поскольку некоторые важные свойства жестко заданы в стиле по умолчанию.

...