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

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

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

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

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

• Наложение

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

• встроенные

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

• CompactOverlay

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

• CompactInline

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

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

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

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

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

Ниже представлен элемент управления 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>

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

• Пример коллекции WinUI для UWP — просмотрите все элементы управления XAML в интерактивном формате.

Связанные темы

• Шаблон области навигации
• Представление списка
• Список и подробные сведения