Controlar cuándo se ejecuta un guión gráfico

Puede controlar cuándo se ejecuta un guión gráfico en la aplicación Microsoft Expression Blend de las maneras siguientes:

• Mediante la creación de un desencadenador que ejecute el guión gráfico cuando se produzca un evento (por ejemplo, al hacer clic en un botón) o, si el guión gráfico está en una plantilla de control, cuando cambie una propiedad.

  [!NOTA]

  No hay desencadenadores disponibles en proyectos Microsoft Silverlight 1.0 o Silverlight 2.

• Mediante la creación de un método de control de eventos en un archivo de código subyacente que llame al guión gráfico del método Begin.

También puede usar estos métodos para controlar cuándo el guión gráfico se detiene, está en pausa, se reanuda, se quita a sí mismo o salta hasta el final del guión gráfico.

Estos métodos varían ligeramente en función del ámbito en el que se trabaje.

[!NOTA]

Los procedimientos siguientes se refieren a guiones gráficos que contienen animaciones visuales. Sin embargo, estos procedimientos también pueden ser aplicables a guiones gráficos de audio o vídeo. Para obtener más información, vea Insertar un archivo de imagen, audio o vídeo en el documento activo.

Guiones gráficos en el ámbito principal del documento

Cree un guión gráfico en el ámbito principal del documento si debe ser una característica principal del documento y si debe desencadenarse cuando el usuario interactúe con un control que también se encuentre en el ámbito principal del documento. En Expression Blend, cuando se crea un guión gráfico en el ámbito principal del documento, se crea automáticamente un desencadenador nuevo que ejecutará el guión gráfico cuando se cargue la ventana de la aplicación. Puede ver este desencadenador en Desencadenadores, en el panel Interacción.

El desencadenador predeterminado que Expression Blend establece cuando se crea un guión gráfico

Si deja este desencadenador inalterado, su guión gráfico se ejecutará en cuanto se inicie la aplicación. También puede modificar este comportamiento mediante el procedimiento siguiente.

Para controlar un guión gráfico en el ámbito principal del documento mediante un desencadenador de eventos

1. Si se creó un desencadenador predeterminado para el evento Window.Loaded cuando creó el guión gráfico y no desea que el guión gráfico se ejecute cuando se inicie la aplicación, seleccione Window.Loaded en Desencadenadores. O bien, haga clic en el botón Agregar desencadenador de evento  para crear un nuevo desencadenador de evento predeterminado.

2. En Objetos y escala de tiempo, seleccione un objeto que ejecute el guión gráfico cuando se interactúe con él. Por ejemplo, si desea que se ejecute el guión gráfico cuando el usuario mueva el puntero del mouse sobre un bloque de texto, seleccione el bloque de texto.

3. Cambie el evento que desencadena la animación (Window.Loaded) mediante los menús de lista desplegable de la mitad inferior del panel Desencadenadores. Por ejemplo, cambie Cuando se origina Window.Loaded a Cuando se origina textblock.MouseEnter.

4. Defina la acción que tendrá lugar cuando se desencadene el evento. Si en la lista no aparece ninguna acción, haga clic en el botón Agregar nueva acción . Asegúrese de que la acción esté establecida en el nombre del guión gráfico (por ejemplo, Storyboard1) y que el método al que se llama sea Begin. También puede seleccionar cualquiera de los métodos que son válidos para un guión gráfico. Para obtener más información, vea Agregar o quitar un desencadenador.

Para controlar un guión gráfico en el ámbito principal del documento mediante un método de control de eventos

1. Si creó un desencadenador predeterminado para el evento Window.Loaded cuando creó su guión gráfico y no desea que el guión gráfico se ejecute cuando se inicie la aplicación, seleccione Window.Loaded en Desencadenadores y realice una de las siguientes acciones:

   • Si aparecen varias acciones en la mitad inferior de la ventana Desencadenadores, seleccione la que controle el guión gráfico (por ejemplo, Storyboard1.Begin) y haga clic en el botón Eliminar esta acción  situado a su lado.

   • Si la única acción que aparece es la que controla el guión gráfico, puede eliminar el desencadenador completo al hacer clic en el botón Eliminar desencadenador .

2. En Objetos y escala de tiempo, seleccione un objeto que ejecute el guión gráfico cuando se interactúe con él. Por ejemplo, si desea que se ejecute el guión gráfico cuando el usuario mueva el puntero del mouse sobre un bloque de texto, seleccione el bloque de texto.

3. En el panel Propiedades, haga clic en el botón Eventos. Aparecerá una lista en orden alfabético de todos los eventos disponibles para el elemento seleccionado.

   Sugerencia:
   Para ver una descripción breve de un evento, mueva el puntero sobre el nombre del evento. Se muestra una descripción del evento con una información sobre herramientas. También puede ver una lista de los eventos disponibles y sus descripciones en la Referencia rápida de eventos de WPF.

