VisualStateManager 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)]
class VisualStateManager : 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)]
public class VisualStateManager : DependencyObject

Public Class VisualStateManager
Inherits DependencyObject

Héritage

Object IInspectable DependencyObject VisualStateManager

Attributs

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Configuration requise pour Windows

Exemples

Cet exemple montre comment utiliser la propriété jointe XAML VisualStateManager.VisualStateGroups. Notez qu’aucune balise « VisualStateManager » n’est définie. Sur le plan conceptuel, VisualStateManager.VisualStateGroups contient les états visuels d’un contrôle, en tant que balise enfant immédiate de la racine du modèle dans un modèle de contrôle.

L’ensemble particulier d’états visuels contient un VisualStateGroup, appelé « CommonStates », qui définit les objets VisualState « PointerOver » et « Normal ». Lorsque l’utilisateur place le pointeur sur le bouton, la grille passe du vert au rouge en .5 secondes. Lorsque l’utilisateur éloigne le pointeur du bouton, la grille revient immédiatement au vert.

<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

<common:LayoutAwarePage>
  <Grid>
...
    <VisualStateManager.VisualStateGroups>
    <!-- Visual states reflect the application's window size -->
      <VisualStateGroup>
        <VisualState x:Name="DefaultLayout">
           <Storyboard>
           </Storyboard>
        </VisualState>
        <VisualState x:Name="Below768Layout">
           <Storyboard>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
               Storyboard.TargetName="ContentRoot">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                   <Thickness>20,20,20,20</Thickness>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
               Storyboard.TargetName="FooterPanel">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
           </Storyboard>
         </VisualState>
       </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
   </Grid>
</common:LayoutAwarePage>

L’extrait de code suivant est du code pour aller avec le XAML, montrant comment une application peut détecter la largeur de la fenêtre d’application et utiliser ces informations pour appeler l’état visuel approprié.

String state = (Window.Current.Bounds.Width > 768) ? "DefaultLayout" : "Below768Layout";
VisualStateManager.GoToState(this, state, false); // 'this' is the LayoutAwarePage, scope is page code-behind

Remarques

VisualStateManager prend en charge deux fonctionnalités importantes pour les auteurs de contrôles et pour les développeurs d’applications qui appliquent un modèle personnalisé à un contrôle :

• Les auteurs de contrôles ou les développeurs d’applications ajoutent des éléments d’objet VisualStateGroup à l’élément racine d’une définition de modèle de contrôle en XAML, à l’aide de la propriété jointe VisualStateManager.VisualStateGroups . Dans un élément VisualStateGroup, chaque VisualState représente un état visuel discret d’un contrôle. Chaque VisualState a un nom qui est représentatif d’un état d’interface utilisateur qui peut être modifié par l’utilisateur ou modifié par la logique de contrôle. Un VisualState se compose principalement d’un storyboard. Ce Storyboard cible les modifications de valeur de propriété de dépendance individuelles qui doivent être appliquées chaque fois que le contrôle se trouve dans cet état visuel. Pour plus d’informations sur l’écriture d’états visuels en XAML, y compris des exemples de code, consultez Animations storyboard pour les états visuels.
• Les auteurs de contrôle ou les développeurs d’applications effectuent une transition entre ces états en appelant la méthode GoToState statique de VisualStateManager. Les auteurs de contrôles effectuent cette opération chaque fois que la logique de contrôle gère des événements qui indiquent un changement d’état, ou chaque fois que la logique de contrôle initie un changement d’état par elle-même. Il est plus courant que le code de définition de contrôle le fasse plutôt que le code d’application, de sorte que tous les états visuels possibles, leurs transitions et conditions de déclencheur sont présents par défaut pour le code d’application, et que la logique est encapsulée par le contrôle.

La plupart des développeurs n’utilisent que deux API VisualStateManager : VisualStateManager.VisualStateGroups et GoToState, comme décrit ci-dessus. Les API restantes sont toutes destinées à la prise en charge des extensions et à la création d’un VisualStateManager personnalisé. Pour plus d’informations, consultez la section « Custom VisualStateManager » de cette rubrique.

Lorsque vous modifiez des copies de styles comme activé par l’aire de conception XAML de Microsoft Visual Studio, les états visuels du modèle par défaut sont définis dans le XAML que vous modifiez. Veillez à ne pas supprimer ces états ni à modifier leurs noms, car la logique de contrôle s’attend à ce que ces états visuels existent dans le modèle.

