Tutorial Blend 4

El lenguaje de definición de interfaces de usuario XAML nos permite crear Styles que podemos aplicar a todos nuestros controles modificando completamente la apariencia visual de nuestros controles sin afectar su código, en este tutorial veremos cómo cambiar el estilo de un botón y crear un estilo nuevo que podremos aplicar a cualquier botón que deseemos.

Primero creamos un proyecto en Blend 4 de tipo WPF, debemos saber que ya contamos con un grupo de estilos que vienen incorporados en Blend 4, los cuales podemos modificar para no tener que crear el style desde cero.

Arrastramos un control SimpleButton a nuestra ventana de la aplicación y veremos inmediatamente que su apariencia visual en diferente a la de un botón normal.

En la pestaña resources podremos ver todos los Brushes y Styles que se agregaron al momento de arrastrar el botón estos recursos corresponden no solo al botón sino también a los demás controles. Aquí podremos editar las Brushes en común de todos los controles, si queremos editar un estilo en específico hacemos lo siguiente:

En el panel de propiedades podremos hacer todos los cambios que queramos al estilo actual editándolo a nuestro gusto, pero en esta ocasión nos interesa saber cómo crear un style para un botón desde cero así que veremos cómo se hace.

Como crear un style para un botón

Primero agregamos un botón normal a nuestra aplicación y hacemos lo siguiente:

Se nos abre un cuadro de dialogo donde deberemos indicar el nombre del style y donde deseamos guardarlo si escogemos Application estará almacenado en el archivo App.xaml, la opción por defecto es This Document en este caso en estilo se guardara en la ventana actual donde estamos trabajando y la última opción es Resource dictionary la cual almacenara el estilo en un archivo independiente .xaml que especifiquemos, podemos usar uno existente o crear uno nuevo, al usar esta opción se nos hará más fácil el usar el estilo en otro proyecto ya que solo tendremos que importar el archivo .xaml.

En este momento nuestro estilo solo cuenta con grid por lo que lo primero que deberíamos agregar será un TextBlock para mostrar el contenido textual del botón, enlazamos la propiedad Text del TextBlock con la propiedad Content del Button para que se muestre el texto. Template Binding nos permite enlazar propiedades del Control al que estamos editando con los nuevos controles que añadimos para cambiar su apariencia.

De aquí en adelante el trabajo que sigue es poner trabajar nuestra creatividad, podemos agregar más controles complementarios, formas, color, gradientes, efectos como mejor nos parezca y enlazarlos si lo necesitamos. Por ejemplo agregando dos bordes y cambiando sus propiedades podemos crear un estilo para el botón como este:

Ahora el botón que tenemos no cambia de apariencia al pasar de un estado a otro, los estados son la apariencia visual que tiene el control en determinado momento como por ejemplo cuando el ratón esta sobre el o cuando esta seleccionado o no está habilitado, podemos ver los estados en el panel correspondiente.

Base es la apariencia base que tiene el control si por ejemplo decidimos agregar un rectángulo más a nuestro estilo debemos seleccionar base, agregarlo y cambiar su estilo a una apariencia en común para todos los estados.

Al seleccionar uno de los estados blend comienza la grabación de los cambios de propiedades así que cualquier cambio que hagamos en la propiedades automáticamente será grabado, de este modo podemos especificar una apariencia visual diferente para cada estado.

Default transition nos sirve para especificar una transición y el tiempo que durara esta.

Además podemos crear animaciones que se iniciaran al cambiar de estado. Podemos hacer grandes cosas solo debemos ser un poco creativos y dejar volar la imaginación.

Déjame un comentario si te interesa saber más sobre este u otros temas.