Diretrizes de controles de exibição de grade e de lista

Applies to Windows and Windows Phone

Exemplo de uma exibição de grade e de uma exibição de lista.

Descrição

Uma exibição de grade ou de lista consiste em uma coleção de conteúdo em um aplicativo da Windows Store. As exibições de grade e de lista oferecem aos usuários uma experiência consistente de visualização dos itens, além de serem otimizadas para o toque.

Esses controles vêm em vários formatos: grade desagrupada, grade agrupada, lista (HTML), lista desagrupada (XAML) e lista agrupada (XAML). As listas têm movimentos panorâmicos verticais. As grades têm movimentos panorâmicos horizontais. A ordem de leitura das listas é de cima para baixo. A leitura das grades é de cima para baixo, da esquerda para a direita.

Observação  A Biblioteca do Windows para JavaScript (WinJS) contém um único ListView controle com opções de layout de lista e de grade. Os aplicativos que usam C#/VB/C++ e XAML criam layouts de lista e de grade com dois controles separados, ListView e GridView. Essas diretrizes aplicam-se a todos esses tipos de controles.

Exemplo

Aqui há uma lista de resultados de pesquisa mostrados em uma exibição de grade padrão:

Resultados de pesquisa para a consulta "pizza" mostrados usando a exibição de grade

Este é o controle correto?

Use um controle de exibição de lista ou de grade para apresentar aos usuários uma coleção de dados como uma série de itens. Por exemplo, use uma exibição de grade para apresentar uma lista de emails, itens em um carrinho de compras, uma lista de imagens e resultados de pesquisa.

Use este controle quando quiser:

  • Apresentar dados em grupos
  • Permitir que os usuários selecionem um ou mais itens
  • Personalizar como os seus dados são carregados
  • Facilitar a seleção e o uso do teclado
  • Editar dinamicamente a sua lista de itens e obter animações internas
  • Personalizar os seus itens com modelos ou lhes atribuir seus próprios eventos
  • Exibir itens de diferentes tamanhos

Lista ou grade?

A WinJS fornece dois layouts básicos para ListView: um layout de lista e um layout de grade. (Você também pode criar os seus próprios layouts personalizados.) Se você usar C#/VB/C++ e XAML, use dois controles separados chamados ListView e GridView para alcançar a mesma funcionalidade.

Lista: o layout de lista é exibido como uma única coluna cuja leitura deve ser feita de cima para baixo e que permite movimento panorâmico ou rolagem vertical. Esse layout não mostra informações de grupo, como cabeçalhos ou limites.

Um ListView que usa o layout de lista

Use uma lista quando:

  • Quiser exibir conteúdo em uma janela estreita ou em orientação de retrato.
  • Quiser economizar espaço, já que o layout de lista ocupa menos espaço do que o layout de grade.
  • Não for necessário agrupar itens.
  • Quiser criar o painel mestre no modo de exibição mestre/detalhado. O modo de exibição mestre/detalhado normalmente é usado em aplicativos de email nos quais um lado da tela mostra uma lista de itens para seleção e o outro lado traz uma exibição detalhada do item selecionado. Consulte a seguinte seção, Usar o padrão de manipulação certo, para ver um exemplo dessa exibição.

Grade: o layout de grade (ou GridView em aplicativos que usam XAML) sempre permite o movimento panorâmico horizontal e os itens são dispostos seguindo uma ordem de leitura de cima para baixo e da esquerda para a direita.

Um ListView que usa o layout de grade

Use uma grade quando:

  • Quiser exibir bibliotecas de conteúdo. Consulte Usando o padrão de manipulação certo para ver um exemplo dessa exibição.
  • Seu aplicativo precisar agrupar itens. O agrupamento ajuda a organizar o conteúdo quando a colação de itens é grande ou quando eles são naturalmente agrupados (como uma coleção de músicas organizadas por álbum).
  • Formatação de suas exibições de conteúdo associadas ao zoom semântico.

Usando o padrão de manipulação certo

Os controles da exibição de lista ou de grade são normalmente usados de quatro maneiras diferentes: para exibir uma biblioteca de conteúdo, para exibir dados mestres/detalhados, como um seletor ou para exibir dados estáticos. Quando você usa esses controles de uma dessas maneiras, os usuários esperam que ele siga um destes padrões de manipulação:

  • Padrão de biblioteca de conteúdo

    Use esse padrão ao exibir uma coleção, ou biblioteca, de conteúdo. Ele é tipicamente usado na apresentação de mídia, como fotos e vídeos.

    Uma biblioteca de conteúdo

    Em uma biblioteca de conteúdo, os usuários esperam tocar em um item para invocar uma ação. A maioria das bibliotecas de conteúdo também oferecem suporte à seleção de itens usando movimentos de deslizamento transversal. O deslizamento transversal permite que o usuário deslize perpendicularmente para a direção do movimento panorâmico para selecionar um item. Por exemplo, se você habilitar o deslizamento transversal em sua biblioteca de conteúdo com movimento panorâmico horizontal, o usuário poderá selecionar um item arrastando-o verticalmente.

    Se você estiver usando C#/VB/C++ e XAML, adicione um GridView controle formatado com um destes modelos de item para layouts de grade para implementar rapidamente esse tipo de exibição.

    Se estiver usando JavaScript e HTML, poderá fazer com que seu ListView siga o padrão da biblioteca de conteúdo configurando-o da seguinte forma:

  • Padrão de mestre/detalhes (também conhecido como padrão de exibição dividida)

    Ao usar o padrão mestre/detalhado, você pode usar a exibição de lista para organizar o painel mestre. O painel mestre traz uma lista de itens para seleção. Quando o usuário seleciona um item no painel mestre, outras informações sobre o item selecionado são exibidas no painel de detalhes. A exibição de lista só é útil para formatar uma exibição do painel mestre. Para o painel de detalhes, use outro controle.

    Um aplicativo de email que usa o padrão de mestre/detalhes

    O  modelo de lista de texto e imagem (caixa de entrada) estiliza um ListView para exibir conteúdo no padrão do painel mestre.

    Está usando HTML? Para que o seu ListView se comporte como o painel mestre no padrão de mestre/detalhes, configure-o desta maneira:

    Você pode encadear vários controles de exibição de lista para criar hierarquias complexas de mestre/detalhes.

  • Padrão de seletor

    Use o padrão de seletor quando a ação principal do usuário for a seleção, e a capacidade de invocar um item com um toque não for importante. Neste padrão de manipulação, o toque é usado para seleção além do deslizamento transversal.

    Um ListView demonstrando o padrão de seletor

  • Padrão estático

    Use este padrão quando quiser usar a exibição de lista exclusivamente como uma maneira de apresentar conteúdo e a maioria dos tipos de interatividade estiver desabilitada. Este padrão é útil para coleções de itens que são somente leitura e não podem ser ativados ou navegados.

Consulte o código associado a cada um desses padrões de manipulação no Exemplo de interatividade de personalização de ListView em HTML ou no Exemplo de interatividade de personalização de ListView e GridView em XAML.

O que fazer e o que não fazer

  • Itens na mesma exibição de lista ou de grade devem ter o mesmo comportamento. Por exemplo, se um item em uma exibição de lista realizar uma ação após o toque do usuário, todos os itens na exibição de lista devem fazer o mesmo.
  • Se sua lista estiver dividida em grupos, use o zoom semântico (consulte SemanticZoom (HTML) ou SemanticZoom (XAML)). O zoom semântico facilita para que os usuários naveguem pelo conteúdo agrupado.
    • Use o layout de grade no  ListView controle WinJS ou no controle XAML GridView para organizar a exibição ampliada. Essa exibição mostra os cabeçalhos de grupo e os itens individuais.

      Modo de exibição com zoom ampliado de uma lista de fundos mútuos

    • Use também um layout de grade para a exibição reduzida. Observe que essa exibição mostra apenas os cabeçalhos de grupo.

      Modo de exibição com zoom reduzido de uma lista de fundos mútuos

  • Ao usar cabeçalhos de grupo interativos em uma exibição de grade, registre-se para o pressionamento de teclas Ctrl + Alt + G e use-o para direcionar o usuário até o grupo do item focalizado no momento.
  • Não mostre as marcas de seleção quando os usuários puderem selecionar apenas um único item (quando selectionMode estiver definido como "single"). Consulte a Amostra de interatividade de personalização de ListView em HTML ou a Amostra de interatividade de personalização de ListView e GridView em XAML para ver alguns exemplos.
  • Não use as exibições de lista ou de grade como controles de layout para fins gerais. Para criar um layout estilo tabela ou grade, use um controle Hub, Grid ou um layout de CSS, como o layout de grade ou o layout de caixa flexível ("flexbox"). (Para saber mais sobre layouts de CSS, veja Escolhendo um layout CSS3 para o seu aplicativo.)
  • Não use um controle de exibição de grade ou de lista para criar barras de ferramentas de comandos, como para os botões dos comandos recortar, copiar e colar. Em vez disso, use vários controles de botão dispostos lado a lado.

Diretrizes específicas para controle ListView WinJS

  • Se seu ListView usar um layout de grade, troque para o layout de lista quando seu aplicativo for redimensionado para uma largura mais estreita ou para a orientação de retrato.
  • Se seu ListView usar um layout de grade e contiver grupos, mostre os grupos quando alternar para um layout de lista. Quando o usuário tocar em um grupo, atualize o ListView para exibir os itens no grupo e forneça um botão Voltar que permita a esse usuário retornar à exibição do grupo. Você pode usar o controle SemanticZoom para fornecer essa funcionalidade.
  • Altere como os itens do ListView serão exibidos após o redimensionamento do aplicativo. Você pode usar Consultas de Mídia para atualizar seu CSS automaticamente ou pode alternar para um itemTemplate diferente quando o aplicativo entrar no modo de exibição redimensionado. Se você atualizar sua estilização de CSS, deverá chamar o método forceLayout do controle ListView para que ele mostre as mudanças corretamente.
  • Armazene o valor indexOfFirstVisible do controle ListView antes que o aplicativo seja redimensionado e armazene-o novamente quando o aplicativo retornar para a tela cheia. Assim, o usuário não perderá a posição em que ele estiver na lista.

Tópicos relacionados

Para desenvolvedores (HTML)
WinJS.UI.ListView object
Guia de início rápido: adicionando um ListView
Modelos de item para layouts de lista
Modelos de item para layouts de grade
Para desenvolvedores (XAML)
ListView class
GridView class
Quickstart: adding ListView and GridView controls
Modelos de item para layouts de lista
Modelos de item para layouts de grade
Exemplos
Exemplo de essenciais ListView em HTML
Amostra de interatividade de personalização em HTML
Exemplo de SemanticZoom e agrupamento de ListView em HTML
Exemplo de modelos de item do ListView em HTML
Exemplo de ListView em HTML funcionando com fonte de dados
Exemplo de desempenho de otimização do ListView em HTML
Exemplo de comportamento de carregamento incremental do ListView em HTML
Exemplo de essenciais de ListView e GridView em XAML
Exemplo de interatividade de personalização de ListView e GridView em XAML
Exemplo de SemanticZoom e agrupamento de GridView em XAML

 

 

Mostrar:
© 2014 Microsoft