4. Busque el evento al que desee agregar la lógica de programación (por ejemplo, el evento MouseEnter).

5. Dispone de dos métodos para generar el método de control de eventos vacío:

   • Haga doble clic en el bloque de texto que aparece junto al nombre del evento. Expression Blend genera un nombre predeterminado para el método de control de eventos, lo escribe en el bloque de texto y genera el código para el método vacío.

   • Escriba un nombre en el cuadro de texto situado junto al nombre del evento y, a continuación, presione Entrar o haga clic en otro lugar para salir del bloque de texto. Los nombres de métodos de eventos deben empezar con una letra. Si el nombre del método no existe aún en el archivo de código subyacente, Expression Blend generará el código para el método vacío y usará el nombre que escribió anteriormente.

   [!NOTA]

   Puede configurar Expression Blend para que use el Portapapeles, incluso si Microsoft Visual Studio 2008 está instalado. En el menú Herramientas, haga clic en Opciones y, a continuación, en Controladores de eventos. En Experiencia de edición, haga clic en Sólo Portapapeles.

6. A partir de aquí, Expression Blend realizará una de las siguientes acciones:

   • Si tiene instalado Visual Studio 2008 Standard Edition o una versión posterior, Expression Blend abrirá el proyecto en Visual Studio 2008, abrirá el archivo de código subyacente y, a continuación, lo pegará en el método de control de eventos vacío.

     [!NOTA]

     Si tiene instalados Visual Studio 2008 y Visual Studio 2005, podría producirse un error si el selector de versión de Visual Studio intenta abrir Visual Studio 2005 en lugar de Visual Studio 2008. Esto se debe a que Expression Blend crea proyectos de Visual Studio 2008 que no se pueden abrir en Visual Studio 2005. Si ocurre esto, abra el proyecto en Visual Studio 2008 antes de intentar crear el controlador de eventos en el panel Propiedades de Expression Blend.

   • Si no tiene instalado Visual Studio 2008 Standard Edition o una versión posterior, Expression Blend copiará el método de control de eventos vacío en el Portapapeles y mostrará una ventana emergente que explica qué hacer a continuación. En este caso, puede abrir el archivo de código subyacente manualmente en otro editor de texto para pegar el método en la definición de clase para la ventana del modo siguiente:

     private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
     {
     
     }
     

     Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
     
     End Sub
     

   [!NOTA]

   Si tiene asignada una aplicación (como Bloc de notas) a los archivos .cs o .vb, puede abrir el archivo de código subyacente manualmente haciendo doble clic en el nombre del archivo en Archivos, en el panel Proyecto. Expression Blend abrirá el archivo en esa aplicación.

   Si no tiene una aplicación asignada a los archivos .cs o .vb, Expression Blend no podrá abrir el archivo de forma externa. Para abrir el archivo, búsquelo en el Explorador de Windows (o, si ha guardado el proyecto en Expression Blend, haga clic en Explorarproyecto en el menú Proyecto), haga clic con el botón secundario en el archivo .cs o .vb que desea modificar, seleccione Abrir con y, a continuación, seleccione Bloc de notas (u otra aplicación de edición). Después de esto, podrá abrir los archivos de código subyacente manualmente desde el panel Proyecto en Expression Blend.

7. Con el archivo de código subyacente abierto y el método de control de eventos pegado, agregue las siguientes líneas de código en negrita dentro del método de control de eventos:

   private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
   {
       Storyboard myStoryboard;    myStoryboard = (Storyboard)this.Resources["Storyboard1"];    myStoryboard.Begin(this);
   }
   

   Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
       Dim myStoryboard As New Storyboard    myStoryboard = CType(Me.Resources("Storyboard1"), Storyboard)    myStoryboard.Begin(Me)
   End Sub
   

8. Guarde todos los archivos y presione F5 para generar y probar la aplicación. Por ejemplo, en la aplicación en ejecución, mueva el mouse sobre el bloque de texto para ver si comienza la animación.

   [!NOTA]

   Si la animación no regresa al punto inicial al mover el mouse sobre el bloque de texto de nuevo, ello podría deberse a que no estableció un fotograma clave en la marca de 0 segundos.

Guiones gráficos en plantillas de control y estilos

A veces, Microsoft Expression Blend crea por sí solo un guión gráfico, por ejemplo, cuando se agrega una acción a un desencadenador de propiedad o desencadenador de evento cuando se modifica una plantilla de control. Para obtener más información acerca de cómo trabajar con estilos y plantillas, vea Estilos y plantillas.

