Windows Phone. Control HubTile.

En esta entrada vamos a analizar todas las posibilidades que podemos encontrarnos utilizando el control HubTile disponible en el Windows Phone Toolkit. Si aún no tienes instalado el Toolkit, te recomiendo que le eches un vistazo a esta entrada donde describimos y explicamos como instalarlo.

El control HubTile fue añadido al conjunto de controles que componen el Toolkit en la versión de Agosto del 2011. Nos permite crear de manera fácil, rápida y con un resultado sumamente vistoso un Tile animado. Es una forma sencilla de crear menus de opciones con un alto atractivo visual en las interfaz de nuestras aplicaciones por ejemplo.

El Tile puede contener:

  • Imágen.
  • Mensaje Principal.
  • Mensaje Secundario.

La animación del Tile es aleatoria utilizando alguna de las siguientes animaciones:

  • Flip Animation.
  • Translate Animation.

Vamos a crear una aplicación de ejemplo donde utilizaremos el control e iremos viendo sus posibilidades.

En este ejemplo para simplificar al máximo el proceso y lograr concentrar toda la atención en el control HubTile vamos a seleccionar un proyecto de tipo Windows Phone Application. Sin embargo, el control HubTile podemos utilizarlo sin problemas dentro de un control Panorama o Pivot por ejemplo.

Tras crear el proyecto lo primero que debemos hacer es agregar la referencia a la librería del Toolkit para tener acceso al control. Para ello agregamos la referencia a la librería Microsoft.Phone.Controls.Toolkit.dll.

A continuación, vamos a crear una instancia del control HubTile en el XAML de nuestra página principal MainPage.xaml.

Lo primero que debemos añadir es la declaración del namespace:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit"

A continuación, podemos definir el control:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <toolkit:HubTile x:Name="hubTile" Title="Título del HubTile" Message="Esto es el mensaje del HubTile!"/>
</Grid>

Si en este momento compilamos (pulsando la tecla F5), veremos el siguiente resultado:

Como habrás podido observar hemos logrado un Tile animado con un buen aspecto visual de una manera extremadamente sencilla. Las propiedades utilizadas hasta este momento (las más básicas) han sido:

  • Title. Es una propiedad de dependencia de tipo string que define el título del Tile.
  • Message. Propiedad de dependencia de tipo string. Es el mensaje del Tile. Aparece con un tamaño de fuente inferior al del título.

Como mencionamos anteriormente el control puede llegar a contener una imágen. Vamos a modificar el Tile anterior para añadir la imágen. Lo primero que debemos hacer es agregar una imágen como recurso al proyecto. Hacemos clic derecho sobre el proyecto y seleccionamos “Agregar Nueva Carpeta”. La llamamos “IMGS”.

A continuación, hacemos clic derecho sobre la carpeta creada y seleccionamos la opción “Agregar elemento existente”:

Buscamos la imágen deseada y la agregamos al proyecto. En un alarde de originalidad en el proyecto de ejemplo que podrás descargar a continuación he llamado a la imágen agregada “imagen”. Vamos a modificar el control para mostrar la imágen:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <toolkit:HubTile x:Name="hubTile" Title="Título del HubTile" Message="Esto es el mensaje del HubTile!" Background="Orange" Source="IMGS/imagen.jpg"/>
</Grid>

El resultado del código anterior es el siguiente:

Se han utilizado dos nuevas propiedades del control:

  • Source. Propiedad de dependencia de tipo ImageSource. Es la imágen utilizada en el control.
  • Background. Es el color de fondo utilizado en el Tile.

El tamaño del control por defecto es 173X173. No se pueden utilizar las propiedades Width ni Height para modificar el tamaño del Tile. Si se desea modificar el tamaño por defecto debemos modificar el estilo del control (ControlTemplate).

