[Windows 8.1] Introducción al control Hub

W8.1_LogoIntroducción

Recientemente se han presentado con grandes novedades para los desarrolladores .NET en el marco del //BUILD 2013. Se ha liberado Windows 8.1 y con el han llegado una gran variedad de novedades de cara a los desarrolladores. Entre las novedades recibidas tenemos un listado interesante de nuevos controles. El listado de nuevos controles es el siguiente:

  • AppBar controls
  • CommandBar
  • DatePicker
  • Flyout
  • Hub
  • Hyperlink
  • MenuFlyout
  • SettingsFlyout
  • TimePicker

De entre todos uno de los más interesantes ya que se utiliza como estructura base sobre la que crear la aplicación podemos destacar al control Hub.

El control Hub como ya hemos mencionado nos permite definir la estructura base de nuestra aplicación (tal y como nos lo permitía el control GridView por ejemplo). Nos permite estructuar la información en secciones donde lo más importante y atractivo visualmente se colocará a la izquierda mientras que el resto de opciones donde se profundiza más en la información se situa más a la derecha. El usuario accede a la información extra haciendo scroll horizontal. El objetivo del control es permitir mostrar la información con el mayor atractivo visual posible para atraer al usuario a descubrirla. Con respecto al GridView contamos con ventajas como:

  • No tenemos que enlazar al control a una colección de elementos. Podemos crear secciones con contenido y controles dispares en cada una de ellas.
  • Mayor capacidad de personalización.

Un ejemplo sencillo y reconocible de uso del control Hub lo podéis encontrar en la aplicación del tiempo:

El tiempo

El tiempo

Pinta bien, ¿te apuntas?

Arrancamos!

Abrimos Visual Studio 2013 Preview y creamos un nuevo proyecto. Dentro de la sección “Tienda Windows” contamos con las plantillas para crear aplicaciones Windows Store. Si nos fijamos contamos con novedades como por ejemplo la plantilla “Aplicación Hub” que nos crea la estructura de la aplicación utilizando el control Hub para ello. Podríamos utilizar la plantilla sin embargo para hacer el ejemplo lo más sencillo posible vamos a partir de una aplicación vacía:

Hub Template

Hub Template

Nos centramos en la vista principal (MainPage.xaml) donde vamos a añadir el control Hub. Partimos de lo más básico:

<Hub/>

No hay que agregar ni librerías ni namespaces. Recordar que es un nuevo control del SDK. Para desarrollar un poco el ejemplo vamos a simular la creación de una aplicación sobre la nueva Xbox. Continuamos estableciendo la propiedad básica, el título:

<Hub Header="Xbox One">
</Hub>

Fácil, ¿verdad?. El resultado hasta ahora sería algo asi:

Título del Hub

Título del Hub

El título en el control Hub siempre estará visible incluso cuando el usuario realice scroll horizontal sobre el contenido. El contenido del título puede ser tan simple como la cadena anterior o podemos requerir un contenido de mayor peso como imágenes o el botón volver por ejemplo. Podemos utilizar la propiedad Header para definir un contenido más complejo:

<Hub>
     <Hub.Header>
          <Grid>
          </Grid>
     </Hub.Header>
</Hub>

Añadiendo secciones

El control Hub se compone de secciones de tipo HubSection. El usuario accede a las secciones realizando scroll horizontal. En nuestro ejemplo sobre la Xbox One añadiremos tres secciones:

  • Primera sección: Mostrará una imágen sobre la consola junto a un titular.
  • Segunda sección: Descripción de la consola. Utilizaremos el control RichTextBox junto al nuevo control Hiperlink.
  • Tercera sección: Mostraremos el listado de juegos en el ya conocido control GridView.

Suena bien, ¿cierto?. Manos a la obra!

Vamos a definir la estructura base de secciones que sería algo como lo siguiente:

<Hub Header="Xbox One">
     <HubSection>
     </HubSection>
     <HubSection Header="Qué es" Width="500">
     </HubSection>
     <HubSection Header="Juegos" Width="1200">
     </HubSection>
</Hub>

El resultado:

Ya tenemos secciones.

Ya tenemos secciones.

Nos centramos en la primera sección. Ya hemos comentado que vamos a añadir un banner que cubra una zona importante para llamar la atención del usuario junto a un titular. Dado que queremos cubrir toda la zona de la sección con la imágen la estableceremos como fondo:

<HubSection Width="800">
     <HubSection.Background>
          <ImageBrush ImageSource="/Assets/Xbox.jpg" Stretch="UniformToFill"/>
     </HubSection.Background>
