Tutorial: Crear un botón mediante Microsoft Expression Blend

Este tutorial le guiará por el proceso de creación de un botón personalizado de WPF mediante Microsoft Expression Blend.

Importante

Microsoft Expression Blend funciona mediante la generación del lenguaje de marcado extensible de aplicaciones (XAML) que se compila para crear el programa ejecutable. Si prefiere trabajar directamente con XAML, hay otro tutorial que crea la misma aplicación que esta usando XAML con Visual Studio en lugar de Blend. Consulta Crear un botón mediante XAML para obtener más información.

En la ilustración siguiente se muestra el botón personalizado que creará.

Convertir una forma en un botón

En la primera parte de este tutorial se crea el aspecto personalizado del botón personalizado. Para ello, primero se convierte un rectángulo en un botón. A continuación, agregue formas adicionales a la plantilla del botón, creando un botón de aspecto más complejo. ¿Por qué no empezar con un botón normal y personalizarlo? Dado que un botón tiene funcionalidad integrada que no necesita; para botones personalizados, es más fácil empezar con un rectángulo.

Para crear un nuevo proyecto en Expression Blend

1. Inicie Expression Blend. (Haga clic en Inicio, seleccione Todos los programas, Microsoft Expressiony, a continuación, haga clic en Microsoft Expression Blend).

2. Maximice la aplicación si es necesario.

3. En el menú Archivo , haga clic en Nuevo proyecto.

4. Seleccione Aplicación estándar (.exe).

5. Asigne un nombre al proyecto CustomButton y presione Aceptar.

En este momento tiene un proyecto WPF vacío. Puede presionar F5 para ejecutar la aplicación. Como podría esperar, la aplicación consta de solo una ventana en blanco. A continuación, creará un rectángulo redondeado y lo convertirá en un botón.

Para convertir un rectángulo en un botón

1. Establezca la propiedad Fondo de la ventana en negro: Seleccione la ventana, haga clic en la pestaña Propiedades, y establezca la propiedad Background en Black.

   

2. Dibuje un rectángulo aproximadamente el tamaño de un botón en la ventana: Seleccione la herramienta rectángulo en el panel de herramientas de la izquierda y arrastre el rectángulo a la ventana.

   

3. Redondee las esquinas del rectángulo: Arrastre los puntos de control del rectángulo o establezca directamente RadiusX y RadiusY las propiedades. Establezca los valores de RadiusX y RadiusY en 20.

   

4. Cambie el rectángulo a un botón: Seleccione el rectángulo. En el menú Herramientas , haga clic en Botón Crear.

   

5. Especifique el ámbito del estilo o la plantilla: Aparece un cuadro de diálogo como el siguiente.

   

   En Nombre de recurso (clave), seleccione Aplicar a todos. Esto hará que la plantilla de estilo y botón resultante se aplique a todos los objetos que son botones. En Definir en, seleccione Aplicación. Esto hará que el estilo resultante y la plantilla de botón tengan ámbito en toda la aplicación. Al establecer los valores de estos dos cuadros, el estilo de botón y la plantilla se aplican a todos los botones de toda la aplicación y cualquier botón que cree en la aplicación usará, de forma predeterminada, esta plantilla.

Editar la plantilla de botón

Ahora tiene un rectángulo que se ha convertido en un botón. En esta sección, modificará la plantilla del botón y personalizará aún más su aspecto.

Para editar la plantilla de botón para cambiar la apariencia del botón

1. Vaya a editar la vista de plantilla: Para personalizar aún más el aspecto de nuestro botón, es necesario editar la plantilla de botón. Esta plantilla se creó al convertir el rectángulo en un botón. Para editar la plantilla de botón, haga clic con el botón derecho en el botón y seleccione Editar elementos de control (plantilla) y, a continuación, Editar plantilla.

   

   En el editor de plantillas, tenga en cuenta que el botón ahora está separado en un Rectangle y el ContentPresenter. ContentPresenter se usa para presentar contenido dentro del botón (por ejemplo, la cadena "Button"). Tanto el rectángulo como ContentPresenter se colocan dentro de un Grid.

   