Volvemos a modificar el ejemplo utilizado hasta ahora para añadir nuevas propiedades importantes del control:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <toolkit:HubTile x:Name="hubTile" Title="Título del HubTile" Message="Esto es el mensaje del HubTile!" Background="Orange" Source="IMGS/imagen.jpg" DisplayNotification="True" Notification="Notificación!" IsFrozen="False"/>
</Grid>

El resultado es el siguiente:

Hemos utilizado las propiedades:

  • DisplayNotification. Porpiedad de dependencia de tipo booleana. Determina si se muestra el texto de la propiedad Notification o no.
  • Notification. Propiedad de dependencia de tipo string. Texto que se mostrará en la parte trasera del Tile (una vez que haya rotado).
  • IsFrozen. Propiedad de dependencia de tipo booleana. Con un valor de False evita la animación del Tile dejando la imágen fija. Es una propiedad muy útil a nivel de rendimiento. Cuando el Tile no se esté mostrando (por ejemplo, al pasar de un PanoramaItem a otro) mejora el rendimiento el dejar esta propiedad a True.

Podéis ver en video el resultado final de este simple ejemplo a continuación:

También podéis descargaros el código desde el siguiente enlace:

Vamos a seguir analizando las posibilidades del control. Para ello creamos un segundo proyecto en el cual vamos a trabajar con más de un Tile. Vamos a tener en total 4 Tiles (Es un número decidido para trabajar en este ejemplo, no hay límite establecido para el número de Tiles de manera simultánea). Añadimos de la misma forma realizada anteriormente imágenes (al igual que en el ejemplo anterior dentro de una carpeta llamada IMGS). Para este ejemplo se va a crear un menú de cuatro opciones para organizar recetas de comida por distintas categorías. Se han agregado 4 imágenes:

  • Arroces.jpg

  • Pastas.jpg

  • Pescados.jpg

  • Pizza.jpg

Vamos a modificar el Grid principal dividiendolo en 2 filas y 2 columnas:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
</Grid>

A continuación, vamos a agregar 4 Tiles, uno en cada correspondiente celda del Grid:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
<toolkit:HubTile Grid.Row="0" Grid.Column="0" GroupTag="hubs0" Source="IMGS/Arroces.jpg" Title="Arroces" Background="Red" Message="103 Recetas" Margin="10"/>
<toolkit:HubTile Grid.Row="0" Grid.Column="1" GroupTag="hubs0" Source="IMGS/Pizza.jpg" Title="Pizza" Background="Blue" Message="32 Recetas" Margin="10"/>
<toolkit:HubTile Grid.Row="1" Grid.Column="0" GroupTag="hubs1" Source="IMGS/Pastas.jpg" Title="Pastas" Message="77 Recetas" Background="Green" Margin="10"/>
<toolkit:HubTile Grid.Row="1" Grid.Column="1" GroupTag="hubs1" Source="IMGS/Pescados.jpg" Title="Pescados" Background="Orange" Message="654 Recetas" Margin="10"/>
</Grid>

El resultado es el siguiente:

La mayoría del código utilizado en este ejemplo es conocido. Las propiedades utilizadas ya las utilizamos en el primer ejemplo a excepción de la propiedad:

  • GroupTag. Propiedad de dependencia de tipo string. Nos sirve para organizar cada control HubTile en grupos.

En nuestro ejemplo hemos organizado los HubTile de la primera fila en el grupo “hubs0” y los de la segunda fila “hubs1”.

¿Y para que sirve organizar los Tiles en grupos?

¿Recuerdas la propiedad IsFrozen, verdad?. Nos servía para “congelar” un Tile de modo que no tenía animación y afectaba positivamente al rendimiento. También podemos “congelar” grupos de Tiles.

Para “congelar” un grupo de Tiles (lo haremos desde código) sería tan sencillo como:

HubTileService.FreezeGroup("hubs1");

Y para posteriormente “descongelar” el grupo de Tiles:

HubTileService.UnfreezeGroup("hubs1");

