Galeria con campos responsivos

 Crearemos una nuevo screen, e insertamos un contenedor vertical que llamaremos Container_galeria.


Sus valores son:

  • Justify (Vertical): LayoutAlignItems.Start
  • Align (horizontal): LayoutAlignItems.Start
  • Width: Parent.Width
  • Height: Parent.Width
  • X: 0
  • Y: 0


Dentro del Container_galeria, agregaremos un contenedor horizontal y lo llamaremos Container_titulos.


Sus valores son:

  • Justify (Vertical): LayoutAlignItems.Start
  • Align (horizontal): LayoutAlignItems.Start
  • FillPortions: 0
  • Height: 40


Dentro de Container_titulo, agregamos los label de los títulos de los campos de nuestra lista de Sharepoint.


Agregaremos todos los label que deseamos mostrar con sus títulos y los valores de cada label son:

  • AlignInContainer: AlignInContainer.Stretch
  • FillPortions: 1
  • LayoutMinWidth: 100 (para el ejercicio lo dejare en 100, pero puedes cambiar dependiendo el tamaño que necesites mostrar)


Dentro del Container_galeria, agregaremos un contenedor vertical y lo llamaremos Container_campos.


Dentro del Container_campos agregamos una galería vertical y la llamaremos Gallery_campos.

Sus valores son:
  • AlignInContainer: AlignInContainer.Stretch
  • TemplateSize: 40

Dentro de la galería agregaremos un contenedor horizontal que llamaremos Container_tabla, con los siguientes valores:

  • Justify (Vertical): LayoutAlignItems.Start
  • Align (horizontal): LayoutAlignItems.Start
  • Width: Parent.TemplateWidth
  • Height: Parent.TemplateHeight
  • X: 0
  • Y: 0

Dentro del Container_tabla, agregaremos los label que contendrán los campos mi lista de SharePoint, podemos copiar los label que creamos en el Container_titulo, sus valores son:

  • AlignInContainer: AlignInContainer.Stretch
  • FillPortions; 1
  • LayoutMinHeight: 0
  • LayoutMinWidth: 100 (para el ejercicio lo dejare en 100, pero puedes cambiar dependiendo el tamaño que necesites mostrar)


En el Text de cada label llamaremos su valor correspondiente.


Ejecutamos el screen.


Cambia la resolución de tu monitor y se ajustara la tabla.
















Publicar un comentario

Artículo Anterior Artículo Siguiente