Crear un botón que controle un guión gráfico en una aplicación de Silverlight

La creación de un botón en una aplicación de Microsoft Silverlight 1.0 implica dibujar los elementos que conforman el botón, ajustarlos en un panel de diseño para copiarlos con facilidad y escribir código JavaScript que realice alguna acción cuando se produzcan eventos de botón (por ejemplo, cuando se hace clic en el botón).

[!NOTA]

Para obtener un ejemplo completo del uso de varios eventos de botón, vea el ejemplo ButtonGallery, que puede abrir si hace clic en Pantalla de bienvenida en el menú Ayuda y, a continuación, hace clic en ButtonGallery en la ficha Ejemplos.

Dibujar los elementos del botón

Puede usar cualquier elemento para crear el aspecto del botón, lo que incluye formas, líneas, texto e imágenes. En el siguiente procedimiento se muestra cómo dibujar un rectángulo y un bloque de texto, pero puede usar cualquiera de los procedimientos que se describen en el tema Agregar elementos a un documento XAML en un proyecto de Silverlight.

Para dibujar los elementos del botón

1. Con un proyecto de Silverlight 1.0 abierto en Microsoft Expression Blend 2, seleccione la herramienta Rectángulo en el cuadro de herramientas.

   

   Si no puede ver la herramienta Rectángulo, haga clic con el botón secundario en los contenedores de herramientas para buscar y seleccionar la herramienta Rectángulo.

   

2. Para dibujar un rectángulo en la mesa de trabajo, arrastre el puntero. Mientras dibuja, el puntero cambiará a una cruz .

   

3. Con el nuevo elemento de rectángulo seleccionado en Objetos y escala de tiempo, cambie su apariencia. Por ejemplo, en Pinceles, en el panel Propiedades, haga clic en Relleno en la ficha Pincel de degradado  y, a continuación, defina los colores de los delimitadores de degradado.

   

   [!NOTA]

   Puede realizar más cambios en la apariencia del rectángulo mediante los procedimientos que se describen en Apariencia y Transformaciones.

4. Seleccione el control TextBlock en el cuadro de herramientas.

   

5. Dibuje un elemento de bloque de texto sobre el rectángulo. Es posible que sea necesario cambiar el tamaño del rectángulo o los elementos del bloque de texto, o moverlos a otra posición seleccionando la herramienta Selección en el cuadro de herramientas y arrastrando los Adorners azules alrededor de los elementos en la mesa de trabajo.

   

6. Con el nuevo elemento de bloque de texto seleccionado en Objetos y escala de tiempo, presione F2 para cambiar al modo de edición de texto y escriba Botón para cambiar el texto que se muestra en el elemento. Haga clic fuera del elemento de bloque de texto para salir del modo de edición de texto.

   [!NOTA]

   Para obtener más información acerca de cómo modificar la apariencia del bloque de texto, vea los temas de Texto y tipografía.

7. Para finalizar el aspecto del botón, puede dibujar más elementos en la mesa de trabajo mediante los procedimientos especificados en Agregar elementos a un documento XAML en un proyecto de Silverlight.

Volver al principio

Ajustar los elementos del botón en un panel de diseño

Al ajustar los elementos del botón en un panel de diseño único (un elemento Canvas), se simplifica el proceso de duplicación del botón. La razón es que puede copiar y pegar el panel de diseño en lugar de seleccionar todos los elementos que conforman el botón y, a continuación, duplicarlos. Además, el ajuste de los elementos del botón en el panel de diseño Lienzo también facilita la creación de controladores de eventos para los botones. Por ejemplo, puede crear un controlador de eventos que responda cuando el puntero se mueva en el panel de diseño completo en lugar de responder cuando el puntero se mueva en una parte del botón.

Para ajustar los elementos en un panel de diseño

1. En Objetos y escala de tiempo, mantenga presionada la tecla CTRL al seleccionar todos los elementos que conforman el botón.

