VisualTransition Classe

Définition

/// [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>

Héritage

Object IInspectable DependencyObject VisualTransition

Attributs

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemples

Cet exemple crée un VisualTransition qui spécifie que lorsque l’utilisateur éloigne la souris du contrôle, la bordure du contrôle devient bleue, puis jaune, puis noire en 1,5 secondes.

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

Remarques

Un VisualTransition est un comportement qui lance un Storyboard. Ce storyboard est un chronologie qui déclare la durée d’exécution des animations qui passent entre deux états visuels. La transition peut être définie différemment pour chaque combinaison d’état de début (l’état From ) et d’état de fin (état To ) tel que défini par l’ensemble d’états visuels de votre contrôle. Les transitions sont définies par la propriété Transitions de VisualStateGroup et sont généralement définies en XAML. La plupart des modèles de contrôle par défaut ne définissent pas de transitions et, dans ce cas, les transitions entre les états se produisent instantanément. Les modifications apportées par l’ancien état au modèle sont supprimées et les modifications du nouvel état sont appliquées.

Un VisualTransition fait référence à un ou deux états visuels nommés. La valeur From fait référence au nom d’un état qui est l’état actuel. La valeur To fait référence au nom d’un état qui est le nouvel état demandé par un appel GoToState . Ces noms proviennent d’une valeur de chaîne d’attribut x:Name qui est appliquée à un VisualState dans le cadre de sa définition dans le même VisualStateGroup. La valeur From ou To est une valeur requise pour un VisualTransition efficace. Un VisualTransition qui n’a pas ces valeurs ou utilise des valeurs qui ne correspondent pas aux états existants ne fait rien.

Un VisualTransition peut référencer simplement un état From , simplement un état À , ou à la fois un état From et To . Omettre From ou To équivaut à n’importe quel état. VisualStateManager utilise une logique de priorité pour laquelle la transition doit s’appliquer chaque fois que les états visuels changent :

1. S’il existe un VisualTransition qui fait spécifiquement référence à l’ancien état De et au nouvel état à, utilisez cette transition.
2. Sinon, s’il existe un VisualTransition qui fait spécifiquement référence au nouvel état à mais ne spécifie pas From, utilisez cette transition.
3. Enfin, s’il existe un VisualTransition qui fait spécifiquement référence à l’ancien état from mais ne spécifie pas À, utilisez cette transition.

Si aucun des points ci-dessus ne s’applique, aucune transition ne s’exécute.

Lorsque vous appelez GoToState pour modifier l’état visuel d’un contrôle, VisualStateManager effectue les actions suivantes :

• Si le VisualState utilisé par le contrôle avant l’état visuel nouvellement demandé a un storyboard, ce storyboard s’arrête.
• Entre ces actions, le storyboard d’un VisualTransition s’exécute, si une transition impliquant les deux états visuels existe et que l’état visuel nommé demandé par GoToState est valide et est un nouvel état.
• Si le VisualState nommé par stateName a un storyboard, le storyboard commence.

Un VisualTransition peut avoir une valeur Storyboard , une valeur GeneratedDuration ou les deux. Mais si un VisualTransition n’a ni Storyboard valeur ni GeneratedDuration valeur, cela VisualTransition ne fait rien en termes d’animations, même si les états nommés par les valeurs From et To sont impliqués dans un changement d’état.

Transitions implicites

Vous pouvez définir un VisualTransition tel qu’il a un GeneratedDuration, mais qu’il n’a pas de propriétés de dépendance spécifiques ciblées et animées. Cela crée une transition implicite. Toute propriété de dépendance qui est spécifiquement ciblée pour l’animation dans les états visuels From ou To et qui a donc des valeurs différentes pour le changement d’état utilise alors une animation de transition générée. Cette animation générée effectue des transitions entre la valeur d’état From et la valeur d’état To d’une telle propriété à l’aide de l’interpolation. L’animation de transition implicite dure pendant la durée indiquée par GeneratedDuration.

Les transitions implicites s’appliquent uniquement aux propriétés qui sont une valeur Double, Couleur ou Point . En d’autres termes, la propriété doit être possible d’animer implicitement à l’aide d’un objet DoubleAnimation, PointAnimation ou ColorAnimation. Si vous souhaitez créer une animation de transition sur une autre valeur, par exemple une valeur qui nécessite ObjectAnimationUsingKeyFrames, placez cette animation dans le Storyboard et attribuez à l’animation une durée que vous souhaitez qu’elle s’exécute.

Par défaut, une animation de transition implicite utilise l’interpolation linéaire pour animer une valeur via GeneratedDuration. Vous pouvez remplacer l’interpolation linéaire par un comportement d’interpolation de votre choix en définissant GeneratedEasingFunction ainsi que GeneratedDuration sur un VisualTransition.

Animations de transition

Il existe un autre modèle de conception et une API pour afficher les transitions visuelles pour les applications utilisant C++ ou C#. Ce concept est appelé animations de transition et la classe qui implémente le comportement est une transition de thème ou une animation de thème. Au lieu de déclarer des transitions entre les états visuels du même contrôle et d’appliquer des modifications aux propriétés des parties de contrôle comme vous le faites avec les états visuels, une animation de transition représente les modifications dans la relation entre un élément d’interface utilisateur complet et l’application et l’interface utilisateur globale. Par exemple, il existe un RepositionThemeTransition qui peut être appliqué chaque fois qu’un élément d’interface utilisateur est déplacé dans l’espace de coordonnées de l’interface utilisateur de son conteneur de disposition. La plupart des animations de transition sont initiées par une action utilisateur. Une animation de transition s’applique à différentes propriétés de transitiond’UIElement et à des classes dérivées spécifiques, et non à un VisualStateGroup. Les animations de transition et les animations de thème sont souvent intégrées au comportement par défaut d’un contrôle.

Constructeurs

Propriétés

Méthodes

S’applique à

Voir aussi

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Modèles de contrôles
• Animations dans une table de montage séquentiel