[Windows 10] Control RelativePanel

Ordenando los elementos de la interfaz

Tenemos una gran diversidad de elementos visuales que nos permiten
definir la interfaz de usuario de nuestras Apps. Entre las opciones
disponibles tenemos un grupo especial destinado a organizar otros
elementos, los paneles.

Hasta ahora contábamos con el siguiente listado de paneles XAML en Windows y Windows Phone:

  • Grid: Nos permite crear filas y columnas para organizar los elementos visuales.
  • StackPanel:
    En inglés la palabra “stack” significa apilar o amontonar. Este control
    nos apila los elementos visuales que contiene verticalmente u
    horizontalmente.
  • Canvas: Podemos posicionar los elementos mediante coordenadas X-Y. Utilizamos posiciones absolutas.
  • ScrollViewer: Permite contener elementos más alla de los límites de la pantalla acceciendo a los mismos realizando scroll.
  • Border: Permite dibujar un borde alrededor de otro elemento visual.
  • ViewBox: Permite reescalar el contenido para rellenar el espacio disponible.
  • WrapGrid: Posiciona los elementos hijos secuencialmente de izquierda a derecha y de arriba a abajo.

Adaptando la interfaz

Adaptar la interfaz de usuario a distintos tamaños, orientaciones y
otros cambios no es algo nuevo. Con la llegada de las Apps Modern UI en
Windows 8.0 debíamos gestionar la vista Narrow. Con las Apps Universales
en Windows 8.1 desarrollábamos Apps con Windows Phone y Windows en
mente. Ante este tipo de situaciones, hasta ahora hemos utilizado
diferentes técnicas. Las más habituales son:

  • Vistas XAML separadas por plataforma.
  • Diseño flexible. Utilizar posiciones y tamaños relativos para permitir escalar facilmente.
  • Utilizar diferentes estados visuales (Visual States) para gestionar vistas en diferentes dispositivos, pantallas e incluso orientaciones.

En este artículo vamos a analizar un nuevo panel llamado Relative Panel. Estamos ante un nuevo Panel
que tiene como principal objetivo permitir crear interfaces con diseños
que se adapten con facilidad a cualquier tipo de tamaño. Posiciona a
los elementos que contiene de manera relativa entre ellos.

El control RelativePanel

Con la llegada del SDK de Windows 10 Preview nos llega el Panel Relative Panel. Permite:

  • Posicionar elementos con respecto al panel con múltiples posiciones.
  • Alinear elementos con respecto a sus “hermanos”. Podemos posicionar
    elementos visuales de manera relativa con respecto a otros elementos
    también con distintas opciones para posicionar segun nuestras
    necesidades.

Posicionando elementos

Para probar las posibilidades del nuevo panel crearemos un nuevo proyecto UAP:

Nuestro objetivo en el ejemplo sera añadir múliples rectángulos que
posicionaremos utilizándo todas las opciones disponibles que nos otorga
RelativePanel.

En nuestra vista principal añadimos el Panel:

<RelativePanel>
</RelativePanel>

Comenzamos añadiendo dos rectángulos de 100 x 200 px posicionándolos con respecto al RelativePanel:

<RelativePanel>
     <Rectangle x:Name="BlueRect"
        Height="100"
        Width="200"
        Fill="Blue" />
     <Rectangle x:Name="RedRect"
        Height="100"
        Width="100"
        Fill="Red"
        RelativePanel.AlignHorizontalCenterWithPanel="True"
        RelativePanel.AlignVerticalCenterWithPanel="True" />
</RelativePanel>

Analizamos el trozo de XAML anterior. Podemos posicionar los
elementos visuales dentro del RelativePanel con una serie de propiedades
adjuntas:

  • RelativePanel.AlignLeftWithPanel: Alineación a la izquierda del Panel.
  • RelativePanel.AlignRightWithPanel: Alineado a la derecha del Panel.
  • RelativePanel.AlignTopWithPanel: Alineado en la parte superior del Panel.
  • RelativePanel.AlignBottomWithPanel: Alineado en la parte inferior del Panel.
  • RelativePanel.CenterInPanelHorizontally: Alineado horizontalmente en el centro del Panel.
  • RelativePanel.CenterInPanelVertically: Alineado verticalmente en el centro del Panel.

