[Windows 10] Control RelativePanel

Window - 01Ordenando 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:

Nueva App UAP

Nueva App 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.

RelativePanel 01

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:

RelativePanel 02

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:

RelativePanel 03

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s