</HubSection>
Vamos mejorando

Vamos mejorando

Y el titular, simple, ¿o no?. Las secciones del control Hub soportan cualquier tipo de contenido, desde un simple botón a un complejo GridView sin embargo no tienen ninguna propiedad Content. Estableceremos el contenido estableciendo su DataTemplate:

<DataTemplate>
     <RichTextBlock>
          <Paragraph FontSize="32">
          Te damos la bienvenida a una nueva generación!
          </Paragraph>
     </RichTextBlock>
</DataTemplate>

Pasamos a la segunda sección. En esta sección vamos a añadir información sobre la consola. Vamos a utilizar para ello el control RichTextBox:

<DataTemplate>
     <RichTextBlock>
          <Paragraph FontSize="20">
          Te damos la bienvenida a una nueva generación de juegos y entretenimiento. En la que los juegos superan las barreras del realismo. Y puedes escuchar música mientras juegas. Donde puedes pasar de ver la TV a películas, música y juegos en un instante. Y vivir una experiencia totalmente personalizada. Donde todo lo que te entretiene está en un solo lugar. Esto es Xbox One, el sistema que lo incluye todo.
          </Paragraph>
          <Paragraph FontSize="20">
          Xbox One es una modernísima consola de juegos, una TV de última generación, un centro de cine en casa y muchísimo más. Los días en los que tenías que cambiar los enchufes de la TV para jugar o ver una película han pasado a la historia. Con Xbox One, puedes pasar rápidamente de la TV a películas, música o juegos. Solo necesitas tu voz para hacerlo.
          </Paragraph>
     </RichTextBlock>
</DataTemplate>

Otro de los controles añadidos en Windows 8.1 es el control Hyperlink. Nos permite definir enlaces dentro del texto enriquecido. La interpretación del texto es exactamente igual al resto con la única diferencia de ser marcado con un color diferente y por supuesto que al ser pulsado nos redirige a una URI especificada.

Añadimos al RichTextBox un enlace:

<Hyperlink FontSize="28" Foreground="DarkGreen" NavigateUri="http://www.xbox.com/es-ES/xboxone/meet-xbox-one">Sorpréndete.</Hyperlink>

La propiedad fundamental del control Hyperlink es NavigateUri donde especificamos la URI a donde se navegará al pulsar el enlace.

El resultado hasta ahora:

Segunda sección preparada

Segunda sección preparada

Vamos a por la tercera sección. En esta sección vamos a añadir un control de mayor peso añadiendo un GridView donde mostrar el listado de juegos de la consola.

Creamos una carpeta “Models” donde definiremos la clase Games donde almacenaremos la información de cada juego:

public class Game
{
     public string Title { get; set; }
     public string Description { get; set; }
     public string Image { get; set; }
}

A continuación, creamos una carpeta “ViewModels” donde prepararemos la colección de juegos que se mostrará en la vista:

public class MainViewModel
{

     public List<Game> Games
     {
          get;
          set;
     }

     public MainViewModel()
     {
          Games = new List<Game>();
          Games.Add(new Game { Title = "Forza Motorsport 5", Description = "Forza Motorsport, la franquicia de carreras mejor valorada de la última década, vuelve con una experiencia de conducción total de última generación creada en exclusiva para Xbox One.", Image = "http://compass.xboxlive.com/assets/cb/19/cb19177d-969a-48dc-91f2-d6e8416968d6.jpg?n=XBR_Game1.jpg" });
          Games.Add(new Game { Title = "Ryse", Description = "En medio del caos de la última etapa del Imperio Romano, conviértete en el soldado Marius Titus y súmate a una trepidante campaña para vengar la muerte de tu familia.", Image = "http://compass.xboxlive.com/assets/69/d2/69d2d734-7a15-40b5-a7b9-9baea1937c40.jpg?n=XBR_Game4.jpg" });
          Games.Add(new Game { Title = "Dead Rising 3", Description = "Todo vale como arma en Dead Rising 3. Explora la ciudad de Los Perdidos (California) como Nick Ramos, un mecánico con un pasado misterioso, que debe encontrar el modo de escapar antes de que un ataque militar acabe con la ciudad y todos sus habitantes.", Image = "http://compass.xboxlive.com/assets/83/c7/83c74b66-5f24-4263-bc03-3c3c021c4a11.jpg?n=XBR_Game5.jpg" });
          Games.Add(new Game { Title = "Call of Duty: Ghosts", Description = "La franquicia que ha sentado las bases de toda una generación de juegos se pone el listón aún más alto con el nuevo Call of Duty: Ghosts.", Image = "http://compass.xboxlive.com/assets/07/bb/07bbfdcf-646b-4ac9-b764-c8253e7dabc3.jpg?n=XBR_Game3.jpg" });
          Games.Add(new Game { Title = "Quatum Break", Description = "Domina el tiempo para sobrevivir al presente… y salva el futuro. De los creadores de Alan Wake y Max Payne llega Quantum Break, una experiencia de entretenimiento revolucionaria a medio camino entre el juego y la televisión.", Image = "http://compass.xboxlive.com/assets/aa/84/aa842d82-5c4e-4292-a12c-432af66f1e53.jpg?n=XBR_Game2.jpg" });
     }
}

