Table of contents
ALM
TOC
Collapse the table of content
Expand the table of content

Modern UI Tip: Crear un control de rating

Microsoft Community Publishing Service|Última actualización: 26/05/2017
|
2 Colaboradores

Por Josue Yeray Julian Ferreiro

¡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:

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:

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:

    <Grid Background="{StaticResource
    ApplicationPageBackgroundThemeBrush}">
    <ProgressBar Minimum="0" Maximum="5"
    Value="3"
    Foreground="White"
    VerticalAlignment="Center"
    HorizontalAlignment="Center"
    Width="300" Height="45">
    </ProgressBar>
    </Grid>

El resultado será el siguiente:

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:

    <ControlTemplate>
    <Viewbox HorizontalAlignment="Left">
    <Grid>
    <TextBlock Text="Hello!" Foreground="White" Opacity=".5"
    HorizontalAlignment="Left"></TextBlock>
    <TextBlock Text="Hello!" Name="ProgressBarIndicator"
    Foreground="White" HorizontalAlignment="Left"></TextBlock>
    </Grid>
    </Viewbox>
    </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?

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:

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 círculo y el segundo sea cinco veces la estrella sin círculo:

    <ControlTemplate>
    <Viewbox HorizontalAlignment="Left">
    <Grid>
    <TextBlock Text="µµµµµ" FontFamily="Wingdings"
    Foreground="White" Opacity=".5"
    HorizontalAlignment="Left"></TextBlock>
    <TextBlock Text="«««««" FontFamily="Wingdings"
    Name="ProgressBarIndicator" Foreground="White"
    HorizontalAlignment="Left"></TextBlock>
    </Grid>
    </Viewbox>
    </ControlTemplate>

Y el resultado final:

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:

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:

    <Page
    x:Class="Win8rating.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Win8rating"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource
    ApplicationPageBackgroundThemeBrush}">
    <ProgressBar Minimum="0" Maximum="5"
    Value="4"
    Foreground="White"
    VerticalAlignment="Center"
    HorizontalAlignment="Center"
    Width="300" Height="75">
    <ProgressBar.Template>
    <ControlTemplate>
    <Viewbox HorizontalAlignment="Left">
    <Grid>
    <TextBlock Text="«««««" FontFamily="Wingdings"
    Foreground="White" Opacity=".5"
    HorizontalAlignment="Left"></TextBlock>
    <TextBlock Text="«««««" FontFamily="Wingdings"
    Name="ProgressBarIndicator" Foreground="Gold"
    HorizontalAlignment="Left"></TextBlock>
    </Grid>
    </Viewbox>
    </ControlTemplate>
    </ProgressBar.Template>
    </ProgressBar>
    </Grid>
    </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 él.

Un saludo y Happy Coding!

© 2017 Microsoft