Hemos utilizado en ambos casos el HubTileService para controlar la animación del grupo de HubTiles. Para detener la animación (“congelar”) hemos utilizado el método estático FreezeGroup y para volver a activar la animación (“descongelar”) hemos utilizado el método también estático UnfreezeGroup.

El HubTileService cuenta también con métodos estáticos para “congelar” y “descongelar” un HubTile en concreto. Serían FreezeHubTile y UnfreezeHubTile respectivamente.

Hasta ahora hemos visto como el control HubTile nos permite crear Tiles dinámicos de manera rápida y sencilla. Hemos analizado cada una de sus propiedades más interesantes y también hemos visto como utilizándolos en grupo podemos crear menus en nuestras aplicaciones de gran atractivo visual.

Sin embargo, no nos serían de gran utilidad si el usuario no pudiese interactuar con ellos. Vamos a ver a continuación como poder añadir eventos al control.

Podemos agregar de manera muy sencilla el evento Tap para poder determinar cuando el usuario toca encima del Tile. Nos centramos en el primer HubTile utilizado en este segundo ejemplo:

<toolkit:HubTile Grid.Row="0" Grid.Column="0" GroupTag="hubs0" Source="IMGS/Arroces.jpg" Title="Arroces" Background="Red" Message="103 Recetas" Margin="10" Tap="HubTile_Tap"/>

Y en el code behind:

private void HubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
     MessageBox.Show(((HubTile)sender).Title);
}

En este ejemplo mostramos un simple mensaje con el título correspondiente al HubTile. Lo normal en este tipo de acciones será redirigir a otra página tal y como vimos en este artículo.

Podéis ver el resultado de este segundo ejemplo en el siguiente video:

También podéis descargar el resultado de este segundo ejemplo a continuación:

Nada más por hoy. Os animo a trabajar con el control. Cualquier duda o sugerencia podéis plantearlas en los comentarios. Y si os animáis a utilizar el control en vuestras aplicaciones estaré encantado de saberlo y poder utilizarlas.

12 pensamientos en “Windows Phone. Control HubTile.

    • Hola!

      El control HubTile es un UserControl que podemos utilizar para crear la interfaz de nuestras aplicaciones. No podemos colocar en la pantalla de inicio cualquier control (un botón, una lista o en este caso el HubTile) aunque visualmente sean tan parecidos que se pueda crear confusión. Lo que si podemos es crear Tiles Secundarios (creo que es lo que necesitas) o actualizar el contenido del Tile de la aplicación.
      De como actualizar el contenido del Tile principal de la aplicación hablaremos en breve en una nueva entrada.
      En cuanto a los Tiles Secundarios tienes disponible la siguiente entrada:

      https://javiersuarezruiz.wordpress.com/2012/04/30/windows-phone-tiles-secundarios/

      Echale un vistazo (tienes un ejemplo que puedes descargar). Si te surgen dudas puedes preguntar sin problemas. En caso de que no necesitases el uso de Tiles Secundarios y necesites cualquier otra cosa también puedes volver a preguntar proporcionando más información. Espero que te sea de utilidad la respuesta.

  1. Hola,
    Me encanta tu blog… Me esta ayudando muchísimo con la aplicación que estoy desarrollando. Soy diseñadora y todo esto se me hace bastante complicado. Me surge una duda a ver si me puedes ayudar. ¿Se podría poner alguno de los textos del tile en 2 lineas? Es que no tiene propiedad TextWrapping y no tengo ni idea de cómo hacerlo.
    Gracias

    • Hola Alba!

      Me alegro que el blog te sea de utilidad, ese es el principal objetivo.
      Para la duda que planteas lo más directo sería crear un estilo propio para el HubTile.
      Tienes el estilo básico del control en:

      Si te fijas, podrías utilizar la propiedad TextWrapping en los TextBlock que necesites.

      Espero que te sea válido para resolver tu problema. En caso contrario avisa y haremos lo posible😉

      Un saludo.

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