Para controlar un guión gráfico en el ámbito de una plantilla

1. Abra un estilo o una plantilla para su modificación mediante uno de los métodos siguientes:

   [!NOTA]

   Para averiguar si necesita usar una plantilla o un estilo, vea Información general sobre estilos y plantillas.

   [!NOTA]

   Algunos objetos no admiten plantillas, como los objetos de trazado. Los controles como Button o RadioButton sí admiten plantillas.

   • Para crear una plantilla nueva, seleccione un objeto en la mesa de trabajo o en Objetos y escala de tiempo y, a continuación, en el menú Objeto, haga clic en Editar partes del control (Plantilla) y seleccione Editar una copia. Aparece el cuadro de diálogo Crear recurso Style. Seleccione la ubicación donde desee definir el recurso y, a continuación, haga clic en Aceptar. Para obtener más información, vea Crear un recurso de estilo.

   • Para crear un estilo nuevo, seleccione un objeto en la mesa de trabajo o en Objetos y escala de tiempo y, a continuación, en el menú Objeto, haga clic en Editar estilo y seleccione Editar una copia. Aparece el cuadro de diálogo Crear recurso Style. Seleccione la ubicación donde desee definir el recurso y, a continuación, haga clic en Aceptar. Para obtener más información, vea Crear un recurso de estilo.

   • Para abrir una plantilla existente, haga clic en el botón Editar recurso  situado junto al estilo en el panel Recursos y, a continuación, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento Style, haga clic en Editar partes del control (Plantilla) y seleccione Editar plantilla. ?También puede seleccionar un control que tenga un estilo personalizado ya aplicado y, en el menú Objeto, hacer clic en Editar partes del control (Plantilla) y, a continuación, seleccionar Editar plantilla.

   • Para abrir un estilo existente, haga clic en el botón Editar recurso  situado junto al estilo en el panel Recursos. ?También puede seleccionar un control que tenga un estilo personalizado ya aplicado y, en el menú Objeto, hacer clic en Editar estilo y, a continuación, seleccionar Editar estilo.

   • Para modificar uno de los estilos simples que vienen con Expression Blend, abra el Panel biblioteca  en el cuadro de herramientas, seleccione la ficha Controles, haga clic en el diccionario de recursos Simple Styles, seleccione un control con un estilo predeterminado, dibuje el control en la mesa de trabajo para que el diccionario de recursos Simple Styles.xaml esté disponible en el panel Recursos y después abra el estilo simple o la plantilla mediante una de las opciones anteriores. La modificación del diccionario de recursos Simple Styles.xaml en el proyecto actual no afecta al diccionario de recursos Simple Styles.xaml en otros proyectos, salvo que copie el archivo Simple Styles.xaml desde el proyecto actual a otro proyecto.

2. En el ámbito de edición de la plantilla o el estilo, observe la nueva barra de ruta de navegación de Expression Blend 2 en la parte superior de la mesa de trabajo.

   Barra de ruta de navegación con el modo de edición de plantillas seleccionado

   

   Si hace clic en los botones de la barra de ruta de navegación, podrá moverse rápidamente entre los modos de edición de plantillas, edición de estilos y ámbito de edición de objetos correspondientes al objeto seleccionado. La barra de ruta de navegación aparece para cualquier objeto seleccionado que tenga un estilo personalizado o una plantilla aplicada.

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

   

   Aparece el cuadro de diálogo Crear recurso Storyboard.

   

4. Escriba un nombre y haga clic en Aceptar. Se cierra el cuadro de diálogo Crear recurso Storyboard y Expression Blend activa el modo de grabación de escala de tiempo.

5. Cree alguna animación que afecte sólo a los objetos del estilo o a la plantilla que va a editar.

   [!NOTA]

   No puede animar objetos fuera la plantilla o el estilo que va a modificar. Sin embargo, puede animar objetos existentes en el estilo o la plantilla. Además, al modificar una plantilla, puede agrupar los elementos bajo el nodo de plantilla en un panel de diseño (como una cuadrícula) y, a continuación, agregar más objetos a la cuadrícula, que después se pueden animar.

