Windows Phone. Layout. Control Canvas.

En esta entrada vamos a analizar el control Canvas. Es uno de los controles de Layout disponibles en Windows Phone. Nos permitirá posicionar los elementos visuales utilizados para construir la interfaz de usuario de nuestras aplicaciones.

Todos los elementos visuales los colocaremos dentro de un contenedor. Recuerda que como vimos en esta entrada, las aplicaciones en Windows Phone las desarrollamos utilizando Silverlight. En Silverlight tenemos los siguientes tipos de contenedores (paneles):

  • Canvas
  • StackPanel
  • Grid

Canvas

Es el panel más sencillo de todos. Podemos posicionar los elementos mediante coordenadas X-Y. Utilizamos posiciones absolutas (de manera similar a la forma utilizada en HTML – CSS). Las propiedades que utilizaremos para ello son:

  • Canvas.Top. Es la distancia en pixeles entre el borde superior del Canvas y el elemento visual.
  • Canvas.Left. Es la distancia en pixeles entre el borde izquierdo y el elemento visual.

Vamos a crear un projecto nuevo para descubir las posibilidades del control Canvas.

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Agregamos dentro del Grid principal de la página MainPage.xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Canvas Background="Red">
          <Ellipse Fill="Blue" Canvas.Top="100" Canvas.Left="50" Height="50" Width="50" />
     </Canvas>
</Grid>

El resultado es el siguiente:

Hemos añadido un control Canvas con fondo rojo dentro del Grid principal. Dentro del Canvas hemos añadido un objeto de tipo Ellipse. No nos vamos a centrar mucho en el control Ellipse, solo indicaremos que nos permite dibujar de manera muy sencilla elipses o círculos. Hemos asignado el mismo ancho y alto al objeto Ellipse consguiendo de esa forma un círculo. Llegamos a la parte importante. Para colocar el objeto en la posición deseada hemos utilizado las propiedades Canvas.Top y Canvas.Left.

Sencillo, ¿verdad?. Vamos a seguir trabajando en el ejemplo para añadir algo más de dificultad.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Canvas Background="Red">
           <Ellipse Fill="Black"  Height="50" Width="50" />
           <Ellipse Fill="Blue" Canvas.Top="100" Canvas.Left="50" Height="50" Width="50" />
           <Ellipse Fill="Green" Canvas.Top="200" Canvas.Left="150" Height="50" Width="50" />
           <Ellipse Fill="Yellow" Canvas.Top="300" Canvas.Left="200" Height="50" Width="50" />
           <Ellipse Fill="Pink" Canvas.Top="400" Canvas.Left="250" Height="50" Width="50" />
           <Ellipse Fill="Orange" Canvas.Top="500" Canvas.Left="350" Height="50" Width="50" />
     </Canvas>
</Grid>

El resultado es:

No hemos hecho más que añadir nuevos objetos Ellipse y ordenarlos dentro del Canvas exactamente igual a como lo hicimos en el ejemplo anterior. Solo prestaremos especial atención a la Ellipse de color negro (situada en el margen superior izquierdo). Si prestamos atención a esa primera Ellipse no le hemos asignado las propiedades Canvas.Top ni Canvas.Left por lo que los valores que tomará en ambos casos es un 0. Por eso motivo el elemento visual aparecerá en la parte superior izquierda.

Existe otra propiedad a destacar del Canvas que es ZIndex. Nos permite gestionar de manera muy sencilla que elementos están al frente y cuales detras en caso de solapamiento. Es un valor numérico. A valores más altos asignados a un elemento más al frente estará situado. A valores más bajos (se permiten valores negativos, por ejemplo -99 es válido), más hacia el fondo estará el elemento situado.

Veamos un ejemplo:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Canvas Background="Red">
           <Ellipse Fill="Black"  Height="50" Width="50" />
           <Ellipse Fill="Blue" Canvas.Top="100" Canvas.Left="155" Canvas.ZIndex="2" Height="50" Width="50" />
           <Ellipse Fill="Green" Canvas.Top="100" Canvas.Left="140" Canvas.ZIndex="1" Height="50" Width="50" />
           <Ellipse Fill="Yellow" Canvas.Top="300" Canvas.Left="200" Height="50" Width="50" />
           <Ellipse Fill="Pink" Canvas.Top="400" Canvas.Left="250" Height="50" Width="50" />
           <Ellipse Fill="Orange" Canvas.Top="500" Canvas.Left="350" Height="50" Width="50" />
     </Canvas>
</Grid>

El resultado es el siguiente:

Como podemos ver en el resultado la esféra de color azul está solapando a la de color verde. Esto es así porque el valor de la propiedad Canvas.ZIndex de la esféra azul es superior al valor de la propiedad Canvas.ZIndex de la esféra verde.

¿Qué ocurriría si quitamos las propiedades Canvas.ZIndex utilizadas?

Obtendríamos esto:

Justo el efecto contrario. ¿Porque?

Sencillo. Sin establecer las propiedades Canvas.ZIndex en caso de solapamiento el elemento situado más al frente será el añadido al Canvas más tarde.

Nota: Las propiedades utilizadas en los ejemplos como Canvas.Top, Canvas.Left y Canvas.ZIndex son propiedades adjuntas. Las propiedades adjuntas (un concepto bastante conocido para los que tengan experiencia desarrollando interfaces usando XAML en WPF o Silverlight) son propiedades que heredan los elementos contenidos dentro de otro. En nuestros ejemplos, los objetos Ellipse heredaban propiedades del Canvas.

Puedes descargar el ejemplo realizado en esta entrada a continuación:

En próximas entradas analizaremos el resto de controles que tenemos a nuestra disposición para controlar el Layout de nuestras aplicaciones. Espero que lo visto en esta entrada os sea de utilidad.

3 pensamientos en “Windows Phone. Layout. Control Canvas.

    • Rodrigo, un placer poder ayudar. En cuanto a los enlaces que comentas, ¿a cuales te refieres?. He revisado los enlaces del artículo con el ejemplo incluido y todo parece estar correcto. Si no te funciona algo, contesta por favor para intentar ayudar en lo posible.

      Un saludo.

  1. Pingback: [Windows 10] Control RelativePanel | Javier Suárez | Blog

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