UWP CommandBar перемещается вертикально при изменении IsOpen

Я столкнулся с проблемой макета/шаблона с CommandBar симптомы которого видны на нескольких страницах:

Кажется, что элементы UWP CommandBar внутри CommandBar имеют фактическую высоту 44 пикселя, которая обрезается в элементе управления 40 пикселов.

Помимо уродливого зазора, очень сложно правильно центрировать элементы по вертикали в CommandBar.Content.

О вертикальном положении CommandBar

  • Когда CommandBar находится в верхней части страницы, сама CommandBar не изменяет размер по вертикали.
  • Когда CommandBar находится внизу страницы, сама CommandBar увеличивается по вертикали на 4 пикселя.
  • Во всех случаях другие симптомы

Внизу страницы

Визуальное воспроизведение внизу страницы Красная линия визуализирует нижние 4 пикселя раздела CommandBar.Content. Также с эффектом Reveal слева от курсора мыши видно, что кнопки смещаются вверх. Весь CommandBar растет вертикально

вверху страницы

Визуальное воспроизведение вверху страницы

Попытка выровнять содержимое по вертикали (подсказка: не работает)

Визуальное воспроизведение внизу страницы с вертикальным выравниванием содержимого

Вопрос

Есть ли способ обойти эту проблему? Microsoft квалифицировала это более года назад как то, что могло бы исправление в WinUI 3, которое еще далеко.

Репозиторий ошибок

https://github.com/hansmbakker/CommandBar.BugRepro

Соответствующий код для воспроизведения

<Page x:Class="CommandBar.BugRepro.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:CommandBar.BugRepro"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.BottomAppBar>
        <CommandBar
                    VerticalContentAlignment="Bottom"
                    Background="#BB555555"
                    DefaultLabelPosition="Right">
            <AppBarButton Icon="Back"
                          Label="Back" />
            <AppBarButton Icon="Save"
                          Label="Save" />
            <AppBarSeparator />
            <AppBarButton Label="Title" />
            <AppBarButton Label="Description" />
            <AppBarButton Label="Pictures"
                          Icon="Pictures" />
            <CommandBar.Content>
                <Rectangle Fill="Red"
                           Height="4"
                           Width="200" />
            </CommandBar.Content>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="Setting"
                              Label="Settings">
                    <AppBarButton.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control"
                                             Key="I" />
                    </AppBarButton.KeyboardAccelerators>
                </AppBarButton>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    <Grid>
    </Grid>
</Page>

xaml uwp commandbar
person hansmbakker    schedule 25.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

UWP CommandBar перемещается вертикально при изменении IsOpen

Во время тестирования AppBarSeparator вызывает такое поведение. В настоящее время существует обходной путь, который мог бы исправить это, пожалуйста, укажите AppBarSeparator конкретную высоту менее 40 пикселей.

<AppBarSeparator Height="40"/>
person Nico Zhu - MSFT    schedule 26.10.2020
comment
это работает! Благодарю вас! @Nico Zhu - MSFT можете ли вы гарантировать, что Microsoft воспримет это как ошибку и устранит ее, чтобы обходной путь больше не требовался? - person hansmbakker; 26.10.2020
comment
Конечно, и вы также можете опубликовать это поведение с помощью приложения обратной связи Windows. - person Nico Zhu - MSFT; 27.10.2020