Mostrar elementos de alturas diferentes en una galería de aplicaciones de lienzo

Si diferentes elementos del conjunto de datos contienen diferentes cantidades de datos en el mismo campo, puede mostrar por completo los elementos que contienen más datos sin tener que agregar espacio vacío después de los elementos que contienen menos datos. Agregue y configure un control Galería de Altura flexible para que pueda:

  • Configurar controles Etiqueta para que se expandan o se reduzcan según su contenido.
  • Colocar cada control para que aparezca automáticamente bajo el control de encima.

En este tutorial, va a mostrar datos sobre productos para el suelo en un control Galería de Altura flexible. La imagen de cada producto aparece 5 píxeles por debajo de la información general, tanto si esta contiene cinco líneas de texto como solo dos.

Aplicación dinámica.

Lectura recomendada

Si nunca ha agregado los controles a una galería, siga los pasos descritos en Mostrar una lista de elementos antes de continuar en este tema.

Agregar datos a una aplicación en blanco

  1. Descargue este archivo de Excel, que contiene nombres, información general y vínculos a imágenes de productos para el suelo.

    Productos para el suelo.

  2. Cargue el archivo de Excel en una cuenta de almacenamiento en la nube, como OneDrive, Dropbox o Google Drive.

  3. Crear una aplicación en blanco con diseño de Teléfono.

  4. Agregue una conexión a la tabla FlooringEstimates del archivo de Excel.

    Para más información, consulte Agregar una conexión.

  1. En la pestaña Insertar, haga clic o pulse en Galería y luego haga clic o pulse en Altura flexible.

    Agregar galería.

  2. Cambie el tamaño de la galería para que ocupe toda la pantalla.

  3. Establezca la propiedad Items de la galería en FlooringEstimates.

Mostrar los nombres de producto

  1. En la esquina superior izquierda de la galería, haga clic o pulse en el icono de lápiz para seleccionar la plantilla de la galería.

    Icono de lápiz.

  2. Con la plantilla de la galería seleccionada, agregue un control Etiqueta.

  3. Establezca la propiedad Text del control Etiqueta en esta expresión:
    ThisItem.Name

    Agregar etiqueta.

Mostrar las informaciones generales de producto

  1. Con la plantilla de la galería seleccionada, agregue otro control Etiqueta y muévalo debajo del primer control Etiqueta.

  2. Establezca la propiedad Texto del segundo control Etiqueta en esta expresión:
    ThisItem.Overview

  3. Con el segundo control Etiqueta seleccionado, haga clic o pulse en el icono de etiqueta de nombre en la pestaña Contenido y cambie el nombre del control a OverviewText.

    Cambiar el nombre de etiqueta.

  4. Establezca la propiedad AutoHeight del cuadro OverviewText en true.

    Este paso garantiza que el cuadro aumentará o reducirá su tamaño para ajustarse al contenido.

    Altura automática del texto.

Mostrar las imágenes de producto

  1. Cambie el tamaño de la plantilla para que sea dos veces más alta de lo que era.

    Puede agregar controles a la plantilla más fácilmente cuando compile la aplicación y este cambio no afectará al aspecto de la aplicación cuando esta se ejecute.

  2. Con la plantilla de la galería seleccionada, agregue un control Imagen y muévalo debajo del cuadro OverviewText.

  3. Asegúrese de que la propiedad Imagen del control Imagen esté establecida en esta expresión:
    ThisItem.Image

  4. Establezca la propiedad Y del control Imagen en función de la posición y el tamaño del cuadro OverviewText, como se muestra en esta expresión:
    OverviewText.Y + OverviewText.Height + 5

    Aplicación final.

Aplique el mismo concepto si desea agregar más controles: establezca la propiedad Y de cada control en función de las propiedades Y y Altura del control situado por encima de él.

Pasos siguientes

Más información sobre cómo trabajar con un control Galería y fórmulas.

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).