[Windows 8] Tip: Crear un control de rating

Hola a todos!

En las aplicaciones se ha puesto muy de moda usar un control de rating para indicar la valoración de un elemento en concreto:

image

Si estamos desarrollando nuestra aplicación para Windows 8 en HTML5/JS disponemos de serie de un control de rating pero si por el contrario la estamos desarrollando usando XAML/C# este control no existe. En internet hay varios controles listos para descargar, pero si lo único que necesitamos es mostrar la valoración de un elemento, es realmente sencillo construirnos nosotros mismos uno usando una simple ProgressBar y el resultado es increíble.

Lo primero que necesitamos es crear un nuevo proyecto en blanco para Windows 8:

image

En la página en blanco que nos crea añadimos una ProgressBar cuyo mínimo sea 0 y su máximo 5 y le asignamos un valor de 3:

  1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  2:     <ProgressBar Minimum="0" Maximum="5"
  3:                  Value="3"
  4:                  Foreground="White"
  5:                  VerticalAlignment="Center"
  6:                  HorizontalAlignment="Center"
  7:                  Width="300" Height="45">
  8:     </ProgressBar>
  9: </Grid>

El resultado será el siguiente:

image

Mmmm, no es demasiado espectacular, de hecho no se parece absolutamente en nada a un control de rating (salvo por el color blanco…) Vamos a corregir esto, todo elemento en XAML tiene una propiedad Template en la que podemos indicar la plantilla con la que se dibuja el control. En el caso en particular de la ProgressBar además, hay un hecho particular, el código interno del control busca un elemento con el nombre “ProgressBarIndicator”, al encontrarlo, usará las propiedades minimum, maximum y value para calcular el porcentaje del elemento que debe estar visible y cortar el resto. Siguiendo este razonamiento, podríamos hacer algo parecido a esto:

  1: <ControlTemplate>
  2:     <Viewbox HorizontalAlignment="Left">
  3:         <Grid>
  4:             <TextBlock Text="Hello!" Foreground="White" Opacity=".5" HorizontalAlignment="Left"></TextBlock>
  5:             <TextBlock Text="Hello!" Name="ProgressBarIndicator" Foreground="White" HorizontalAlignment="Left"></TextBlock>
  6:         </Grid>
  7:     </Viewbox>
  8: </ControlTemplate>

Hemos indicado dos textblocks, uno de ellos con el nombre ProgressBarIndicator y color blanco, el otro con color blanco y opacidad del 50% y los hemos metido dentro de un ViewBox para que los textos se ajusten al tamaño del ProgressBar, ¿El resultado?

image

Voilá! nuestra barra ahora parece que rellena las letras de la palabra Hello!. Simplemente cambiando el Template de la ProgressBar lo hemos conseguido, pero sigue sin parecerse a un control rating, vamos a por nuestro último truco: Vamos a indicarle a los TextBlocks que usen la fuente Wingdings que viene de serie con Windows y vamos a abrir la aplicación Character Map para ver los caracteres que nos ofrece, en concreto yo he escogido dos:

image

La ventaja de usar fuentes en lugar de imágenes es una principalmente: Escalabilidad, las fuentes soportan escalar a altas resoluciones normalmente mucho mejor que cualquier imagen y el sistema de dibujado de XAML es más eficiente dibujando texto que imágenes!!

Ahora vamos a cambiar los textos para que el primero sea cinco veces la estrella con circulo y el segundo sea cinco veces la estrella sin circulo:

  1: <ControlTemplate>
  2:     <Viewbox HorizontalAlignment="Left">
  3:         <Grid>
  4:             <TextBlock Text="µµµµµ" FontFamily="Wingdings" Foreground="White" Opacity=".5" HorizontalAlignment="Left"></TextBlock>
  5:             <TextBlock Text="«««««" FontFamily="Wingdings" Name="ProgressBarIndicator" Foreground="White" HorizontalAlignment="Left"></TextBlock>
  6:         </Grid>
  7:     </Viewbox>
  8: </ControlTemplate>

Y el resultado final:

image

Ahora sí! es como el control rating de siempre, permite rellenar parcialmente las estrellas y todo esto con 8 líneas de XAML y 0 de C#, también podemos poner el mismo carácter en ambos TextBlocks para que sea más parecido al Rating original e incluso cambiar el color:

