Recreando GaugeHector.xaml

Hola qué tal, pues en esta ocasión, a petición de nuestro buen amigo Microsoft MVP Gonzalo Pérez, enseñaré como recrear la versión de GaugeHector.xaml en Expression Blend:

image

Bien, lo primero que hice, fue copiar una de las versiones del control, creados por Gonzalo, para empezar a trabajar del mismo, en mi caso, he escogido la versión GaugeV3b.xaml:

image

Primeramente, cambiemos los colores del fondo, esto se hace selccionando el objeto fondo, que es un círculo:

image 

, y le cambiamos a la propiedad fill, los siguientes valores:

Radial Grandient, con cuatro Gradient Stops, con los valores de izquierda a derecha:

1.- #FF7FC1F8

2.- #FF7DD2EA

3.- #FF48BAEA

4.- #FF1368AD

Con una separación mas o menos así:

image

Nos quedará algo mas o menos así:

image

Posteriormente, tenemos que ajustar, con la herramienta de degradado (Gradient Tool), a algo mas o menos así:

image

Listo, pacemos a recrear las dos lineas siguientes:

image

Esta seguramente es la parte mas complicadita del diseño, pero puede ser resuelta a través de las operaciones entre paths que nos permite realizar Expression Blend sin mayor esfuerzo.

En primer lugar, crearemos 2 círculos, uno encima de otro, puedes bajarle el valor alpha al círculo que irá encima, para que puedan quedar bien ajustado, creo que una imagen vale mas que mil palabras:

image

Como ves en la imagen, he creado 2 círculos, el amarillo servirá para “recortar”  el círculo externo. Pero antes, hagamos una copia del círculo amarillo, y lo ocultaremos, ya que nos servirá mas adelante:

image

Ahora, ya podemos hacer el recorte, seleccionamos primero el círculo amarillo que está visible, y posteriormente el círculo rojo, o sea el que está detrás del amarillo:

image

Acto seguido, nos vamos a menú-Object->Combine->Substract:

image

con esto, verás como es recortado el círculo

image

Cambiémosle el color por este: #FF555B6B

También, debemos cambiar al mismo color, todos los objetos dentro del contenedor Marcadores , con lo que obtendremos algo así:

image

El siguiente paso, es recortar el círculo, esto lo haremos de la misma forma, con operaciones entre paths, crearemos dos cuadrados, cada uno  en los límites del círculo con la enumeración del tacómetro, y sustraeremos de nuevo el cuadrado, menos el círculo:

image —-> image

image –>image

lo que resta, es de nuevo, sustraer un cuadrado, a la parte que ha quedado flotando del círculo:

image ->image

Listo, primera línea hecha!🙂

Ahora, haremos lo mismo para crear una segunda línea, pero cortada en el número 40 y el número 100, para no repetir todo de nuevo, solo pondré algunas imagenes:

image

image

image

image

image

image 

image

image

image

Perfecto, ahora solo basta ponerle un degradado lineal, con 7 Gradient Stops con los valores:

1.-#FFC9D425

2.-#FFF0F6A1

3.-#FFEBF28B

4.-#FFE07D1C

5.-#FFEA8D09

6.-#FFEE4F4F

7.-#FFCD1212

Acomodados de la siguiente forma:

image

Después de hacer un reacomodo a los números, cambiar las propiedades Fill del objeto borde a negro, y de sombra a Nulo, debemos tener algo como esto:

image 

Excelente, pasemos a retocar el rectángulo del centro, el cual es llamado marco

image

Dentro de este, existe un objeto llamado fondo texto, será el primero a retocar, cambiandole los colores del gradiente a estos valores:

Izquierdo: #FF125F7C

Derecho: #FFFFFFFF

image

Modificaremos el fondo con la herramienta de degradado:

image

Ahora, crearemos un círculo dentro de nuestro canvas llamado marco, con los siguientes valores de relleno:

Stroke: No brush

Fill: Lineal Brush con  dos gradientes, el izquierdo con el valor #00FFFFFF y Alpha del 0%; y el derecho con valor #7FFFFFFF y con Alpha del 50%, y el fondo, modificado con la herramienta de degradado así:

image

Con lo que nuestro tacómetro debe lucir así:

image

Lo que falta ahora, es crear ese efecto de reflejo que va encima del control, lo mostraré con imagenes de nuevo, ya que se hace de nuevo a través de operaciones path:

image

image

Al resultado, le agregaremos un relleno gradiente, con 2 gradientStops, ambos de color blanco, pero con valores Alpha diferentes, el primero con 0% de Alpha, y el segundo con 20% de Alpha, con lo que obtendremos:

image

Ya por último, agregamos un círculo color blanco, con Stroke nulo, y con valor de alpha al 16% para dar una mejor impresión, con lo que el resultado final será:

image

 

Listo😀, ha quedado resuelto, como vemos, las operaciones path nos permiten hacer cosas maravillosas.

AHORA SÍ, NO TIENES PRETEXTOS PARA NO CREAR TU VERSION, HAZ TU PROPIA VERSION DEL CONTROL, Y APOYA ESTE PROYECTO!!!.

Mas información en el blog de Gonzalo:  http://geeks.ms/blogs/gperez/

Salu2

Héctor Uriel Pérez Rojas

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