Padrão de lista/detalhes

  • Artigo

O padrão de lista/detalhes tem um painel de lista (geralmente com uma exibição de lista) e um painel de detalhes para o conteúdo. O painel Detalhes será atualizado quando um item da lista for selecionado. Esse padrão é usado com frequência para email e catálogos de endereços.

APIs importantes: classe ListView, classe SplitView

Exemplo de padrão de lista/detalhes

Dica

Se quiser usar um controle do XAML que implemente esse padrão para você, recomendamos o Controle XAML ListDetailsView do Kit de Ferramentas da Comunidade do Windows.

Este é o padrão certo?

O padrão de lista/detalhes funciona bem se você quiser:

  • Criar um aplicativo de email, catálogo de endereços ou qualquer aplicativo que se baseia em um layout de lista-detalhes.
  • Localizar e priorizar uma grande coleção de conteúdo.
  • Permitir a rápida adição e remoção de itens de uma lista enquanto se alterna entre contextos.

Escolher o estilo certo

Ao implementar o padrão de lista/detalhes, recomendamos usar o estilo empilhado ou lado a lado, dependendo do espaço disponível na tela.

Largura da janela disponível Estilo recomendado
320 epx-640 epx Empilhado
641 epx ou mais larga Lado a lado

Estilo empilhado

No estilo empilhado, apenas um painel fica visível por vez: a lista ou os detalhes.

Detalhes de uma lista no modo empilhado

O usuário começa no painel de lista e depois explora mais a fundo no painel de detalhes, selecionando um item da lista. Para o usuário, será como se as exibições de lista e de detalhes existissem em duas páginas separadas.

Criar um padrão de lista/detalhes empilhado

Um modo de criar o padrão de lista/detalhes empilhado é usando páginas separadas para o painel de lista e o painel de detalhes. Coloque a exibição de lista em uma página e o painel de detalhes em outra.

Partes dos detalhes da lista no estilo empilhado

Na página de exibição de lista, um controle de exibição de lista funciona bem para apresentar listas que podem conter imagens e texto.

Para a página de visualização de detalhes, use o content element que faz mais sentido. Se tiver muitos campos separados, considere o uso de um layout de grade para organizar os elementos em um formulário.

Para navegação entre páginas, confira o histórico de navegação e navegação regressiva para aplicativos do Windows.

Estilo lado a lado

No estilo lado a lado, os painéis de lista e de detalhes ficam visíveis ao mesmo tempo.

Padrão de lista/detalhes

A lista do painel de lista tem uma seleção visual que indica o item atualmente selecionado. Ao selecionar um novo item na lista, o painel de detalhes será atualizado.

Criar um padrão de lista/detalhes lado a lado

Um modo de criar um padrão de lista/detalhes lado a lado é usando o controle modo divisão. Coloque a exibição de lista no painel de modo divisão e a exibição de detalhes no conteúdo do modo divisão.

partes do modo divisão dos detalhes da lista

Para o painel de lista, um controle de exibição de lista funciona bem para apresentar listas que podem conter imagens e texto.

Para o conteúdo de detalhes, use o content element que faz mais sentido. Se tiver muitos campos separados, considere o uso de um layout de grade para organizar os elementos em um formulário.

Layout adaptável

Para implementar um padrão de lista/detalhes para qualquer tamanho de tela, crie uma interface do usuário responsiva com um layout adaptável.

layout de detalhes da lista adaptável

Criar um padrão de lista/detalhes adaptável

Para criar um layout adaptável, defina diferentes VisualStates para a interface do usuário e declare pontos de interrupção para os estados diferentes com AdaptiveTriggers.

Obter o código de exemplo

Os seguintes exemplos implementam o padrão de lista/detalhes com layouts adaptáveis e demonstram a associação de dados a recursos estáticos, de banco de dados e online:

Dica

Se quiser usar um controle do XAML que implemente esse padrão para você, recomendamos o Controle XAML ListDetailsView do Kit de Ferramentas da Comunidade do Windows.