2. Cambie los nombres de los componentes de plantilla: Haga clic con el botón derecho en el rectángulo del inventario de plantillas, cambie el Rectangle nombre de "[Rectangle]" a "outerRectangle" y cambie "[ContentPresenter]" a "myContentPresenter".

   

3. Modifique el rectángulo para que esté vacío dentro (como un anillo): Seleccione outerRectangle y establezca Fill en "Transparente" y StrokeThickness en 5.

   

   A continuación, establezca en Stroke el color de lo que sea la plantilla. Para ello, haga clic en el cuadro blanco pequeño situado junto a Trazo, seleccione CustomExpression y escriba "{TemplateBinding Background}" en el cuadro de diálogo.

   

4. Cree un rectángulo interno: Ahora, cree otro rectángulo (asígnele el nombre "innerRectangle") y colócalo simétricamente en el interior de outerRectangle . Para este tipo de trabajo, es probable que quiera ampliar el botón en el área de edición.

   Nota:

   El rectángulo podría tener un aspecto diferente al del de la figura (por ejemplo, podría tener esquinas redondeadas).

   

5. Mueva ContentPresenter a la parte superior: En este momento, es posible que el texto "Botón" ya no esté visible. Si es así, se debe a que innerRectangle está encima de myContentPresenter. Para corregirlo, arrastre myContentPresenter debajo de innerRectangle. Reposiciona los rectángulos y myContentPresenter para que parezcan similares al de abajo.

   Nota:

   Como alternativa, también puede colocar myContentPresenter en la parte superior haciendo clic con el botón derecho y presionando Enviar hacia delante.

   

6. Cambie el aspecto de innerRectangle: Establezca los RadiusXvalores , RadiusYy StrokeThickness en 20. Además, defina en Fill el fondo de la plantilla mediante la expresión personalizada "{TemplateBinding Background}", y defina Stroke como "transparente". Tenga en cuenta que los ajustes para Fill y Stroke de innerRectangle son los opuestos a los de outerRectangle.

   

7. Agregue una capa de vidrio en la parte superior: La última parte de la personalización del aspecto del botón es agregar una capa de vidrio en la parte superior. Esta capa de vidrio consta de un tercer rectángulo. Dado que el vidrio cubre todo el botón, el rectángulo de vidrio es similar en dimensiones a outerRectangle. Por lo tanto, cree el rectángulo simplemente haciendo una copia del outerRectangle. Resalte outerRectangle y use CTRL+C y CTRL+V para realizar una copia. Asigne a este nuevo rectángulo el nombre "glassCube".

8. Cambiar la posición de glassCube si es necesario: Si glassCube aún no está colocado para que cubra todo el botón, arrástrelo a la posición.

9. Asigne a glassCube una forma ligeramente diferente que outerRectangle: Cambie las propiedades de glassCube. Empiece cambiando las propiedades RadiusX y RadiusY a 10 y la StrokeThickness a 2.

   

10. Haga que glassCube tenga un aspecto similar al vidrio: Establezca en Fill un aspecto vidrioso mediante un degradado lineal que sea 75% opaco y alternativo entre el color Blanco y Transparente durante 6 intervalos espaciados aproximadamente uniformemente. Esto es lo que se debe establecer los puntos de degradado en:

    • Degradado Stop 1: Blanco con el valor Alfa de 75%

    • Parada de Gradiente 2: Transparente

    • Degradado Stop 3: Blanco con el valor Alfa de 75%

    • Parada de Degradado 4: Transparente

    • Degradado Stop 5: Blanco con el valor Alfa de 75%

    • Punto de degradado 6: transparente

    Esto crea un aspecto de vidrio "ondulado".

    

11. Oculte la capa de vidrio: Ahora que ve el aspecto de la capa vidriosa, vaya al panel Apariencia del panel Propiedades y establezca la opacidad en 0% para ocultarla. En las secciones siguientes, usaremos desencadenadores de propiedades y eventos para mostrar y manipular la capa de vidrio.

    