image

Es tan sencillo de hacer que es una muestra clara de la versatilidad de XAML y su arquitectura de extensibilidad visual de elementos. En total, nuestra página MainPage.xaml tiene el siguiente código:

  1: <Page
  2:     x:Class="Win8rating.MainPage"
  3:     IsTabStop="false"
  4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6:     xmlns:local="using:Win8rating"
  7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9:     mc:Ignorable="d">
 10: 
 11:     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 12:         <ProgressBar Minimum="0" Maximum="5"
 13:                      Value="4"
 14:                      Foreground="White"
 15:                      VerticalAlignment="Center"
 16:                      HorizontalAlignment="Center"
 17:                      Width="300" Height="75">
 18:             <ProgressBar.Template>
 19:                 <ControlTemplate>
 20:                     <Viewbox HorizontalAlignment="Left">
 21:                         <Grid>
 22:                             <TextBlock Text="«««««" FontFamily="Wingdings" Foreground="White" Opacity=".5" HorizontalAlignment="Left"></TextBlock>
 23:                             <TextBlock Text="«««««" FontFamily="Wingdings" Name="ProgressBarIndicator" Foreground="Gold" HorizontalAlignment="Left"></TextBlock>
 24:                         </Grid>
 25:                     </Viewbox>
 26:                 </ControlTemplate>
 27:             </ProgressBar.Template>
 28:         </ProgressBar>
 29:     </Grid>
 30: </Page>

DISCLAIMER: Esto es un ejemplo muy concreto, por eso he puesto el ControlTemplate dentro del propio ProgressBar. Esto NUNCA debe hacerse en una aplicación real, siempre a un diccionario de estilos!!

Aquí os dejo el código de ejemplo como siempre para que juguéis con el.

Un saludo y Happy Coding!

[Eventos] Megathon Windows 8

logo

Hola a todos!

Hoy vamos a hablar del “megathon” de Windows 8 que se va a celebrar los días 7, 8 y 9 de Septiembre de forma simultánea en varias ciudades de España, entre las que se encuentran Bilbao, Santander, Logroño, Madrid… (podéis ver la lista completa aquí)

¿De qué va esto de un hackathon? Básicamente se trata de que os vengáis tres días a alguna de las ciudades donde se organiza, con vuestro portátil y con Windows 8 y Visual Studio 2012, entre todos los que asistan se formarán equipos y tendrán que desarrollar una aplicación para Windows 8 desde 0 durante el fin de semana. Cada ciudad contará con mentores que ayudarán a los participantes y se darán charlas sobre distintos temas relacionados con el desarrollo en Windows 8 para que todos los asistentes puedan obtener el máximo partido de la experiencia de los mentores.

Así que un fin de semana redondo, inviertes unas horas de tu tiempo y aprendes a desarrollar para Windows 8 de mano de la gente que ya está desarrollando con el y para el a tiempo completo.

spellbook

Vamos que te van a dejar abrir sus libros de hechizos y copiar todos esos hechizos nivel 40 que de otra forma te costaría noches en vela adquirir… muchos sabios guerreros han muerto por siquiera intentarlo y además todo en buena compañía, conociendo gente y desarrollando con ella.

¿Qué más se puede pedir? Pues todavía hay más, para el equipo que haga la mejor aplicación en cada ciudad habrá un premio, un Nokia Lumia 800 para cada integrante del equipo y licencias de Telerik DevCraft. No está mal, aprender, conocer gente y llevarte un móvil de 400 €…

Pero todavía hay más: De entre todos los ganadores de las distintas ciudades se escogerá a un ganador nacional, el premio para este equipo será un viaje a Redmond, al campus de Microsoft, con todos los gastos pagados, un Nokia Lumia y una mochila de Nokia con accesorios.

Así que ya sabes, en la página de cada ciudad tienes el enlace para registrarte. Yo estaré en Bilbao, aquí tienes el enlace de registro: http://hackathonw8bilbao.eventbrite.com y empieza a revisar mi blog para que te vaya sonando algo de todo esto de Windows 8.

Sitio del megathon: http://megathonwindows8.azurewebsites.net/

Un saludo y Happy Coding!