VisualStateManager Classe

Référence

Définition

Espace de noms:: Microsoft.UI.Xaml

Important

Certaines informations portent sur la préversion du produit qui est susceptible d’être en grande partie modifiée avant sa publication. Microsoft exclut toute garantie, expresse ou implicite, concernant les informations fournies ici.

Modifier

Gère les états visuels et la logique des transitions entre les états visuels pour les contrôles. Fournit également la prise en charge des propriétés jointes pour VisualStateManager.VisualStateGroups, qui est la façon dont vous définissez les états visuels en XAML pour un modèle de contrôle.

/// [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 VisualStateManager : DependencyObject

[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 VisualStateManager : DependencyObject

Public Class VisualStateManager
Inherits DependencyObject

Héritage: Object IInspectable DependencyObject VisualStateManager

Attributs: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemples

Cet exemple montre comment utiliser la VisualStateManager.VisualStateGroups propriété jointe XAML. Notez qu’aucune balise « VisualStateManager » n’est définie. Conceptuellement, VisualStateManager.VisualStateGroups contient les états visuels d’un contrôle, sous la forme d’une 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 VisualStateManager.VisualStateGroups propriété jointe. Dans un VisualStateGroup élément, chaque VisualState représente un état visuel discret d’un contrôle. Chacun 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. A VisualState se compose principalement d’un Storyboard. Cela 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.
Les auteurs de contrôle ou les développeurs d’applications effectuent la 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.VisualStateGroupset GoToState, comme décrit ci-dessus. Les API restantes sont toutes destinées à la prise en charge de l’extension et à la création d’un personnalisé VisualStateManager. 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 , en XAML à l’aide de VisualStateGroupla syntaxe d’élément property. 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 personnalisé VisualStateManager utilise cette logique core lorsque sa méthode GoToState est appelée.
Pour référencer votre classe personnalisée VisualStateManager , définissez la valeur de la VisualStateManager.CustomVisualStateManager propriété jointe sur l’élément racine d’un ControlTemplate où vous souhaitez utiliser le comportement de classe personnalisée VisualStateManager , parallèlement à l’utilisation de la VisualStateManager.VisualStateGroups propriété jointe qui définit les états visuels du modèle. Vous créez généralement une instance de la classe personnalisée VisualStateManager via la construction XAML par défaut dans Application.Resources. Ensuite, la propriété jointe est définie à l’aide VisualStateManager.CustomVisualStateManager d’une référence d’extension de balisage {StaticResource} à la clé de la ressource personnalisée VisualStateManager .

Il s’agit de la configuration requise de base pour la création et l’utilisation d’un personnalisé VisualStateManager. 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 Control sous-classe, qui fait référence à l’objet sur lequel le VisualStateManager agit. Page est une Control sous-classe, et il est assez rare que vous affichiez l’interface utilisateur dans un contexte où vous n’avez pas de Page, ou où votre racine Window.Content n’est pas une Control sous-classe. Nous vous recommandons de définir un UserControl personnalisé comme étant la Window.Content racine ou 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 un Control. Par exemple, vous pouvez appliquer des états visuels à l’interface utilisateur qui, sinon, se compose uniquement d’un SwapChainPanel tant que vous les avez placés dans vos UserControl états nommés et déclarés qui s’appliquent aux propriétés du parent UserControl ou de la partie nommée SwapChainPanel 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 a 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.

Propriété attachée	Description
VisualStateGroups	Obtient la collection d’éléments VisualStateGroup définis par un élément racine d’une définition de modèle. Un contrôle définit généralement cela dans le cadre de son modèle. Type : VisualStateGroup Champ identificateur : N/A Méthodes accesseur : GetVisualStateGroups Lorsque vous obtenez cette propriété dans le code, utilisez GetVisualStateGroups. Cette opération retourne un objet de collection auquel vous pouvez ajouter des éléments. Cela est parallèle au comportement de traitement XAML de tous les éléments enfants d’une utilisation d’un élément de propriété VisualStateManager.VisualStateGroups. Étant donné qu’il n’existe aucun identificateur de propriété de dépendance publique pour cette propriété jointe particulière, vous ne pouvez pas utiliser GetValue pour obtenir cette valeur de propriété jointe, vous devez toujours utiliser GetVisualStateGroups.
CustomVisualStateManager	Obtient ou définit l’objet VisualStateManager personnalisé qui gère les transitions entre les états d’un contrôle. Type : VisualStateManager Champ identificateur : CustomVisualStateManagerProperty Méthodes accesseur : GetCustomVisualStateManager, SetCustomVisualStateManager Cette propriété jointe n’est nécessaire que pour les cas où vous souhaitez utiliser une classe d’implémentation personnalisée pour gérer les changements d’état visuel de votre application, plutôt que la classe VisualStateManager par défaut implémentée par le Windows Runtime. Si vous n’avez pas l’intention d’utiliser une implémentation personnalisée, vous n’avez pas besoin de définir cette propriété.

Propriété attachée

Description

VisualStateGroups

Obtient la collection d’éléments VisualStateGroup définis par un élément racine d’une définition de modèle. Un contrôle définit généralement cela dans le cadre de son modèle.

Type : VisualStateGroup
Champ identificateur : N/A
Méthodes accesseur : GetVisualStateGroups

Lorsque vous obtenez cette propriété dans le code, utilisez GetVisualStateGroups. Cette opération retourne un objet de collection auquel vous pouvez ajouter des éléments. Cela est parallèle au comportement de traitement XAML de tous les éléments enfants d’une utilisation d’un élément de propriété VisualStateManager.VisualStateGroups.

Étant donné qu’il n’existe aucun identificateur de propriété de dépendance publique pour cette propriété jointe particulière, vous ne pouvez pas utiliser GetValue pour obtenir cette valeur de propriété jointe, vous devez toujours utiliser GetVisualStateGroups.

CustomVisualStateManager

Obtient ou définit l’objet VisualStateManager personnalisé qui gère les transitions entre les états d’un contrôle.

Type : VisualStateManager
Champ identificateur : CustomVisualStateManagerProperty
Méthodes accesseur : GetCustomVisualStateManager, SetCustomVisualStateManager

Cette propriété jointe n’est nécessaire que pour les cas où vous souhaitez utiliser une classe d’implémentation personnalisée pour gérer les changements d’état visuel de votre application, plutôt que la classe VisualStateManager par défaut implémentée par le Windows Runtime. Si vous n’avez pas l’intention d’utiliser une implémentation personnalisée, vous n’avez pas besoin de définir cette propriété.

Constructeurs

VisualStateManager()

Initialise une nouvelle instance de la classe VisualStateManager.

Propriétés

CustomVisualStateManagerProperty	Identifie la propriété de dépendance VisualStateManager.CustomVisualStateManager .
Dispatcher	Retourne `null` toujours dans une application SDK d'application Windows. Utilisez DispatcherQueue à la place. (Hérité de DependencyObject)
DispatcherQueue	Obtient le `DispatcherQueue` auquel cet objet est associé. `DispatcherQueue` représente une installation qui peut accéder au `DependencyObject` sur le thread d’interface utilisateur, même si le code est initié par un thread autre que l’interface utilisateur. (Hérité de DependencyObject)

Propriétés attachées