Поделиться через

Элемент управления разделенным представлением

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

Важные API: класс SplitView

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

Пример разделенного представления Microsoft Edge

Область содержимого разделенного представления всегда отображается. Панель может разворачиваться и сворачиваться или оставаться в открытом состоянии, и может размещаться с левой или правой стороны окна приложения. На панели есть четыре режима:

  • Наложение

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

  • встроенные

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

  • CompactOverlay

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

  • CompactInline

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

Это правильный контроль?

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

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

Примеры

Галерея WinUI для UWP
Галерея WinUI

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

Создание разделенного представления

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

<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>

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

  • Last updated on