Mostrar itens de alturas diferentes na galeria de aplicativos de tela

Se itens diferentes do seu conjunto de dados tiverem quantidades diferentes de dados no mesmo campo, você poderá mostrar completamente os itens que tiverem mais dados sem adicionar espaço vazio após os itens que tiverem menos dados. Adicione e configure um controle Galeria Altura flexível para que você possa:

• Configurar os controles Rótulo para serem expandidos ou reduzidos conforme o conteúdo.
• Posicionar cada controle para que ele apareça automaticamente abaixo do controle acima dele.

Neste tutorial, você mostrará dados sobre produtos para piso em um controle Galeria Altura flexível. A imagem de cada produto aparecerá cinco pixels abaixo da visão geral, se ela tiver cinco linhas de texto ou duas linhas.

Sugestões de leitura

Se você nunca adicionou controles a uma galeria, siga as etapas em Mostrar uma lista de itens antes de prosseguir neste tópico.

Adicionar dados a um aplicativo em branco

1. Baixe este arquivo de Excel, que contém nomes, visões gerais e links para as imagens de produtos para piso.

   

2. Carregue o arquivo de Excel em uma conta de armazenamento em nuvem, como OneDrive, Dropbox ou Google Drive.

3. Crie um aplicativo em branco com layout para Smartphone.

4. Adicione uma conexão na tabela FlooringEstimates no arquivo do Excel.

   Para obter mais informações, consulte Adicionar uma conexão.

Adicionar dados a uma galeria

1. Na guia Inserir, clique ou toque em Galeria e, em seguida, clique ou toque em Altura flexível.

   

2. Redimensione a galeria para ocupar a tela inteira.

3. Defina a propriedade Items da galeria como FlooringEstimates.

Mostrar os nomes de produto

1. No canto superior esquerdo da galeria, clique ou toque no ícone de lápis para selecionar o modelo da galeria.

   

2. Com o modelo da galeria selecionado, adicione um controle Rótulo a ele.

3. Defina a propriedade Text do controle Rótulo como esta expressão:
   ThisItem.Name

   

Mostrar as visões gerais de produto

1. Com o modelo da galeria selecionado, adicione outro controle Rótulo e mova-o para abaixo do primeiro controle Rótulo.

2. Defina a propriedade Text do segundo controle Rótulo como esta expressão:
   ThisItem.Overview

3. Com o segundo controle Rótulo selecionado, clique ou toque no ícone de marcação de nome na guia Conteúdo e renomeie o controle como OverviewText.

   

4. Defina a propriedade AutoHeight da caixa OverviewText como verdadeiro.

   Esta etapa garante que a caixa será ampliada ou reduzida para se ajustar ao conteúdo.

   

Mostrar as imagens do produto

1. Redimensione o modelo para que ele seja duas vezes maior do que era antes.

   Você pode adicionar controles ao modelo mais facilmente conforme compila o aplicativo, e essa alteração não afetará a aparência do aplicativo quando ele for executado.

2. Com o modelo da galeria selecionado, adicione um controle Imagem e mova-o para baixo da caixa OverviewText.

3. Verifique se a propriedade Image do controle Imagem foi definida como esta expressão:
   ThisItem.Image

4. Defina a propriedade Y do controle Imagem com base na posição e no tamanho da caixa OverviewText, como nesta expressão:
   OverviewText.Y + OverviewText.Height + 5

   

Aplique o mesmo conceito se você quiser adicionar mais controles: defina cada propriedade Y do controle com base nas propriedades Y e Height do controle acima dela.

Próximas etapas

Saiba mais sobre como trabalhar com um controle Galeria e com fórmulas.