VisualTransition Clase

Definición

/// [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 realizan la transición entre dos estados visuales. La transición se puede definir de forma diferente para cada combinación de estado inicial (el estado From ) y el estado final (el estado To ) tal como se define en 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 instantáneamente. Las modificaciones del estado anterior en la plantilla se quitan 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 una visualTransition eficaz, 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 , solo 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 aplica la transición cada vez que cambian los estados visuales:

1. Si existe un 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 un VisualTransition que hace referencia específicamente al nuevo estado como To pero no especifica From, use esa transición.
3. Por último, si existe un 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, 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 modo de que tenga una Clase GeneratedDuration, pero no tiene ninguna propiedad de dependencia específica dirigida y animada. 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 realiza transiciones 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 desea crear una animación de transición en algún otro valor, por ejemplo, un valor que requiera ObjectAnimationUsingKeyFrames, coloque esa animación en el Guión gráfico y asigne a la animación una duración que desee que se ejecute.

De forma predeterminada, una animación de transición implícita usa 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 API para mostrar transiciones visuales para 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 visualStateGroup. Las animaciones de transición y las animaciones de tema suelen estar integradas en el comportamiento predeterminado de un control.

Consulte también

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Plantillas de control
• animaciones con guion gráfico