2. Haga clic con el botón secundario en los elementos seleccionados, elija Agrupar en y, a continuación, haga clic en Lienzo.

   

3. Haga clic con el botón secundario en el nuevo elemento de lienzo en Objetos y escala de tiempo, haga clic en Cambiar nombre, escriba un nuevo nombre para el botón (por ejemplo Mi botón) y, a continuación, presione ENTRAR.

   Ahora, cuando desee duplicar el botón, puede copiar y pegar el elemento Mi botón.

Volver al principio

Crear un guión gráfico de animación para cambiar la apariencia del botón

Normalmente, cuando los usuarios hacen clic en un botón de una aplicación, el botón muestra un cambio visible. En el procedimiento siguiente se muestra cómo crear un guión gráfico de animación que hace que se expandan los elementos del botón.

[!NOTA]

Puede animar todos los elementos de la aplicación, no sólo los elementos que pertenecen al botón. Por ejemplo, puede tener una imagen pequeña que gire en círculos alrededor del botón cuando se haga clic en él.

Para crear el guión gráfico de animación

1. En Objetos y escala de tiempo, haga clic en el botón Nuevo.

   

   Se abre el cuadro de diálogo Crear guión gráfico.

   

2. De forma predeterminada, el Nombre del guión gráfico es Storyboard1. Conserve el nombre Storyboard1, ya que en el código del siguiente procedimiento se hace referencia a dicho nombre.

3. Además, de forma predeterminada, está activada la casilla Crear guión gráfico. No desactive la casilla, ya que no se desea que la animación se ejecute inmediatamente cuando la aplicación se cargue en la ventana del explorador. En su lugar, se desea controlar la animación completamente (iniciarla y detenerla) mediante código.

4. Haga clic en Aceptar.

   Expression Blend crea el guión gráfico y cambia al modo de animación.

   

   [!NOTA]

   Opcionalmente, puede cambiar la ubicación del panel Interacción si presiona F6. Cuando el panel Interacción está debajo de la mesa de trabajo, la escala de tiempo se encuentra más a la vista.

5. En Objetos y escala de tiempo, seleccione el elemento Mi botón.

6. Encima de la escala de tiempo, haga clic en el botón Registrar fotograma clave.

   Se establece un nuevo fotograma clave para registrar la apariencia actual de los elementos del botón.

7. Mueva el cabezal de reproducción de la escala de tiempo a la marca de medio segundo (tiempo de finalización de la animación) y haga clic de nuevo en el botón Registrar fotograma clave.

   Se establece un nuevo fotograma clave para registrar la apariencia actual de los elementos del botón. El botón tendrá un aspecto similar al siguiente al final de la animación.

   

8. Mueva el cabezal de reproducción de la escala de tiempo a la marca de un cuarto de segundo. Aquí creará un cambio en la apariencia del botón.

   [!NOTA]

   Si no se puede mover la escala de tiempo exactamente a la marca de un cuarto de segundo (0:00.250), es porque la resolución del ajuste es demasiado baja. Para aumentar la resolución del ajuste, haga clic en el botón Opciones de ajuste, establezca la Resolución del ajuste por segundo en 20 y, a continuación, haga clic en Aceptar.

9. Con el cabezal de reproducción de la escala de tiempo en la marca de un cuarto de segundo y el elemento Mi botón seleccionado, cambie el tamaño del botón en la mesa de trabajo. Para ello, arrastre el manipulador de cambio de tamaño inferior derecho mientras mantiene presionada la tecla ALT para mantener el punto central.

   

   Se agregan nuevos fotogramas clave automáticamente a la escala de tiempo en la marca de un cuarto de segundo para registrar el nuevo tamaño y la nueva posición del botón. Observe que se ha agregado un elemento RenderTransform en Objetos y escala de tiempo para especificar el nuevo tamaño (Escala) y la nueva posición (Traslación) del botón, y que los fotogramas clave de estos elementos se han agregado donde anteriormente se habían establecido los fotogramas clave en Mi botón. Expression Blend da por supuesto que se desea animar desde los fotogramas inicial y final establecidos en Mi botón. Por lo tanto, establece los fotogramas clave inicial y final en el elemento RenderTransform.

