VisualTransition Classe

Définition

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

Héritage

Object IInspectable DependencyObject VisualTransition

Attributs

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Configuration requise pour Windows

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 passe en bleu, puis en jaune, puis en noir 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épart (état From ) et d’état de fin (état À ) 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 états se produisent instantanément. Les modifications de 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. From ou To sont une valeur obligatoire pour un VisualTransition efficace, un VisualTransition qui n’a pas ces valeurs ou utilise des valeurs qui ne correspondent pas aux états existants.

Un VisualTransition peut référencer uniquement un état De , un état À , ou à la fois un état De et À . Omettre from ou to équivaut à n’importe quel état. VisualStateManager utilise une logique de précédence 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 en tant que From et au nouvel état à À, utilisez cette transition.
2. Sinon, s’il existe un VisualTransition qui fait spécifiquement référence au nouvel état en tant que À , mais ne spécifie pas De, utilisez cette transition.
3. Enfin, s’il existe un VisualTransition qui fait spécifiquement référence à l’ancien état en tant que From , mais ne spécifie pas à, utilisez cette transition. Si aucune des valeurs 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. Toutefois, si un VisualTransition n’a ni valeur storyboard ni valeur GeneratedDuration , ce 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 de telle sorte qu’il ait un GeneratedDuration, mais qu’il n’ait 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 spécifiquement ciblée pour l’animation dans les états visuels From ou To et qui a donc des valeurs différentes dans le changement d’état utilise 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, Color 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 donnez à l’animation une durée que vous souhaitez exécuter.

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 et GeneratedDuration sur un VisualTransition.

Animations de transition

Il existe un autre modèle de conception et une API permettant d’afficher des transitions visuelles pour une application UWP en C++, C# ou Visual Basic. 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 globales. 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 de l’utilisateur. Une animation de transition s’applique à différentes propriétés transition d’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. Pour plus d’informations, voir Animations dans une table de montage séquentiel pour les états visuels.

Remarques pour les versions précédentes

Windows 8.x

Par Windows 8, les transitions de thème XAML et divers autres comportements animés automatiques dans la bibliothèque d’animations n’ont pas respecté un paramètre Microsoft Windows d’ergonomie particulier qui permet aux utilisateurs de désactiver les « animations inutiles ».

À compter de Windows 8.1, les transitions de thème, les animations de thème et les transitions visuelles respectent tous le paramètre Désactiver toutes les animations inutiles (si possible) dans Options d’ergonomie. Les animations ne s’exécutent pas et l’état du contrôle change ou les modifications visuelles sont instantanées.

Si vous migrez votre code d’application de Windows 8 vers Windows 8.1, vous pouvez tester vos comportements d’animation avec le paramètre Désactiver toutes les animations inutiles (si possible). Étant donné que certaines de ces animations sont contrôlées par des storyboards et que vous enchaînez parfois des animations personnalisées pour démarrer une fois les transitions visuelles ou les animations de thème terminées, le paramètre Désactiver toutes les animations inutiles (si possible) peut affecter le minutage de vos animations. En outre, si vous avez implémenté quelque chose en tant que VisualTransition dans un état visuel plutôt qu’en tant qu’animation de table de montage séquentiel, vous souhaiterez peut-être le faire passer pour une véritable animation personnalisée, afin que le paramètre Désactiver toutes les animations inutiles (dans la mesure du possible) ne le désactive pas.

Les applications compilées pour Windows 8 mais exécutées sur Windows 8.1 continuent d’utiliser le comportement Windows 8 pour les animations de thème et les transitions visuelles. Toutefois, les transitions de thème sont désactivées par le paramètre sur Windows 8.1, même si une application n’est pas recompilée.

Constructeurs

Propriétés

Méthodes

S’applique à

Voir aussi

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Démarrage rapide : Modèles de contrôle
• Animations dans une table de montage séquentiel
• Démarrage rapide : Modèles de contrôle
• Animations dans une table de montage séquentiel
• Animations dans une table de montage séquentiel pour les états visuels