Controle de modo de exibição dividido
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.
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 | |
---|---|
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
- Exemplo da Galeria do WinUI 2 – confira todos os controles XAML em um formato interativo.
Tópicos relacionados
Windows developer
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulteEnviar e exibir comentários de