10. Haga clic en el botón Reproducir para probar la animación.

11. Para salir del modo de animación, haga clic en el botón Cerrar guión gráfico. De esta forma, se garantiza que todos los cambios que se realicen ahora en los elementos no formen parte del guión gráfico de animación.

12. Guarde todos los archivos.

Volver al principio

Crear un controlador de eventos para desencadenar el guión gráfico de animación al hacer clic en el botón

Todo el trabajo de registro de un controlador de eventos y escritura del código de dicho controlador de eventos puede realizarse en el archivo de código subyacente. Esto permite a los programadores y los diseñadores trabajar de forma independiente, y combinar fácilmente la presentación de una aplicación y el código cuando ambos se hayan terminado. Asimismo, un programador puede hacer que se produzcan otras acciones cuando se hace clic en un botón mediante la adición de código al controlador de eventos, como navegar hasta una página web. Para obtener un ejemplo, vea Crear un hipervínculo en una aplicación Silverlight.

Para crear el controlador de eventos

1. En el panel Proyecto, haga doble clic en el archivo de código subyacente, Page.xaml.js, para abrirlo y editarlo.

   El archivo Page.xaml.js ya contiene el siguiente código JavaScript:

   • Una definición del objeto Page.

   • Registro del evento MouseLeftButtonDown.

   • Una definición del controlador de eventos para el evento MouseLeftButtonDown.

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   [!NOTA]

   Para obtener información acerca de JavaScript en Microsoft Silverlight y la estructura de objetos, vea el documento sobre scripts y eventos del mouse (puede estar en inglés).

2. El código para llamar al guión gráfico cuando se hace clic en el botón primario ya está presente, pero convertido en comentario con barras diagonales dobles (//).

                   // this.control.content.findName("Storyboard1").Begin();
   

   Quite las barras diagonales dobles para cancelar el comentario en el código.

   this.control.content.findName("Storyboard1").Begin();
   

3. Guarde todos los archivos.

4. Para probar el proyecto, haga clic en Probar Solución en el menú Proyecto o presione la tecla F5.

   Si la prueba se genera correctamente, el proyecto se abrirá automáticamente en el explorador web predeterminado mediante el servidor de desarrollo local que se incluye con Microsoft Expression Studio. Para obtener más información acerca de cómo probar proyectos de Silverlight, vea Probar un proyecto de Silverlight desde Expression Blend.

   Haga clic en el botón para comprobar si se desencadena el guión gráfico. Observe que al hacer clic en cualquier lugar dentro del explorador también se desencadena el guión gráfico. Esto se debe a que el controlador de eventos se registró en el ámbito del elemento raíz (Page).

5. Para convertir en comentario la línea de código donde se registra el controlador de eventos, agregue barras diagonales dobles delante de la línea, como se indica a continuación:

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. Agregue la siguiente línea de código a continuación de la línea que se ha convertido en comentario:

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   Observe que la única diferencia entre estas dos líneas de código es el elemento en el que se registra el controlador de eventos. En la línea que se ha convertido en comentario, el controlador de eventos se registró en rootElement. En la línea que se pegó, el controlador de eventos se registró en el elemento MyButton con el método findName para buscar el elemento.

7. Guarde de nuevo todos los archivos.

8. Para probar el proyecto, haga clic en Probar Solución en el menú Proyecto o presione la tecla F5.

   Haga clic en el botón y haga clic fuera del botón para confirmar que el guión gráfico de animación sólo se desencadena al hacer clic en el botón.

Volver al principio

Vea también

Conceptos

Probar un proyecto de Silverlight desde Expression Blend