Padrão de lista/detalhes

O padrão de lista/detalhes possui um painel de lista (geralmente com um modo de exibição de lista) e um painel de detalhes do conteúdo. Quando um item na lista é selecionado, o painel de detalhes é atualizado. Esse padrão é frequentemente usado para catálogos de endereços e email.

APIs importantes: classe ListView, classe SplitView

Exemplo de padrão de detalhes de lista

Dica

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

Esse é o padrão certo?

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

Crie um aplicativo de email, catálogo de endereços ou qualquer aplicativo baseado em um layout de detalhes da lista.
Localize e priorize uma grande coleção de conteúdo.
Permitir a adição e remoção rápida de itens de uma lista enquanto alterna entre diferentes contextos.

Escolher o estilo certo

Ao implementar o padrão de lista/detalhes, recomendamos que você use o estilo empilhado ou o estilo lado a lado, com base na quantidade de espaço disponível na tela.

Largura da janela disponível	Estilo recomendado
320 epx-640 epx	Empilhado
641 epx ou mais largo	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 "faz drill down" no painel de detalhes selecionando um item na lista. Para o usuário, parece que a lista e a vista de detalhes estão em duas páginas distintas.

Criar um padrão de lista empilhada/detalhes

Uma maneira de criar o padrão de lista/detalhes empilhado é usar páginas separadas para o painel de lista e o painel de detalhes. Coloque o modo de exibição de lista em uma página e o painel de detalhes em uma página separada.

Componentes para as especificações da lista de formatos empilhados

Para a 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 exibição de detalhes, use o elemento de conteúdo que faz mais sentido. Se você tiver muitos campos isolados, considere um layout de Grade para organizar elementos em um formulário.

Para navegação entre páginas, consulte o histórico de navegação e a navegação para trás para aplicativos do Windows.

Estilo em paralelo

No estilo lado a lado, o painel de lista e o painel de detalhes ficam visíveis ao mesmo tempo.

O padrão de lista / detalhes

A lista no painel de lista tem um visual de seleção para indicar o item selecionado no momento. Selecionar um novo item na lista atualiza o painel de detalhes.

Criar um padrão de lista e detalhes dispostos lado a lado

Uma maneira de criar um padrão de lista/detalhes lado a lado é usar o controle de exibição dividida . Coloque a exibição de lista no painel de exibição dividida e a exibição de detalhes no conteúdo da exibição dividida.

listar partes de exibição dividida de detalhes

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 elemento de conteúdo que faz mais sentido. Considere usar um layout de Grade se você tiver muitos campos separados, para organizar 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 sua interface do usuário e declare pontos de interrupção para os diferentes estados com AdaptiveTriggers.

Obter o código de exemplo

Os exemplos a seguir 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: