Expression Lab

Editando propiedades de un simple style texbox

En el panel Properties ubicamos el módulo Brushes, en el cual elegiremos ‘Solid Color Brush’ como relleno y de color elegiremos el blanco (#FFFFFFFF); hecho esto pasamos al siguiente módulo que es “Appearance” en el que modificaremos CornerRadius (por defecto en 2,2,2,2) y usaremos 10 en esta ocasión (basta con ponerlo una sola vez, lo cual hará que fije el mismo valor para todas las esquinas del rectángulo).

Aunque pareciera que hemos terminado estilizando nuestro campo de texto, aún falta hacer algunas correcciones:

En primer lugar debemos ajustar el elemento llamado “PART_ContentHost” (que es el contenedor del texto que ingresará el usuario o bien, que tendrá el campo por defecto), ya que sus esquinas, cuadradas, salen fuera de los bordes del campo de texto con esquinas redondeadas que hicimos en el paso anterior.

Una opción podría ser la de reducir el ancho del campo con tal de evitar que los bordes sobre salgan y aunque parece ser una buena alternativa, en este caso optaremos por definir el fondo como transparente, ya que al tener algunos de nuestros campos deshabilitados sus fondos cambian a ser grises y por lo tanto el “PART_ContentHost” con fondo blanco, quedaría fuera de lugar.

Para definir el fondo como transparente, seleccionaremos PART_ContentHost y en el panel de propiedades dentro de Brushes, haremos click en el pequeño cuadrado amarillo que se encuentra a un costado de Background y de las opciones elegiremos “Reset”. Esto borrará las propiedades de color que tenga el contenedor de texto y dejará el fondo transparente.

NOTA: Es posible también usar la primera opción que mencioné, reduciendo el ancho de la caja contenedora de textos y dejando el fondo blanco, aunque eso lo veremos en otra ocasión.

Finalmente, modificaremos el ancho y la altura de nuestro contenedor de texto con tal de que los textos no estén muy cercanos o encimados a los bordes del campo de texto, lo cual los hará más agradables.

Hechos los pasos anteriores, podemos regresar a la ventana principal de nuestra aplicación y oh sorpresa! Los demás campos de texto han cambiado también y ya tienen las esquinas redondeadas (esto se debe a que para todos los casos usamos el Simple Style text field y que editamos el template, que funciona para todos los elementos ‘Simple style text field’).

5.- El siguiente paso consiste en trabajar en el estilo que tendrán los botones de nuestra aplicación. Tal como en los campos de texto, la idea aquí es utilizar el diseño que creé en Expression Design para mantener el mismo look.

Dicho lo dicho, trabajaremos de forma similar como lo hicimos para personalizar los campos de texto:

Para personalizar los botones procederemos en manera similar a la que utilizamos con los campos de texto; la diferencia es que modificaremos también los colores del Simple Style button para que se vean tal como el diseño que creé en Expression Design.

6.- Para modificar el estilo de los botones que tengo en la aplicación selecciono cualquiera de éstos y presiono el botón derecho del mouse y elijo la opción Edit Control Parts (Template) > Edit Template.

En el panel Objects and Timeline seleccionamos el elemento ‘Border’ y nos dirigimos al panel de propiedades para cambiar el color de los botones.

Antes de poder definir los valores del degradado que deseamos que tenga nuestro botón, tenemos que quitar el estilo predefinido que tienen los botones en Blend; para hacer esto hacemos click sobre el cuadro amarillo que se encuentra a un costado de la propiedad Background, en el panel de propiedades, y presionamos ‘Reset’, lo cual dejará el fondo del botón transparente y listo para que podamos definir nuestro propio estilo.

Ahora el fondo del botón es transparente y podemos proceder a aplicar nuestro nuevo estilo.

Para definir el nuevo estilo de los botones, seleccionaremos ‘Gradient Brush’ en Brushes, dentro del Panel de Propiedades. Ahí crearemos tres diferentes colores: #FFFFFF, #DFDFDF y #C9C9C9. Checa la imagen siguiente para ver cómo los acomodé (están situados en el orden en el que los mencioné).

Una vez que has terminado de fijar estos colores u otros que quieras para tus botones, regresaremos a la ventana principal de nuestra aplicación donde encontraremos que los botones que creamos desde el inicio ya tienen el estilo que acabamos de crear. Sin complicaciones.

Habiendo personalizado el ‘look’ de nuestros botones y campos de texto, pasamos a darle el toque final a nuestra aplicación y para eso trabajaremos con Expression Blend y Expression Design en conjunto.

Iremos primero a Expression Design, y mientras presionamos la tecla Control, seleccionaremos las siguientes capas: Fondo, Nombre de la aplicación y Header y las copiaremos (Ctrl+C) e iremos a Expression Blend, que es donde las utilizaremos.

Estando en Blend, pegaremos las capas presionando Ctrl + v o bien, Edit > Paste . Por defecto, las capas se pegarán alineadas al borde superior izquierdo y por encima de todos los elementos de nuestra aplicación, por lo cual haremos click derecho en cualquiera de ellas (mientras siguen seleccionadas), y elegiremos la opción Order > Send to back para tenerlas debajo de los demás componentes.

Habiendo copiado y pegado las capas en Blend, las enviaremos detrás de todos los demás elementos: Haz click con el botón derecho del mouse sobre cualquiera de los elementos que acabas de pegar y selecciona la opción Order > Send to Back. Ya tenemos el fondo listo y el trabajo ahora consistirá en alinear y acomodar los botones y campos de texto tal y como se presentan en el diseño hecho en Design. Como último paso, ya pa’ cerrar, cambiaremos el ancho de Window (la ventana de nuestra aplicación y que se encuentra en el panel Objects and Timeline), a 311px de ancho, que es la medida de la interface diseñada en Expression Design y zaz, tenemos nuestra interfaz lista!

Espero que este primer tutorial les haya sido útil, espero sus comentarios y sugerencias. Nos vemos en el próximo post! felices fiestas :)