VisualTransition Clase

  • Referencia

Definición

Espacio de nombres:
Windows.UI.Xaml
Editar

Representa el comportamiento visual que se produce cuando el control pasa de un estado visual a otro.

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
class VisualTransition : DependencyObject
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
public class VisualTransition : DependencyObject
Public Class VisualTransition
Inherits DependencyObject
<VisualStateGroup>
  <!--one or more Visual State elements in the implicit States collection property -->
  <VisualStateGroup.Transitions>
    <VisualTransition>
      singleStoryboard
    </VisualTransition>
    <!--more transitions as above-->
  </VisualStateGroup.Transitions>
</VisualStateGroup>
Herencia
Object IInspectable DependencyObject VisualTransition
Atributos
ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Requisitos de Windows

Familia de dispositivos
Windows 10 (se introdujo en la versión 10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (se introdujo en la versión v1.0)

Ejemplos

En este ejemplo se crea un Objeto VisualTransition que especifica que cuando el usuario aleja el mouse del control, el borde del control cambia a azul y, a continuación, a amarillo, a negro en 1,5 segundos.

<!--Take one and a half seconds to transition from the
    PointerOver state to the Normal state. 
    Have the SolidColorBrush, BorderBrush, fade to blue, 
    then to yellow, and then to black in that time.-->
<VisualTransition From="PointerOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
  <Storyboard>
    <ColorAnimationUsingKeyFrames
      Storyboard.TargetProperty="Color"
      Storyboard.TargetName="BorderBrush"
      FillBehavior="HoldEnd" >

      <ColorAnimationUsingKeyFrames.KeyFrames>

        <LinearColorKeyFrame Value="Blue" 
                             KeyTime="0:0:0.5" />
        <LinearColorKeyFrame Value="Yellow" 
                             KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="Black" 
                             KeyTime="0:0:1.5" />

      </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>

<VisualStateGroup x:Name="CommonStates">

  <!--Define the VisualTransitions that can be used when the control
      transitions between VisualStates that are defined in the
      VisualStatGroup.-->
  <VisualStateGroup.Transitions>

    <!--Take one hundredth of a second to transition to the
        Pressed state.-->
    <VisualTransition To="Pressed" 
                          GeneratedDuration="0:0:0.01" />
    
    <!--Take one half second to transition to the PointerOver state.-->
    <VisualTransition To="PointerOver" 
                          GeneratedDuration="0:0:0.5" />

    <!--Take one hundredth of a second to transition from the
        Pressed state to the PointerOver state.-->
    <VisualTransition From="Pressed" To="PointerOver" 
                          GeneratedDuration="0:0:0.01" />

    <!--Take one and a half seconds to transition from the
        PointerOver state to the Normal state. 
        Have the SolidColorBrush, BorderBrush, fade to blue, 
        then to yellow, and then to black in that time.-->
    <VisualTransition From="PointerOver" To="Normal" 
                          GeneratedDuration="0:0:1.5">
      <Storyboard>
        <ColorAnimationUsingKeyFrames
          Storyboard.TargetProperty="Color"
          Storyboard.TargetName="BorderBrush"
          FillBehavior="HoldEnd" >

          <ColorAnimationUsingKeyFrames.KeyFrames>

            <LinearColorKeyFrame Value="Blue" 
                               KeyTime="0:0:0.5" />
            <LinearColorKeyFrame Value="Yellow" 
                               KeyTime="0:0:1" />
            <LinearColorKeyFrame Value="Black" 
                               KeyTime="0:0:1.5" />

          </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </VisualTransition>
  </VisualStateGroup.Transitions>

  <!--The remainder of the VisualStateGroup is the
      same as the previous example.-->

  <VisualState x:Name="Normal" />

  <VisualState x:Name="PointerOver">
    <Storyboard>
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Red" />

    </Storyboard>
  </VisualState>

  <VisualState x:Name="Pressed">
    <Storyboard >
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Transparent"/>
    </Storyboard>
  </VisualState>

  <!--The Disabled state is omitted for brevity.-->

</VisualStateGroup>

Comentarios

VisualTransition es un comportamiento que inicia un guión gráfico. Este Guión gráfico es una escala de tiempo que declara la duración que se ejecutarán las animaciones que pasan entre dos estados visuales. La transición se puede definir de forma diferente para cada combinación de estado inicial (el estado De ) y el estado final (el estado Para ) según lo definido por el conjunto de estados visuales del control. Las transiciones se definen mediante la propiedad Transitions de VisualStateGroup y normalmente se definen en XAML. La mayoría de las plantillas de control predeterminadas no definen transiciones y, en este caso, las transiciones entre estados se producen de forma instantánea. Se quitan las modificaciones del estado anterior en la plantilla y se aplican las modificaciones del nuevo estado.

VisualTransition hace referencia a uno o dos estados visuales con nombre. El valor From hace referencia al nombre de un estado que es el estado actual. El valor To hace referencia al nombre de un estado que es el nuevo estado solicitado por una llamada a GoToState . Estos nombres proceden de un valor de cadena de atributo x:Name que se aplica a visualState como parte de su definición en el mismo VisualStateGroup. From o To son un valor necesario para un VisualTransition efectivo, una VisualTransition que carece de estos valores o usa valores que no coinciden con los estados existentes no hace nada.

Un Objeto VisualTransition puede hacer referencia solo a un estado From , a un estado To o a un estado From y To . Omitir From o To equivale a cualquier estado. VisualStateManager usa una lógica de precedencia para la que se aplicará la transición cada vez que cambien los estados visuales:

  1. Si existe visualTransition que hace referencia específicamente al estado anterior como From y el nuevo estado como To, use esa transición.
  2. De lo contrario, si existe visualTransition que hace referencia específicamente al nuevo estado como To pero no especifica From, use esa transición.
  3. Por último, si existe visualTransition que hace referencia específicamente al estado anterior como From pero no especifica To, use esa transición. Si no se aplica ninguno de los anteriores, no se ejecuta ninguna transición.

Al llamar a GoToState para cambiar el estado visual de un control, VisualStateManager realiza estas acciones:

  • Si el objeto VisualState que el control usaba antes del estado visual recién solicitado tiene un guión gráfico, ese guión gráfico se detiene.
  • Entre estas acciones, se ejecuta storyboard para visualTransition, si existe una transición que implica los dos estados visuales, y el estado visual con nombre solicitado por GoToState es válido y es un nuevo estado.
  • Si el objeto VisualState denominado por stateName tiene un guión gráfico, comienza el guión gráfico.

Un objeto VisualTransition puede tener un valor storyboard , un valor GeneratedDuration o ambos. Pero si visualTransition no tiene ningún valor de guión gráfico ni un valor GeneratedDuration , visualTransition no hace nada en términos de animaciones, incluso si los estados denominados por los valores From y To están implicados en un cambio de estado.

Transiciones implícitas

Puede definir un objeto VisualTransition de modo que tenga una Clase GeneratedDuration, pero no tiene propiedades de dependencia específicas dirigidas y animadas. Esto crea una transición implícita. Cualquier propiedad de dependencia destinada específicamente a la animación en los estados visuales From o To y, por tanto, tiene valores diferentes en el cambio de estado y, a continuación, usa una animación de transición generada. Esta animación generada pasa entre el valor de estado From y el valor de estado To de dicha propiedad mediante interpolación. La animación de transición implícita dura la hora indicada por GeneratedDuration.

Las transiciones implícitas solo se aplican a las propiedades que son un valor Double, Color o Point . Es decir, la propiedad debe ser posible animar implícitamente mediante doubleAnimation, PointAnimation o ColorAnimation. Si quieres crear una animación de transición en algún otro valor, por ejemplo, un valor que requiera ObjectAnimationUsingKeyFrames, coloca esa animación en el Guión gráfico y asigna a la animación una Duración que quieras que se ejecute.

De forma predeterminada, una animación de transición implícita usa la interpolación lineal para animar un valor a través de GeneratedDuration. Puede cambiar la interpolación lineal a un comportamiento de interpolación de su elección estableciendo GeneratedEasingFunction , así como GeneratedDuration en visualTransition.

Animaciones de transición

Hay otro patrón de diseño y otra API para mostrar transiciones visuales para una aplicación para UWP con C++, C# o Visual Basic. Este concepto se denomina animaciones de transición y la clase que implementa el comportamiento es una transición de tema o una animación de tema. En lugar de declarar transiciones entre estados visuales del mismo control y aplicar cambios a propiedades de elementos de control como lo hace con estados visuales, una animación de transición representa los cambios en la relación entre un elemento de interfaz de usuario completo y la aplicación general y la interfaz de usuario. Por ejemplo, hay una RepositionThemeTransition que se puede aplicar cada vez que se mueve un elemento de interfaz de usuario en el espacio de coordenadas de la interfaz de usuario de su contenedor de diseño. Muchas de las animaciones de transición las inicia una acción del usuario. Una animación de transición se aplica a varias propiedades transition de UIElement y clases derivadas específicas, no a un VisualStateGroup. Las animaciones de transición y las animaciones de tema suelen estar integradas en el comportamiento predeterminado de un control. Para obtener más información, consulta Animaciones con guion gráfico para estados visuales.

Notas de las versiones anteriores

Windows 8.x

Para Windows 8, las transiciones de temas XAML y otros comportamientos animados automáticos de la biblioteca de animaciones no respetan una configuración de Microsoft Windows Ease of Access determinada que permite a los usuarios desactivar "animaciones innecesarias".

A partir de Windows 8.1, las transiciones de tema, las animaciones de tema y las transiciones visuales respetan la opción Desactivar todas las animaciones innecesarias (cuando sea posible) en Facilidad de acceso. Las animaciones no se ejecutarán y los cambios de estado del control o los cambios visuales son instantáneos.

Si migras el código de la aplicación de Windows 8 a Windows 8.1, es posible que quieras probar los comportamientos de animación con la opción Desactivar todas las animaciones innecesarias (cuando sea posible) habilitadas. Dado que algunas de estas animaciones se controlan mediante guiones gráficos y, a veces, encadenas animaciones personalizadas para empezar después de que se completen las transiciones visuales o las animaciones de tema, la configuración Desactivar todas las animaciones innecesarias (cuando sea posible) podría afectar a los tiempos de las animaciones. Además, si has implementado algo como visualTransition en un estado visual en lugar de como una animación con guion gráfico, es posible que quieras cambiarlo a una animación personalizada verdadera, de modo que la opción Desactivar todas las animaciones innecesarias (cuando sea posible) no la deshabilitará.

Las aplicaciones compiladas para Windows 8 pero que se ejecutan en Windows 8.1 siguen usando el comportamiento de Windows 8 para animaciones de tema y transiciones visuales. Sin embargo, la configuración de Windows 8.1 deshabilita las transiciones de tema, incluso si no se vuelve a compilar una aplicación.

Constructores

VisualTransition()

Inicializa una nueva instancia de la clase VisualTransition .

Propiedades

Dispatcher

Obtiene el CoreDispatcher al que está asociado este objeto. CoreDispatcher representa una instalación que puede acceder a DependencyObject en el subproceso de la interfaz de usuario, incluso si un subproceso que no es de interfaz de usuario inicia el código.

(Heredado de DependencyObject)
From

Obtiene o establece el nombre de VisualState desde el que se va a realizar la transición.
GeneratedDuration

Obtiene o establece la cantidad de tiempo que se tarda en pasar de un estado a otro y el tiempo que las animaciones de transición implícitas deben ejecutarse como parte del comportamiento de transición.
GeneratedEasingFunction

Obtiene o establece la función de aceleración aplicada a las animaciones generadas.
Storyboard

Obtiene o establece el guión gráfico que se ejecuta cuando se produce la transición.
To

Obtiene o establece el nombre de VisualState al que se va a realizar la transición.

Métodos

ClearValue(DependencyProperty)

Borra el valor local de una propiedad de dependencia.

(Heredado de DependencyObject)
GetAnimationBaseValue(DependencyProperty)

Devuelve cualquier valor base establecido para una propiedad de dependencia, que se aplicaría en los casos en los que una animación no está activa.

(Heredado de DependencyObject)
GetValue(DependencyProperty)

Devuelve el valor efectivo actual de una propiedad de dependencia de dependencyObject.

(Heredado de DependencyObject)
ReadLocalValue(DependencyProperty)

Devuelve el valor local de una propiedad de dependencia, si se establece un valor local.

(Heredado de DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Registra una función de notificación para escuchar los cambios en una dependencyProperty específica en esta instancia de DependencyObject .

(Heredado de DependencyObject)
SetValue(DependencyProperty, Object)

Establece el valor local de una propiedad de dependencia en dependencyObject.

(Heredado de DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Cancela una notificación de cambio registrada anteriormente mediante una llamada a RegisterPropertyChangedCallback.

(Heredado de DependencyObject)

Se aplica a

Consulte también