Personalizar el comportamiento del botón

En este momento, ha personalizado la presentación del botón editando su plantilla, pero el botón no reacciona a las acciones del usuario como lo hacen los botones típicos (por ejemplo, cambiar la apariencia al pasar el mouse, recibir el foco y hacer clic). Los dos procedimientos siguientes muestran cómo crear comportamientos como estos en el botón personalizado. Comenzaremos con desencadenadores de propiedades simples y, a continuación, agregaremos desencadenadores de eventos y animaciones.

Para establecer activadores de propiedades

1. Crear un desencadenador de propiedad: Con glassCube seleccionado, haga clic en + Propiedad en el panel Desencadenadores (vea la figura que sigue al siguiente paso). Esto crea un desencadenador de propiedad con un desencadenador de propiedad predeterminado.

2. Convierta IsMouseOver en la propiedad usada por el desencadenador: Cambie la propiedad a IsMouseOver. Esto hace que el desencadenador de propiedad se active cuando la IsMouseOver propiedad es true (cuando el usuario apunta al botón con el mouse).

   

3. IsMouseOver desencadena opacidad de 100% para glassCube: Observe que la grabación del desencadenador está activada (vea la ilustración anterior). Esto significa que los cambios realizados en los valores de propiedad de glassCube mientras la grabación está activada se convertirán en una acción que tiene lugar cuando IsMouseOver sea true. Durante la grabación, cambie el valor de Opacity de glassCube a 100%.

   

   Ahora ha creado el primer desencadenador de propiedad. Observe que el panel Desencadenadores del editor ha registrado que el Opacity ha sido cambiado a 100%.

   

   Pulse F5 para ejecutar la aplicación y mueva el puntero del ratón sobre y fuera del botón. La capa de vidrio debería aparecer al pasar el cursor sobre el botón y desaparecer cuando el cursor se aleje.

4. IsMouseOver desencadena el cambio del valor de trazo: Vamos a asociar algunas otras acciones con el IsMouseOver controlador. Mientras continúa la grabación, cambie la selección de glassCube a outerRectangle. A continuación, configura el Stroke de outerRectangle en la expresión personalizada de "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Esto establece en Stroke el color de resaltado típico usado por los botones. Presione F5 para ver el efecto al pasar el mouse sobre el botón.

   

5. IsMouseOver desencadena texto difuminado: Vamos a asociar una acción más al desencadenador de propiedad IsMouseOver. Haga que el contenido del botón aparezca un poco borroso cuando el cristal aparezca sobre él. Para ello, podemos aplicar un desenfoque BitmapEffect a ContentPresenter (myContentPresenter).

   

   Nota:

   Para devolver el panel de Propiedades a lo que era antes de realizar la búsqueda BitmapEffect, borre el texto del cuadro de búsqueda.

   En este punto, hemos usado un desencadenador de propiedad con varias acciones asociadas para crear un comportamiento de resaltado cuando el puntero del ratón entra y sale del área del botón. Otro comportamiento típico de un botón es resaltar cuando tiene el foco (como después de hacer clic en él). Podemos añadir este comportamiento creando otro desencadenador para la propiedad IsFocused.

6. Crear desencadenador de propiedad para IsFocused: Con el mismo procedimiento que para IsMouseOver (consulte el primer paso de esta sección), cree otro desencadenador de propiedad para la IsFocused propiedad . Mientras la grabación del desencadenador está activada, agregue las siguientes acciones al desencadenador:

   • glassCube obtiene un Opacity de 100%.

   • outerRectangle recibe un Stroke valor de expresión personalizado de "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Como último paso de este tutorial, agregaremos animaciones al botón. Estas animaciones se desencadenarán mediante eventos, en concreto, los eventos MouseEnter y Click.

Para usar desencadenadores de eventos y animaciones para agregar interactividad

