Padrão de lista/detalhes

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

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 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 que você use o estilo empilhado ou o estilo lado a lado, com base na quantidade de espaço disponível na tela.

Estilo empilhado

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

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/detalhes empilhado

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.

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 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, consulte o histórico de navegação e a navegação para trás para aplicativos do Windows.

Estilo lado a lado

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

A lista do painel de lista tem uma seleção visual que indica o item atualmente selecionado. 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 modo divisão e a exibição de detalhes no conteúdo do modo divisão.

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

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:

• Amostra de mestre/detalhes
• Exemplo de ListView e GridView
• Exemplo de banco de dados de pedidos do cliente
• Exemplo de Leitor do RSS

Artigos relacionados

• Listas
• Barras de comandos e aplicativos
• Classe ListView
• Classe SplitView