Элемент управления "Комбинированный режим"

  • Статья

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

Важные API-интерфейсы: класс SplitView

Вот пример использования SplitView в Microsoft Edge для отображения Центра.

Пример использования комбинированного режима в Microsoft Edge

Область содержимого комбинированного режима всегда является видимой. Панель можно развернуть или свернуть либо оставить открытой; ее можно расположить в левой или правой части окна приложения. Панель можно использовать в четырех режимах.

  • Overlay

    Панель скрыта до тех пор, пока не будет открыта. После открытия панель перекрывает область содержимого.

  • Встроенный

    Панель всегда видима и не перекрывает область содержимого. Доступное пространство экрана делится между областью панели и областью содержимого.

  • CompactOverlay

    В этом режиме отображается узкая часть панели, ширины которой хватает лишь для отображения значков. Ширина закрытой панели по умолчанию составляет 48 пикселей и может быть изменена с помощью свойства CompactPaneLength. При открытии панель перекрывает область содержимого.

  • CompactInline

    В этом режиме отображается узкая часть панели, ширины которой хватает лишь для отображения значков. Ширина закрытой панели по умолчанию составляет 48 пикселей и может быть изменена с помощью свойства CompactPaneLength. Когда панель открыта, уменьшается пространство, доступное для содержимого, так как панель занимает его место.

Выбор правильного элемента управления

Элемент управления "Комбинированный режим" можно использовать для создания взаимодействия типа "секция", позволяющего пользователям открывать и закрывать дополнительную панель. Например, можно использовать SplitView для создания шаблона Список и подробные сведения.

Если вы хотите создать меню навигации с кнопками развертывания/свертывания и список элементов навигации, используйте элемент управления NavigationView.

Примеры

Коллекция WinUI 2
Коллекция WinUI

Если у вас установлено приложение коллекции WinUI 2 , щелкните здесь, чтобы открыть приложение и увидеть SplitView в действии.

Создание комбинированного режима

Здесь представлен элемент управления SplitView вместе с открытой панелью (Pane), отображающейся рядом с содержимым (Content).

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

Получение примера кода