Por defecto se aplican las propiedades
AlignLeftWithPanel y AlignTopWithPanel, por ese motivo el rectángulo
azul se posiciona en la parte superior izquierda de la ventana. En
cuanto al cuadrado rojo, lo posicionamos en el centro del panel tanto
horizontalmente como verticalmente.

Además de posicionar elementos con respecto al Panel, podemos posicionar
elementos de manera relativa a otros elementos. En nuestro ejemplo,
vamos a posicionar un nuevo rectángulo con respecto a otro:

<RelativePanel>
     <Rectangle x:Name="BlueRect"
        Height="100"
        Width="200"
        Fill="Blue" />
     <Rectangle x:Name="GreenRect"
        Height="100"
        Width="100"
        Fill="Green"
        RelativePanel.RightOf="BlueRect"
        RelativePanel.AlignVerticalCenterWith="BlueRect" />
     <Rectangle x:Name="RedRect"
        Height="100"
        Width="100"
        Fill="Red"
        RelativePanel.AlignHorizontalCenterWithPanel="True"
        RelativePanel.AlignVerticalCenterWithPanel="True" />
</RelativePanel>

El resultado:

Repasemos el último código añadido. Hemos añadido un nuevo rectángulo
verde que se posiciona a la derecha del rectángulo previo azul. Para
ello, se utilizan las propiedades adjuntas RelativePanel.RightOf y RelativePanel.AlignVerticalCenterWith.
La primera propiedad adjunta posiciona al elemento visual a la derecha
del elemento indicado mientras que la segunda lo alinea de forma
centrada verticalmente.

Tenemos una gran variedad de opciones para posicionar un elemento visual con respecto a otro:

  • RelativePanel.Above: Posiciona encima del elemento visual indicado.
  • RelativePanel.Below: Posiciona debajo del emento visual indicado.
  • RelativePanel.LeftOf: Posiciona a la izquierda del elemento visual indicado.
  • RelativePanel.RightOf: Posiciona a la derecha del elemento visual indicado.

En cuanto a establecer la alineación, de nuevo, contamos con una gran diversidad de opciones:

  • RelativePanel.AlignTopWith: Alineación con respecto a la parte superior del elemento visual indicado.
  • RelativePanel.AlignRightWith: Alineación con respecto a la  derecha del elemento visual indicado.
  • RelativePanel.AlignBottomWith: Alineación con respecto a la parte inferior del elemento visual indicado.
  • RelativePanel.AlignLeftWith: Alineación con respecto a la  izquierda del elemento visual indicado.
  • RelativePanel.AlignHorizontalCenterWith: Alineación central de forma horizontal con respecto elemento visual indicado.
  • RelativePanel.AlignVerticalCenterWith: Alineación central de forma vertical con respecto elemento visual indicado.

Continuamos con otro rectángulo posicionado de forma relativa con
respecto al rectángulo inicial azul. En este caso, vamos a posicionar el
rectángulo debajo y de forma centrada:

<RelativePanel>
     <Rectangle x:Name="BlueRect"
        Height="100"
        Width="200"
        Fill="Blue" />
     <Rectangle x:Name="GreenRect"
        Height="100"
        Width="100"
        Fill="Green"
        RelativePanel.RightOf="BlueRect"
        RelativePanel.AlignVerticalCenterWith="BlueRect" />
     <Rectangle x:Name="YellowRect"
        Height="100"
        Width="100"
        Fill="Yellow"
        RelativePanel.Below="BlueRect"
        RelativePanel.AlignHorizontalCenterWith="BlueRect" />
     <Rectangle x:Name="RedRect"
        Height="100"
        Width="100"
        Fill="Red"
        RelativePanel.AlignHorizontalCenterWithPanel="True"
        RelativePanel.AlignVerticalCenterWithPanel="True" />
</RelativePanel>

El resultado:

Podéis descargar el ejemplo realizado a continuación:

También podéis acceder al código fuente directamente en GitHub:

Ver GitHub

Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.

Conclusiones

Este nuevo panel llega con un firme objetivo, permitir posicionar de
forma sencilla permitiendo crear interfaces adaptativas a las distintas
plataformas. El uso de RelativePanel junto a los AdaptiveTriggers (y
junto al nuevo control SplitPanel) formarán una base muy comun en una
gran cantidad de Apps UAP.

Más información

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *