Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
Coleções e listas referem-se à representação de vários itens de dados relacionados que aparecem juntos. As coleções podem ser representadas de várias maneiras, por diferentes controles de coleção (também podem ser chamadas de exibições de coleção). Os controles de coleção exibem e permitem interações com conteúdo baseado em coleção, como uma lista de contatos, uma lista de datas, uma coleção de imagens e assim por diante.
APIs importantes: ItemsView, classe ListView, classe GridView, classe FlipView, classe TreeView, classe ItemsRepeater
Os controlos abrangidos neste artigo incluem:
| Controlo | Utilização primária |
|---|---|
| ItensVer | Para exibir coleções usando um sistema de layout flexível |
| ListView | Para exibir coleções de conteúdo com muito texto |
| Vista de grelha | Para exibir coleções de conteúdo com muitas imagens |
| FlipView | para exibir coleções de conteúdo com muitas imagens que exigem exatamente um item para estar em foco de cada vez |
| Árvore de Visualização | Para exibir coleções de conteúdo com muito texto em uma hierarquia específica |
| ItemsRepeater | como um bloco de construção personalizável para criar controles de coleção personalizados |
Diretrizes de design, recursos e exemplos são fornecidos abaixo para cada controle.
Cada um desses controles (com exceção de ItemsRepeater) fornece estilo e interação internos. No entanto, para personalizar ainda mais a aparência visual da exibição da coleção e os itens dentro dela, um DataTemplate é usado. Informações detalhadas sobre modelos de dados e personalização da aparência de uma exibição de coleção podem ser encontradas na página Contêineres e modelos de itens .
Cada um desses controles (com exceção de ItemsRepeater) também tem comportamento interno para permitir a seleção de um ou vários itens. Consulte Visão geral dos modos de seleção para saber mais.
Um dos cenários não abordados neste artigo é a exibição de coleções em uma tabela ou em várias colunas. Se você estiver procurando exibir uma coleção nesse formato, considere usar o controle DataGrid do Kit de Ferramentas da Comunidade do Windows.
Examples
| WinUI 2 Galeria | |
|---|---|
|
Se você tiver o aplicativo WinUI 2 Gallery instalado, consulte ListView, GridView, FlipView, TreeView e ItemsRepeater em ação. |
Visualização de itens
Você pode usar uma exibição de itens para exibir itens de dados pesados em texto ou imagem em uma variedade de layouts flexíveis que podem ser trocados em tempo de execução.
Será este o controlo correto?
Use um modo de exibição de itens para:
- Exiba uma coleção que consiste principalmente em itens baseados em texto, onde todos os itens devem ter o mesmo comportamento visual e de interação.
- Exiba uma coleção de conteúdo na qual o ponto focal de cada item é uma imagem, e cada item deve ter o mesmo comportamento visual e de interação.
- Exibir bibliotecas de conteúdo.
- Acomodar uma variedade de casos de uso, incluindo os seguintes casos comuns:
- Crie uma lista de contatos.
- Interface de utilizador do tipo montra (ou seja, aplicações de navegação, músicas, produtos)
- Fototecas interativas
Examples
Aqui está uma exibição de itens que mostra uma coleção de fotos em um layout de grade uniforme.
Esta é a mesma coleção mostrada em um layout de pilha. O foco aqui é no texto e não na foto.
Artigos relacionados
| Tópico | Description |
|---|---|
| Visualização de itens | Aprenda o essencial de usar um modo de exibição de itens em seu aplicativo. |
| Recipientes e modelos de itens | Os itens que você exibe em uma lista ou grade podem desempenhar um papel importante na aparência geral do seu aplicativo. Torne seu aplicativo com ótima aparência personalizando a aparência dos itens de coleção por meio da modificação de modelos de controle e modelos de dados. |
Visualização da lista
Os modos de exibição de lista representam itens com muito texto, normalmente em um layout de coluna única empilhado verticalmente. Eles permitem categorizar itens e atribuir cabeçalhos de grupo, arrastar e soltar itens, selecionar conteúdo e reordenar itens.
Será este o controlo correto?
Utilize uma vista de lista para:
- Exiba uma coleção que consiste principalmente em itens baseados em texto, onde todos os itens devem ter o mesmo comportamento visual e de interação.
- Representar uma coleção única ou categorizada de conteúdo.
- Acomodar uma variedade de casos de uso, incluindo os seguintes casos comuns:
- Crie uma lista de mensagens ou registo de mensagens.
- Crie uma lista de contatos.
- Crie o painel de lista no padrão lista/detalhes. Um padrão de lista/detalhes é frequentemente usado em aplicativos de email, nos quais um painel tem uma lista de itens selecionáveis, enquanto o outro painel (detalhes) tem uma exibição detalhada do item selecionado.
Observação
Se você precisar manipular eventos de ponteiro para um UIElement em um modo de exibição rolável (como um ScrollViewer ou ListView), deverá desabilitar explicitamente o suporte para eventos de manipulação no elemento no modo de exibição chamando UIElement.CancelDirectmanipulation. Para reativar eventos de manipulação no modo de exibição, chame UIElement.TryStartDirectManipulation.
Examples
Aqui está uma exibição de lista simples que mostra uma lista de contatos e agrupa os itens de dados em ordem alfabética. Os cabeçalhos de grupo (cada letra do alfabeto neste exemplo) também podem ser personalizados para permanecerem "pegajosos", pois sempre aparecerão na parte superior do ListView durante a rolagem.
Este é um ListView que foi invertido para exibir um log de mensagens, com as mensagens mais recentes aparecendo na parte inferior. Com um ListView invertido, os itens aparecem na parte inferior da tela com uma animação interna.
Artigos relacionados
| Tópico | Description |
|---|---|
| Vista de lista e vista de grelha | Saiba o essencial de usar um modo de exibição de lista ou de grade em seu aplicativo. |
| Recipientes e modelos de itens | Os itens que você exibe em uma exibição de lista ou grade podem desempenhar um papel importante na aparência geral do seu aplicativo. Torne seu aplicativo com ótima aparência personalizando a aparência dos itens de coleção por meio da modificação de modelos de controle e modelos de dados. |
| Modelos de item para exibição de lista | Use estes modelos de item de exemplo para um ListView para obter a aparência de tipos de aplicativos comuns. |
| Listas invertidas | As listas invertidas têm novos itens adicionados na parte inferior, como em um aplicativo de bate-papo. Siga as orientações deste artigo para usar uma lista invertida em seu aplicativo. |
| Pull-to-refresh | O mecanismo pull-to-refresh permite que um usuário puxe para baixo uma lista de dados usando o toque para recuperar mais dados. Use este artigo para implementar o pull-to-refresh em seu modo de exibição de lista. |
| Interface do usuário aninhada | A interface do usuário aninhada é uma interface do usuário (UI) que expõe controles acionáveis incluídos dentro de um contêiner no qual um usuário também pode agir. Por exemplo, você pode ter um item de exibição de lista que contém um botão e o usuário pode selecionar o item de lista ou pressionar o botão aninhado nele. Siga estas práticas recomendadas para fornecer a melhor experiência de interface do usuário aninhada para seus usuários. |
Vista de grelha
As visualizações em grade são adequadas para organizar e navegar em coleções de conteúdo baseadas em imagens. Um layout de exibição de grade rola verticalmente e se desloca horizontalmente. Os itens estão em um layout encapsulado, pois aparecem em uma ordem de leitura da esquerda para a direita e, em seguida, de cima para baixo.
Será este o controlo correto?
Utilize uma vista de grelha para:
- Exiba uma coleção de conteúdo na qual o ponto focal de cada item é uma imagem, e cada item deve ter o mesmo comportamento visual e de interação.
- Exibir bibliotecas de conteúdo.
- Formate as duas vistas de conteúdo associadas ao zoom semântico.
- Acomodar uma variedade de casos de uso, incluindo os seguintes casos comuns:
- Interface de utilizador do tipo montra (ou seja, aplicações de navegação, músicas, produtos)
- Fototecas interativas
Observação
Se você precisar manipular eventos de ponteiro para um UIElement em um modo de exibição rolável (como um ScrollViewer ou ListView), você deve desabilitar explicitamente o suporte para eventos de manipulação no elemento no modo de exibição chamando UIElement.CancelDirectmanipulation(). Para reativar eventos de manipulação no modo de exibição, chame UIElement.TryStartDirectManipulation().
Examples
Este exemplo mostra um layout típico de exibição de grade, neste caso para aplicativos de navegação. Os metadados para itens de exibição de grade geralmente são restritos a algumas linhas de texto e uma classificação de item.
Uma visualização em grade é uma solução ideal para uma biblioteca de conteúdo, que é frequentemente usada para apresentar mídia, como fotos e vídeos. Em uma biblioteca de conteúdo, os usuários esperam poder tocar em um item para invocar uma ação.
Artigos relacionados
| Tópico | Description |
|---|---|
| Vista de lista e vista de grelha | Saiba o essencial de usar um modo de exibição de lista ou de grade em seu aplicativo. |
| Recipientes e modelos de itens | Os itens que você exibe em uma exibição de lista ou grade podem desempenhar um papel importante na aparência geral do seu aplicativo. Torne seu aplicativo com ótima aparência personalizando a aparência dos itens de coleção por meio da modificação de modelos de controle e modelos de dados. |
| Modelos de item para exibição em grade | Use estes modelos de item de exemplo para um ListView para obter a aparência de tipos de aplicativos comuns. |
| Interface do usuário aninhada | A interface do usuário aninhada é uma interface do usuário (UI) que expõe controles acionáveis incluídos dentro de um contêiner no qual um usuário também pode agir. Por exemplo, você pode ter um item de exibição de lista que contém um botão e o usuário pode selecionar o item de lista ou pressionar o botão aninhado nele. Siga estas práticas recomendadas para fornecer a melhor experiência de interface do usuário aninhada para seus usuários. |
Alternar visualização
As visualizações de inversão são adequadas para navegar em coleções de conteúdo baseadas em imagens, especificamente quando a experiência desejada é que apenas uma imagem seja visível de cada vez. Uma visualização invertida permite que o usuário mova ou "folheie" os itens da coleção (vertical ou horizontalmente), fazendo com que cada item apareça um de cada vez após a interação do usuário.
Será este o controlo correto?
Utilize uma vista invertida para:
- Exiba uma coleção pequena a média (menos de 25 itens), onde a coleção é composta por imagens com pouco ou nenhum metadados.
- Exiba os itens um de cada vez e permita que o usuário final folheie os itens em seu próprio ritmo.
- Acomodar uma variedade de casos de uso, incluindo os seguintes casos comuns:
- Galerias de fotos
- Galerias de produtos ou vitrines
Examples
Os dois exemplos a seguir mostram um FlipView que gira horizontal e verticalmente, respectivamente.
Artigos relacionados
| Tópico | Description |
|---|---|
| Alternar visão | Aprenda o essencial de usar uma visualização invertida em seu aplicativo, juntamente com como personalizar a aparência de seus itens em uma visualização invertida. |
Vista em árvore
As exibições em árvore são adequadas para exibir coleções baseadas em texto que têm uma hierarquia importante que precisa ser mostrada. Os itens de exibição em árvore são recolhíveis/expansíveis, são mostrados em uma hierarquia visual, podem ser complementados com ícones e podem ser arrastados e soltos entre as exibições em árvore. As vistas em árvore permitem o aninhamento de nível N.
Será este o controlo correto?
Utilize uma vista em árvore para:
- Exiba uma coleção de itens aninhados cujo contexto e significado dependem de uma hierarquia ou cadeia organizacional específica.
- Acomodar uma variedade de casos de uso, incluindo os seguintes casos comuns:
- Navegador de arquivos
- Organograma da empresa
Examples
Aqui está um exemplo de um modo de exibição em árvore que representa um explorador de arquivos e exibe muitos itens aninhados diferentes complementados por ícones.
Artigos relacionados
| Tópico | Description |
|---|---|
| Vista em árvore | Aprenda os fundamentos de usar uma exibição em árvore em seu aplicativo, juntamente com como personalizar a aparência e o comportamento de interação de seus itens em uma exibição de árvore. |
ItemsRepeater
ItemsRepeater é diferente do resto dos controles de coleção mostrados nesta página porque não fornece nenhum estilo ou interação fora da caixa, ou seja, quando simplesmente colocado em uma página sem definir quaisquer propriedades. ItemsRepeater é um bloco de construção que você, como desenvolvedor, pode usar para criar seu próprio controle de coleções personalizadas, especificamente um que não pode ser alcançado usando os outros controles neste artigo. ItemsRepeater é um painel orientado por dados e de alto desempenho que pode ser adaptado para atender às suas necessidades exatas.
Sugestão
O controle ItemsView é criado sobre ItemsRepeater e fornece muitos dos benefícios de ItemsRepeater sem a necessidade de criar seu próprio controle de coleção personalizado.
Será este o controlo correto?
Use um ItemsRepeater se:
- Você tem uma interface de usuário específica e uma experiência de usuário em mente que não podem ser criadas usando controles de coleção existentes.
- Você tem uma fonte de dados existente para seus itens (como dados extraídos da Internet, um banco de dados ou uma coleção pré-existente em seu code-behind).
Examples
Os três exemplos a seguir são todos os controles ItemsRepeater vinculados à mesma fonte de dados (uma coleção de números). A coleção de números é representada de três maneiras, com cada um dos ItemsRepeaters abaixo usando um Layout personalizado diferente e um ItemTemplate personalizado diferente.
Artigos relacionados
| Tópico | Description |
|---|---|
| ItemsRepeater | Aprenda o essencial de usar um ItemsRepeater em seu aplicativo, juntamente com como implementar todos os componentes visuais e de interação necessários para sua exibição de coleção. |
Lista de verificação de globalização e localização
- Encapsulamento: permita duas linhas para o rótulo da lista.
- Expansão horizontal: certifique-se de que os campos podem acomodar a expansão de texto e são roláveis.
- Espaçamento vertical: use caracteres não latinos para espaçamento vertical para garantir que scripts não latinos sejam exibidos corretamente.
Obter o código de exemplo
- Exemplo de Galeria WinUI - Veja todos os controles XAML em um formato interativo.
Artigos relacionados
Diretrizes de Design e UX
Referência da API
Colabore connosco no GitHub
A fonte deste conteúdo pode ser encontrada no GitHub, onde também pode criar e rever issues e pull requests. Para mais informações, consulte o nosso guia para colaboradores.
Windows developer