Partilhar via

Controlo de vista dividida

Um controle de exibição dividida tem um painel expansível/recolhível e uma área de conteúdo.

APIs importantes: classe SplitView

Aqui está um exemplo do aplicativo Microsoft Edge usando o SplitView para mostrar seu Hub.

Exemplo de exibição dividida do Microsoft Edge

A área de conteúdo de uma vista dividida está sempre visível. O painel pode expandir-se e recolher ou permanecer num estado aberto e pode apresentar-se do lado esquerdo ou direito de uma janela da aplicação. O painel tem quatro modos:

  • Sobreposição

    O painel fica oculto até ser aberto. Quando aberto, o painel sobrepõe a área de conteúdo.

  • em linha

    O painel está sempre visível e não sobrepõe a área de conteúdo. O painel e as áreas de conteúdo dividem o espaço da tela disponível.

  • CompactOverlay

    Uma parte estreita do painel é sempre visível neste modo, que é largo o suficiente para mostrar ícones. A largura padrão do painel fechado é de 48px, que pode ser modificada com CompactPaneLength. Se o painel for aberto, ele sobreporá a área de conteúdo.

  • CompactInline

    Uma parte estreita do painel é sempre visível neste modo, que é largo o suficiente para mostrar ícones. A largura padrão do painel fechado é de 48px, que pode ser modificada com CompactPaneLength. Se o painel for aberto, reduzirá o espaço disponível para o conteúdo, empurrando o conteúdo para fora do seu caminho.

Será este o controlo correto?

O controle de visualização dividida pode ser usado para criar qualquer experiência de "gaveta" onde os usuários podem abrir e fechar o painel suplementar. Por exemplo, você pode usar 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 .

Examples

WinUI 2 Galeria
Galeria WinUI

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

Criar uma vista dividida

Aqui está um controle SplitView com um Painel aberto aparecendo 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

  • Last updated on