1. Cree un desencadenador de eventos MouseEnter: Agregue un nuevo desencadenador de eventos y seleccione MouseEnter como evento que se va a usar en el desencadenador.

   

2. Cree una escala de tiempo de animación: A continuación, asocie una escala de tiempo de animación al MouseEnter evento.

   

   Después de presionar Aceptar para crear una nueva escala de tiempo, aparece un panel de escala de tiempo y la opción "La grabación de la escala de tiempo está activada" en el panel de diseño. Esto significa que podemos comenzar a grabar los cambios de propiedad en la línea de tiempo (animar cambios de propiedad).

   Nota:

   Es posible que tenga que cambiar el tamaño de la ventana o los paneles para ver la pantalla.

   

3. Cree un fotograma clave: Para crear una animación, seleccione el objeto que desea animar, cree dos o más fotogramas clave en la escala de tiempo y, para esos fotogramas clave, establezca los valores de propiedad entre los que desea que la animación se interpole. La figura siguiente le guía a través de la creación de un fotograma clave.

   

4. Reduzca glassCube en este fotograma clave: Con el segundo fotograma clave seleccionado, reduzca el tamaño del glassCube a 90% de su tamaño completo mediante la transformación Tamaño.

   

   Presione F5 para ejecutar la aplicación. Mueva el puntero del mouse sobre el botón. Observe que la capa de vidrio se reduce en la parte superior del botón.

5. Cree otro desencadenador de eventos y asocie una animación diferente a ella: Vamos a agregar una animación más. Use un procedimiento similar al que usó para crear la animación del desencadenador de eventos anterior:

   1. Cree un nuevo desencadenador de eventos mediante el Click evento .

   2. Asocie una nueva cronología al evento Click.

      

   3. Para esta línea de tiempo, cree dos fotogramas clave, uno en 0,0 segundos y el segundo en 0,3 segundos.

   4. Con el fotograma clave en 0,3 segundos resaltado, ajuste el ángulo de transformación de rotación a 360 grados.

      

   5. Presione F5 para ejecutar la aplicación. Haga clic en el botón . Observe que la capa de vidrio gira alrededor.

Conclusión

Ha completado un botón personalizado. Lo hizo con una plantilla de botón que se aplicó a todos los botones de la aplicación. Si deja el modo de edición de plantillas (vea la ilustración siguiente) y crea más botones, verá que se ven y se comportan como el botón personalizado en lugar de como el botón predeterminado.

Presione F5 para ejecutar la aplicación. Haga clic en los botones y observe cómo se comportan todos igual.

Recuerde que mientras personalizaba la plantilla, establece la Fill propiedad de innerRectangle y la Stroke propiedad outerRectangle en el fondo de la plantilla ({TemplateBinding Background}). Por este motivo, al establecer el color de fondo de los botones individuales, se usará el fondo que establezca para esas propiedades respectivas. Pruebe cambiar las imágenes de fondo ahora. En la ilustración siguiente, se usan diferentes degradados. Por lo tanto, aunque una plantilla es útil para la personalización general de controles como el botón, los controles con plantillas se pueden modificar para que parezcan diferentes entre sí.

En conclusión, en el proceso de personalizar una plantilla de botón, ha aprendido a hacer lo siguiente en Microsoft Expression Blend:

• Personalice la apariencia de un control.

• Establecer desencadenadores de propiedades. Los desencadenadores de propiedad son muy útiles porque se pueden usar en la mayoría de los objetos, no solo en los controles.

• Establecer desencadenadores de eventos. Los desencadenadores de eventos son muy útiles porque se pueden usar en la mayoría de los objetos, no solo en los controles.

• Crear animaciones.

• Varios: cree degradados, agregue BitmapEffects, use transformaciones y establezca propiedades básicas de objetos.

Consulte también

• Crear un botón mediante XAML
• Aplicar estilos y plantillas
• Visión general de animación
• Información general sobre la pintura con colores sólidos y degradados
• Información general sobre los efectos de mapa de bits