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

Artículo
10/11/2017

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

Mediante la operación de arrastrar un comportamiento al objeto que desea usar para controlar el guión gráfico. Puede usar el comportamiento ControlStoryboardAction , o si está usando estados para crear una animación, puede usar el comportamiento GoToStateAction . Para obtener más información, vea Agregar un control de comportamiento a un objeto.
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]

Los desencadenadores no están disponibles en los proyectos de Microsoft Silverlight.
Mediante la creación de un método de control de eventos en un archivo de código subyacente que llame al método Begin del guión gráfico.

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 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.

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

Cierre los guiones gráficos que estén abiertos. Para obtener más información, vea Abrir o cerrar un guión gráfico.
Si está trabajando en un proyecto de WPF, elimine el desencadenador predeterminado que se creó para el evento Window.Loaded cuando creó el guión gráfico. Para obtener más información, vea Agregar o quitar un desencadenador de un control WPF.
En el panel Objetos y escala de tiempo, seleccione un objeto que, cuando se interactúe con él, ejecute el guión gráfico. 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.
En el panel Propiedades, haga clic en Eventos. Aparecerá una lista en orden alfabético de todos los eventos disponibles para el objeto 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.
Busque el evento al que desee agregar la lógica de programación (por ejemplo, el evento MouseEnter ).
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.

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.

Expression Blend abre el archivo de código subyacente y lo pega en el método de control de eventos vacío.

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

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

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.

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

En Expression Blend, cuando se crea un guión gráfico en el ámbito principal del documento en un proyecto de Windows Presentation Foundation (WPF), 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 el panel Desencadenadores.

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

Cc295328.daa5d5de-713b-4d58-9f98-4ef65b217e9d(es-es,Expression.40).png

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.

Cierre los guiones gráficos que estén abiertos. Para obtener más información, vea Abrir o cerrar un guión gráfico.
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 el panel Desencadenadores. O bien, haga clic en Agregar desencadenador de evento para crear un nuevo desencadenador de eventos predeterminado.
En el panel Objetos y escala de tiempo, seleccione un objeto que, cuando se interactúe con él, ejecute el guión gráfico. 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.
Cambie el evento que desencadena la animación ( Window . Loaded ) a través de los menús desplegables del panel Desencadenadores. Por ejemplo, cambie When Window.Loaded is raised a When textblock.MouseEnter is raised .
Defina la acción que tendrá lugar cuando se desencadene el evento. Si en la lista no aparece ninguna acción, haga clic en 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 de un control WPF.

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 Aplicar estilos a un control que admite plantillas.

[!NOTA]

Los procedimientos siguientes se aplican a los proyectos de WPF, pero si lo desea puede usar estados para controlar los guiones gráficos en los proyectos de Silverlight. Para obtener más información, vea Cambiar estados en respuesta a una interacción del usuario y Agregar animación que se reproducirá después de cambiar un estado.

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

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 Aplicar estilos a un control que admite plantillas.

[!NOTA]

Algunos objetos no admiten plantillas, como los objetos de trazado. Los controles como Button y RadioButton sí admiten plantillas.
- Para crear una plantilla nueva, seleccione un objeto en la mesa de trabajo o en el panel Objetos y escala de tiempo y, a continuación, en el menú Objeto, haga clic en Editar 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 estilo.
- Para crear un estilo nuevo, seleccione un objeto en la mesa de trabajo o en el panel 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 estilo.
- Para abrir una plantilla existente, haga clic en Editar recurso , junto al estilo en el panel Recursos y, a continuación, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en el elemento Estilo, haga clic en Editar plantilla y seleccione Editar actual. También puede seleccionar un control que tenga un estilo personalizado ya aplicado y, seguidamente, en el menú Objeto, hacer clic en Editar plantilla y seleccionar Editar actual.
- Para abrir un estilo existente, haga clic en Editar recurso , junto al estilo en el panel Recursos. También puede seleccionar un control que tenga un estilo personalizado ya aplicado y, seguidamente, en el menú Objeto, hacer clic en Editar estilo y seleccionar Editar actual.
- Para modificar uno de los estilos simples que vienen con Expression Blend, abra Activos en el panel Herramientas, haga clic en la categoría Estilos, haga clic en el diccionario de recursos Simple Styles, seleccione un control con un estilo predeterminado, utilícelo en la mesa de trabajo para hacer 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.
En el ámbito de edición de la plantilla o el estilo, observe la nueva barra de ruta de navegación de Expression Blend 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.
En el panel Objetos y escala de tiempo, haga clic en Nuevo.

Aparece el cuadro de diálogo Crear recurso Storyboard.
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.
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 Grid ) y, a continuación, agregar más objetos a la cuadrícula, que después se pueden animar.

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 el panel Desencadenadores y, seguidamente, en la mitad inferior del panel Desencadenadores, haga clic en Agregar nueva acción , 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 cuando se 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 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 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 eventos, haga clic en Agregar desencadenador de evento y, a continuación, en la mitad inferior del panel Desencadenadores, cambie el desencadenador del valor predeterminado When target-element.Loaded is raised a la propiedad y el valor que desee (por ejemplo, When target-element.Click is raised ) y después haga clic en 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, vea la sección sobre prácticas recomendadas en Aplicar estilos a un control que admite plantillas.

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

Para crear y abrir un control de usuario para editar, siga uno de estos pasos:
- Crear un control de usuario a partir de objetos existentes.
- En el menú Archivo, seleccione Nuevo elemento. En el cuadro de diálogo Nuevo elemento, seleccione UserControl , defina Name y haga clic en Aceptar.
Cree un guión gráfico de animación y anime algunos de los objetos en el control de usuario.
Ahora puede usar cualquiera de las tareas de la sección "Guiones gráficos en el ámbito principal del documento" para controlar su animación mediante un desencadenador de eventos o un método de control de eventos.

[!NOTA]

Si crea un desencadenador de eventos en un objeto antes de convertir el objeto a un control de usuario con el comando Convertir en UserControl, tendrá que volver a crear el desencadenador de eventos 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 When UserControl.MouseDown is raised , con una acción como Storyboard1.Begin . Si se usa el comando Convertir en UserControl, 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 Convertir en UserControl, 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.

Vea también

Tareas

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

Compartir a través de