VisualTransition Clase

Referencia

Definición

Espacio de nombres:: Microsoft.UI.Xaml

Importante

Parte de la información hace referencia a la versión preliminar del producto, que puede haberse modificado sustancialmente antes de lanzar la versión definitiva. Microsoft no otorga ninguna garantía, explícita o implícita, con respecto a la información proporcionada aquí.

Editar

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

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualTransition : DependencyObject

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
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: ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

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

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

Hace VisualTransition 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 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:

Si existe un VisualTransition objeto que hace referencia específicamente al estado anterior como From y el nuevo estado como To, use esa transición.
De lo contrario, si existe un VisualTransition que hace referencia específicamente al nuevo estado como To pero no especifica From, use esa transición.
Por último, si existe un VisualTransition objeto 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, el guión gráfico de una VisualTransition ejecución, 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 VisualTransition puede tener un valor storyboard , un valor GeneratedDuration o ambos. Pero si un VisualTransition no tiene un Storyboard valor ni un GeneratedDuration valor, eso 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 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 las aplicaciones que usan C++ o C#. 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.

Constructores

VisualTransition()

Inicializa una nueva instancia de la clase VisualTransition .

Propiedades

Dispatcher	Siempre devuelve `null` en una aplicación de SDK de Aplicaciones para Windows. En su lugar, use DispatcherQueue . (Heredado de DependencyObject)
DispatcherQueue	Obtiene el objeto `DispatcherQueue` al que está asociado este objeto. `DispatcherQueue` representa una instalación que puede tener acceso a `DependencyObject` en el subproceso de 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

Compartir a través de

VisualTransition Clase

Definición

Ejemplos

Comentarios

Transiciones implícitas

Animaciones de transición

Constructores

Propiedades

Métodos

Se aplica a

Consulte también

Comentarios

Recursos adicionales