Controle de modo de exibição dividido

  • Artigo

Um controle de modo divisão tem um painel que pode ser expandido/recolhido e uma área de conteúdo.

APIs importantes: classe SplitView

Veja a seguir um exemplo do aplicativo Microsoft Edge usando SplitView para mostrar seu Hub.

Exemplo de modo de exibição de divisão do Microsoft Edge

A área de conteúdo da exibição dividida está sempre visível. O painel pode ser expandido e recolhido ou ficar em estado aberto, e pode apresentar-se do lado esquerdo ou direito da janela de um aplicativo. O painel tem quatro modos:

  • Sobreposição

    O painel ficará oculto até que seja aberto. Quando aberto, o painel se sobrepõe à área de conteúdo.

  • Embutido

    O painel está sempre visível e não sobrepõe-se à área de conteúdo. As áreas do painel e de conteúdo dividem o espaço real disponível na tela.

  • CompactOverlay

    Uma parte estreita do painel está sempre visível, com largura suficiente para mostrar os ícones. A largura do painel padrão fechado é 48px, que pode ser modificada com CompactPaneLength. Se o painel estiver aberto, ele ficará sobreposto à área de conteúdo.

  • CompactInline

    Uma parte estreita do painel está sempre visível, com largura suficiente para mostrar os ícones. A largura do painel padrão fechado é 48px, que pode ser modificada com CompactPaneLength. Se o painel estiver aberto, ele reduzirá o espaço disponível para o conteúdo, empurrando o conteúdo do seu jeito.

Esse é o controle correto?

O controle de modo divisão também pode ser usado para criar qualquer experiência de "gaveta" na qual os usuários podem abrir e fechar o painel complementar. Por exemplo, você pode usar o SplitView para criar o padrão de lista/detalhes.

Se você quiser criar um menu de navegação com um botão expandir/recolher e uma lista de itens de navegação, use o controle NavigationView.

Exemplos

WinUI 2 Gallery
Galeria do WinUI

Se você tiver o aplicativo Galeria do WinUI 2 instalado, clique aqui para abrir o aplicativo e ver o SplitView em ação.

Criar um modo de exibição dividido

Eis um controle SplitView com um painel aberto sendo exibido embutido ao lado do conteúdo.

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

Obter o código de exemplo