En plus des états visuels, le modèle d’état visuel inclut également des transitions. Les transitions sont des actions d’animation contrôlées par un Storyboard qui se produisent entre chaque état visuel lorsque l’état est modifié. La transition peut être définie différemment pour chaque combinaison d’état de début et d’état de fin, comme défini par l’ensemble d’états visuels de votre contrôle. Les transitions sont définies par la propriété Transitions de VisualStateGroup, en XAML à l’aide de la syntaxe d’élément de propriété. La plupart des modèles de contrôle par défaut ne définissent pas de transitions. En l’absence de transitions spécifiquement définies, les transitions entre les états se produisent instantanément (durée zéro). Pour plus d’informations, consultez VisualTransition.

VisualStateManager personnalisé

Si vous souhaitez implémenter votre propre logique pour les transitions entre états (scénario avancé), vous pouvez créer une classe qui hérite de VisualStateManager. Voici les conditions à respecter concernant la vidéo :

• La classe dérivée doit remplacer la méthode GoToStateCore protégée. Toute instance du VisualStateManager personnalisé utilise cette logique Core lorsque sa méthode GoToState est appelée.
• Pour référencer votre classe VisualStateManager personnalisée, définissez la valeur de la propriété jointe VisualStateManager.CustomVisualStateManager sur l’élément racine d’un ControlTemplate où vous souhaitez utiliser le comportement de classe VisualStateManager personnalisé, parallèlement à l’utilisation de la propriété jointe VisualStateManager.VisualStateGroups qui définit les états visuels du modèle. Vous créez généralement une instance de la classe VisualStateManager personnalisée via la construction XAML par défaut dans Application.Resources. Ensuite, la propriété jointe VisualStateManager.CustomVisualStateManager est définie à l’aide d’une référence d’extension de balisage {StaticResource} à la clé de la ressource VisualStateManager personnalisée.

Il s’agit de la configuration requise de base pour la création et l’utilisation d’un VisualStateManager personnalisé. Vous pouvez également choisir de remplacer quelques comportements supplémentaires :

• Remplacez RaiseCurrentStateChanged pour contrôler quand l’événement CurrentStateChanged est déclenché par un VisualStateGroup géré par VisualStateManager.
• Remplacez RaiseCurrentStateChanging pour contrôler quand l’événement CurrentStateChanging est déclenché par un VisualStateGroup géré par VisualStateManager.
• Remplacez ou surchargez le constructeur si votre classe personnalisée a besoin d’informations supplémentaires pour l’initialiser.

Toutes les autres API (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) sont une infrastructure pour la prise en charge des propriétés jointes, et vous n’avez pas besoin de les appeler ou d’en faire quoi que ce soit.

États visuels pour les éléments qui ne sont pas des contrôles

Les états visuels sont parfois utiles pour les scénarios où vous souhaitez modifier l’état d’une zone de l’interface utilisateur qui n’est pas immédiatement une sous-classe Control . Vous ne pouvez pas effectuer cette opération directement, car le paramètre de contrôle de la méthode GoToState nécessite une sous-classe Control , qui fait référence à l’objet sur lequel le VisualStateManager agit. Page est une sous-classe Control , et il est assez rare que vous ayez l’interface utilisateur dans un contexte où vous n’avez pas de Page, ou la racine de votre Window.Content n’est pas une sous-classe Control . Nous vous recommandons de définir un UserControl personnalisé pour qu’il s’agisse de la racine Window.Content ou d’un conteneur pour d’autres contenus auquel vous souhaitez appliquer des états (par exemple, un panneau). Ensuite, vous pouvez appeler GoToState sur votre UserControl et appliquer des états, que le reste du contenu soit ou non un contrôle. Par exemple, vous pouvez appliquer des états visuels à l’interface utilisateur qui, sinon, se compose uniquement d’un SwapChainPanel , à condition que vous l’ayez placé dans votre UserControl et déclaré des états nommés qui s’appliquent aux propriétés du UserControl parent ou de la partie SwapChainPanel nommée du modèle.

Propriétés jointes XAML

VisualStateManager est la classe de service hôte pour plusieurs propriétés jointes XAML.

Pour prendre en charge l’accès du processeur XAML aux propriétés jointes, ainsi que pour exposer des opérations get et set équivalentes au code, chaque propriété jointe XAML possède une paire de méthodes d’accesseur Get et Set. Une autre façon d’obtenir ou de définir la valeur dans le code consiste à utiliser le système de propriétés de dépendance, en appelant GetValue ou SetValue et en passant le champ identificateur comme identificateur de propriété de dépendance.

Constructeurs

Propriétés

Propriétés attachées

Méthodes

S’applique à

Voir aussi

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• 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
• Vue d’ensemble des propriétés jointes
• Exemple de contrôle XAML et de style d’application