6. Desencadene el nuevo guión gráfico siguiendo uno de estos pasos:

   • Para agregar el guión gráfico a un desencadenador de propiedad existente, seleccione el desencadenador en Desencadenadores en el panel Interacción y, a continuación, en la mitad inferior del panel Desencadenadores, haga clic en el botón Agregar nueva acción  situado junto a Acciones al activar o Acciones al desactivar, en función de si desea que el guión gráfico se ejecute cuando el desencadenador se active o desactive. El nuevo guión gráfico se agrega automáticamente como una acción que se producirá cuando se active el desencadenador.

   • Para agregar el guión gráfico a un nuevo desencadenador de propiedad, haga clic en el botón Agregar desencadenador de propiedad  y, a continuación, en la mitad inferior del panel Desencadenadores, cambie el desencadenador del valor predeterminado target-element.IsCancel = False a la propiedad y el valor que desee (por ejemplo, target-element.IsPressed = True) y después haga clic en el botón Agregar nueva acción . El nuevo guión gráfico se agrega automáticamente como una acción que se producirá cuando se provoque el evento.

   • Para agregar el guión gráfico a un nuevo desencadenador de evento, haga clic en el botón Agregar desencadenador de evento  y, a continuación, en la mitad inferior del panel Desencadenadores, cambie el desencadenador del valor predeterminado Cuando se origina target-element.Loaded al evento que desee (por ejemplo, Cuando se origina target-element.Click) y, a continuación, haga clic en el botón Agregar nueva acción . El nuevo guión gráfico se agrega automáticamente como una acción que se producirá cuando se provoque el evento.

   Importante:
   Seleccione siempre el desencadenador Valor predeterminado para desactivar el modo de grabación de desencadenadores antes de realizar cambios generales en la plantilla. De lo contrario, podría cambiar por accidente un desencadenador existente.

   Precaución:
   Cuando se modifican los estilos y las plantillas, es posible interrumpir la funcionalidad del control del sistema al que se aplica el estilo o la plantilla. Para obtener una lista de precauciones, consulte la sección sobre prácticas recomendadas en Información general sobre estilos y plantillas.

7. Guarde todos los archivos y presione F5 para generar y probar la aplicación.

   Para obtener un ejemplo más específico acerca de cómo modificar una plantilla, vea Inténtelo: Agregar animación a un botón.

Guiones gráficos en controles de usuario

Al colocar un guión gráfico en un control de usuario, puede encapsular los objetos y guiones gráficos que animan dichos objetos en un archivo de un documento XAML y código subyacente. Después se pueden crear instancias del control de usuario varias veces en otros documentos.

Para controlar un guión gráfico que está contenido en un control de usuario

1. Para crear y abrir un control de usuario para editar, siga uno de estos pasos:

   • Crear un control a partir de objetos existentes.

   • En el menú Archivo, seleccione Nuevo elemento. En el cuadro de diálogo Nuevo elemento, seleccione UserControl, defina el Nombre y haga clic en Aceptar.

2. Cree un guión gráfico de animación y anime algunos de los objetos en el control de usuario.

3. Ahora puede usar cualquiera de las tareas de Guiones gráficos en el ámbito principal del documento para controlar la animación mediante un desencadenador de evento o un método de control de eventos.

   [!NOTA]

   Si crea un desencadenador de evento en un objeto antes de convertir el objeto a un control de usuario mediante el comando Crear control, tendrá que volver a crear el desencadenador de evento en el ámbito del control de usuario. Esto se debe a que los sucesos que están disponibles en el ámbito del control de usuario son distintos que en el ámbito del documento principal. Por ejemplo, puede configurar eventos como Cuando se origina UserControl.MouseDown con una acción como Storyboard1.Begin. Si se usa el comando Crear control, los recursos y animaciones se refactorizan en el nuevo control, de modo que no es necesario volver a crearlos.

   [!NOTA]

   Si crea un método de control de eventos para un objeto antes de convertir el objeto a un control de usuario mediante el comando Crear control, el código del método de control de eventos en el archivo de código subyacente del documento principal no se mueve al archivo de código subyacente del control de usuario. Esto se debe a que otros objetos podrían usar el mismo método de control de eventos. Puede copiar y pegar al método de control de eventos en el archivo de código subyacente del control de usuario.

Guiones gráficos en aplicaciones Silverlight 1.0

Los guiones gráficos de las aplicaciones Silverlight 1.0 son recursos y, al igual que todos los recursos de Silverlight 1.0, se identifican mediante un nombre, no mediante una clave como en las aplicaciones Windows Presentation Foundation.

Para controlar un guión gráfico en una aplicación Silverlight 1.0

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

Guiones gráficos en aplicaciones Silverlight 2

Los guiones gráficos de aplicaciones Silverlight 2 se pueden controlar con controladores de eventos o estados.

Para controlar un guión gráfico en una aplicación Silverlight 2

• En un método de controlador de eventos, use el siguiente código:

  private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
  {
      Storyboard myStoryboard;    myStoryboard = (Storyboard)this.Resources["Storyboard1"];    myStoryboard.Begin();
  }
  

• En un estado, Agregar animación que se reproducirá después de cambiar un estado.

Vea también

Conceptos

Crear, modificar o eliminar un guión gráfico

Crear una animación sencilla