UWP — пустое пространство CommandBar под кнопками

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

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

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


xaml uwp commandbar
person Luca Benatti    schedule 12.04.2020    source источник
comment
Привет, ты изменил стиль по умолчанию? Можете ли вы указать целевую версию и минимальную версию вашего приложения, а также версию системы? Я создал CommandBar в системе 1909, и такой же проблемы не возникло.   -  person Richard Zhang - MSFT    schedule 13.04.2020
comment
@RichardZhang-MSFT для меня это происходит со стилем по умолчанию, как с MinTargetVersion 17763, так и с MinTargetVersion 19041. Я создал расширенный отчет об ошибке по адресу stackoverflow.com/questions/64524669/. Любая помощь или обходной путь будут оценены.   -  person hansmbakker    schedule 25.10.2020

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, что нижний разрыв можно довольно легко устранить, определив некоторые высоты в 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 и измените поле ContentePresenter(Name="Content").

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

Панель команд

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

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

Потом,

Снимок экрана (состояние закрыто/открыто) тонкой панели CommandBar, копирующей тонкую панель BottomAppBar, используемую в приложении

Все приведенные выше объяснения основаны на стилях по умолчанию, определенных в generic.xaml версии 10.0.14393.

person ardget    schedule 16.04.2020

arrow_upward
0
arrow_downward

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

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

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

person ardget    schedule 13.04.2020
comment
Я попробовал это, прежде чем опубликовать проблему. Но не работает, такая же ошибка. Если вы попытаетесь изменить копию модели для AppBarButton, стиль превратится в стиль для AppBar (поэтому я не могу найти стиль по умолчанию). Если вы измените свойство DefaultLabelPosition на Right, все будет работать нормально (только Collapsed и Bottom вызывают проблему). Чтобы было ясно, у меня не может быть такой же панели команд, как в приложении Allarms and Clock W10. - person Luca Benatti; 13.04.2020
comment
Извините, я не могу понять, в чем ваш вопрос. Насколько мне известно, CommandBar можно сделать таким же, как в приложении «Будильник и часы», изменив стили; Грубо говоря, CommandBar(Высота=48->40 и Шаг=12->16) и AppBarButton(Высота=60->56). Если вы столкнулись с трудностями при написании оригинальных стилей, подробно опишите их, предоставив все соответствующие коды. - person ardget; 14.04.2020