En el code behind de la vista principal (MainPage.xaml.cs) establecemos el DataContext al ViewModel creado:

DataContext = this.DataContext ?? new MainViewModel();

Ya tenemos la infraestructura necesaria para definir nuestro listado de juegos, pasamos a la vista. Definimos un GridView:

<HubSection Header="Juegos" Width="1200">
     <DataTemplate>
          <GridView>
          </GridView>
     </DataTemplate>
</HubSection>

Hacemos Binding a la colección de juegos:

<HubSection Header="Juegos" Width="1200">
     <DataTemplate>
          <GridView SelectionMode="None"
          ItemsSource="{Binding Games}">
          </GridView>
     </DataTemplate>
</HubSection>

Establecemos el DataTemplate con la defnición de como se verá cada juego en la lista y como están organizados:

<HubSection Header="Juegos" Width="1200">
     <DataTemplate>
          <GridView SelectionMode="None" ItemTemplate="{StaticResource Standard310x260ItemTemplate}"
          ItemsSource="{Binding Games}">
               <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
               </GridView.ItemsPanel>
          </GridView>
     </DataTemplate>
</HubSection

Si ejecutamos obtendremos el siguiente resultado:

GridView como sección del Hub

GridView como sección del Hub

NOTA: Al GridView de la sección no se puede acceder desde el code behind aun asignándole un nombre.

IsHeaderInteractive=”True”

Lo visto hasta ahora del control es muy interesante pero sería insuficiente para poder gestionar toda la lógica necesaria en una aplicación real. En nuestro ejemplo sobre la nueva Xbox One mostramos un listado de juegos. Lo ideal sería mostrar el listado de juegos top, los más recientes o lo más destacados por ejemplo y al pulsar sobre la cabecera, mostrar una vista de detalles con el listado completo de juegos.

Efectivamente os sonará esta posibilidad a la ya utilizada en el control GridView por ejemplo.

¿Es posible realizarlo?

Claro!. Las secciones del control Hub cuentan con una propiedad para activar esta posibilidad llamada isHeaderInteractive:

<HubSection Header="Juegos" Width="1200" IsHeaderInteractive="True"/>

Ahora debemos añadir el evento clic que se produce al pulsar las cabeceras:

<Hub Header="Xbox One" SectionHeaderClick="Hub_SectionHeaderClick" />

Por último, en el controlador del evento clic podemos determinar con facilidad la cabecera pulsada gracias al EventArgs del evento:

private void Hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
{
     if(e.Section.Name == "Juegos")
     {
          //Navegamos a la vista de detalles!
     }
}

Podéis ver el resultado del ejemplo en el siguiente video:

También podéis descargar el código fuente del ejemplo desde el siguiente enlace:

Espero que lo visto en la entrada os sea de interés. Recordar que si os surgen dudas o sugerencias podéis dejarlas en los comentarios de la entrada.

Keep Pushing!

Más información

6 pensamientos en “[Windows 8.1] Introducción al control Hub

  1. Hola Javier, disculpa después de hacer ese hub como podría realizar la pagina de detalle de cada ítem, estoy empezando con el desarrollo de apps para W8.1 y me surge esta duda, saludos

    • Hola Carlos,

      Tendrías que añadir dos páginas nuevas. Una nueva para mostrar el conjunto de elementos detallado al pulsar en una cabecera (usa la propiedad IsHeaderInteractive=”True”). Y otra para mostrar los detalles de un elemento. Puedes conseguirlo tanto usando el patrón MVVM con comandos como con eventos.
      Intentaré realizar un ejempo completo al respecto. Puedes echarle un ojo también a los ejemplos sobre el Hub que tienes disponible en el Dev Center: http://code.msdn.microsoft.com/windowsapps/

      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