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:
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:
Primeramente, cambiemos los colores del fondo, esto se hace selccionando el objeto fondo, que es un círculo:
, 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í:
Nos quedará algo mas o menos así:
Posteriormente, tenemos que ajustar, con la herramienta de degradado (Gradient Tool), a algo mas o menos así:
Listo, pacemos a recrear las dos lineas siguientes:
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:
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:
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:
Acto seguido, nos vamos a menú-Object->Combine->Substract:
con esto, verás como es recortado el círculo
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í:
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:
—-> 
–>
lo que resta, es de nuevo, sustraer un cuadrado, a la parte que ha quedado flotando del círculo:
->
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:
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:
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:
Excelente, pasemos a retocar el rectángulo del centro, el cual es llamado marco
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
Modificaremos el fondo con la herramienta de degradado:
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í:
Con lo que nuestro tacómetro debe lucir así:
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:
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:
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á:
Listo :D, 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
Pasado el día último de inscripción de aplicaciones para el concurso, estaré discutiendo cómo he desarrollado esta pequeña aplicación, y porqué no? desarrollar una versión mas completa en WPF 🙂
Héctor Uriel Pérez Rojas Weblog 