VisualStateManager Klasse

Definition

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

Vererbung

Object IInspectable DependencyObject VisualStateManager

Attribute

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Beispiele

In diesem Beispiel wird die Verwendung der VisualStateManager.VisualStateGroups angefügten XAML-Eigenschaft veranschaulicht. Beachten Sie, dass andernfalls kein "VisualStateManager"-Tag definiert ist. Enthält konzeptionell VisualStateManager.VisualStateGroups die visuellen Zustände für ein Steuerelement als sofortiges untergeordnetes Tag des Vorlagenstamms in einer Steuerelementvorlage.

Der bestimmte Satz visueller Zustände enthält eine VisualStateGroup, die als "CommonStates" bezeichnet wird, die die VisualState-Objekte "PointerOver" und "Normal" definiert. Wenn der Benutzer den Mauszeiger über die Schaltfläche platziert, ändert sich das Raster in 0,5 Sekunden von Grün in Rot. Wenn der Benutzer den Mauszeiger weg von der Schaltfläche verschiebt, ändert sich das Raster sofort wieder in Grün.

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

Der nächste Codeausschnitt ist Code, der zusammen mit dem XAML-Code verwendet wird und zeigt, wie eine App die Breite des App-Fensters erkennen und diese Informationen verwenden kann, um den entsprechenden visuellen Zustand aufzurufen.

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

Hinweise

VisualStateManager unterstützt zwei wichtige Features für Steuerelementautoren und für App-Entwickler, die eine benutzerdefinierte Vorlage auf ein Steuerelement anwenden:

• Steuerelementautoren oder App-Entwickler fügen mithilfe der VisualStateManager.VisualStateGroups angefügten Eigenschaft VisualStateGroup-Objektelemente zum Stammelement einer Steuerelementvorlagendefinition in XAML hinzu. Innerhalb eines VisualStateGroup Elements stellt jeder VisualState einen separaten visuellen Zustand eines Steuerelements dar. Jeder VisualState verfügt über einen Namen, der für einen UI-Zustand repräsentativ ist, der vom Benutzer geändert oder durch Steuerelementlogik geändert werden kann. A VisualState besteht hauptsächlich aus einem Storyboard. Dies Storyboard zielt auf einzelne Änderungen der Abhängigkeitseigenschaft ab, die angewendet werden sollten, wenn sich das Steuerelement in diesem visuellen Zustand befindet.
• Steuern Sie Autoren oder App-Entwickler durch Aufrufen der statischen GoToState-Methode zwischen VisualStateManagerdiesen Zuständen. Steuerelementautoren tun dies, wenn die Steuerelementlogik Ereignisse behandelt, die auf eine Änderung des Zustands hinweisen, oder die Steuerelementlogik initiiert eine Zustandsänderung selbst. Es ist häufiger, dass Steuerelementdefinitionscode dies anstelle von App-Code zu tun, sodass alle möglichen visuellen Zustände und deren Übergänge und Triggerbedingungen standardmäßig für App-Code vorhanden sind und die Logik vom Steuerelement gekapselt wird.

Die meisten Entwickler verwenden nur zwei der VisualStateManager APIs: VisualStateManager.VisualStateGroupsund GoToState, wie oben beschrieben. Die verbleibenden APIs sind alle für die Erweiterungsunterstützung und das Erstellen eines benutzerdefinierten VisualStateManagerAPIs. Weitere Informationen finden Sie im Abschnitt "Custom VisualStateManager" in diesem Thema.

Wenn Sie Kopien von Formatvorlagen gemäß der XAML-Entwurfsoberfläche von Microsoft Visual Studio bearbeiten, werden die visuellen Zustände aus der Standardvorlage im XAML-Code definiert, den Sie bearbeiten. Stellen Sie sicher, dass Sie diese Zustände nicht löschen oder deren Namen ändern, da die Steuerelementlogik erwartet, dass diese visuellen Zustände in der Vorlage vorhanden sind.

Zusätzlich zu den visuellen Zuständen enthält das Visuelle Zustandsmodell auch Übergänge. Übergänge sind Animationsaktionen, die von einem Storyboard gesteuert werden, das zwischen jedem visuellen Zustand auftritt, wenn der Zustand geändert wird. Der Übergang kann für jede Kombination aus Startzustand und Endzustand anders definiert werden, wie durch den Satz visueller Zustände Ihres Steuerelements definiert. Übergänge werden durch die Transitions-Eigenschaft von VisualStateGroup, in XAML mithilfe der Eigenschaftselementsyntax definiert. Die meisten Standardsteuerelementvorlagen definieren keine Übergänge. Wenn keine speziell definierten Übergänge vorhanden sind, treten die Übergänge zwischen Zuständen instanziell (Nulldauer) auf. Weitere Informationen finden Sie unter VisualTransition.

Custom VisualStateManager

Wenn Sie Ihre eigene Logik für Übergänge zwischen Zuständen implementieren möchten (ein erweitertes Szenario), können Sie eine Klasse erstellen, die VisualStateManagervon . Befolgen Sie diese Richtlinien:

• Die abgeleitete Klasse sollte die geschützte GoToStateCore-Methode überschreiben. Jede Instanz des Benutzerdefinierten VisualStateManager verwendet diese Core-Logik , wenn die GoToState-Methode aufgerufen wird.
• Um auf Ihre benutzerdefinierte Klasse zu verweisen, legen Sie den Wert der VisualStateManager.CustomVisualStateManager angefügten Eigenschaft für das Stammelement einer ControlTemplate fest, in der Sie das benutzerdefinierte VisualStateManagerVisualStateManager Klassenverhalten verwenden möchten, zusammen mit der VisualStateManager.VisualStateGroups Verwendung angefügter Eigenschaften, die die visuellen Zustände für die Vorlage definiert. In der Regel erstellen Sie eine Instanz der benutzerdefinierten VisualStateManager Klasse über die standardmäßige XAML-Konstruktion in Application.Resources. Anschließend wird die VisualStateManager.CustomVisualStateManager angefügte Eigenschaft mithilfe eines {StaticResource}-Markuperweiterungsverweises auf den Schlüssel der benutzerdefinierten VisualStateManager Ressource festgelegt.

Dies sind die grundlegenden Anforderungen für das Erstellen und Verwenden einer benutzerdefinierten VisualStateManager. Sie können auch ein paar weitere Verhaltensweisen außer Kraft setzen:

• Überschreiben Sie RaiseCurrentStateChanged, um zu steuern, wann das CurrentStateChanged-Ereignis von einer von der VisualStateManagerVisualStateGroup verwalteten VisualStateGroup ausgelöst wird.
• Überschreiben Sie RaiseCurrentStateChanging, um zu steuern, wann das CurrentStateChanging-Ereignis von einer von der VisualStateManagerVisualStateGroup verwalteten VisualStateGroup ausgelöst wird.
• Überschreiben oder überladen Sie den Konstruktor, wenn ihre benutzerdefinierte Klasse zusätzliche Informationen zum Initialisieren benötigt.

Alle anderen APIs (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) sind Infrastruktur für die Unterstützung angefügter Eigenschaften, und Sie müssen sie nicht aufrufen oder mit ihnen tun.

Visuelle Zustände für Elemente, die keine Steuerelemente sind

Visuelle Zustände sind manchmal nützlich für Szenarien, in denen Sie den Zustand eines Bereichs der Benutzeroberfläche ändern möchten, der nicht sofort eine Steuerelementunterklasse ist. Dies ist nicht direkt möglich, da der Steuerelementparameter der GoToState-Methode eine Control Unterklasse erfordert, die sich auf das Objekt bezieht, auf das der VisualStateManager fungiert. Die Seite ist eine Control Unterklasse, und es ist ziemlich selten, dass Sie die Benutzeroberfläche in einem Kontext anzeigen, in dem Sie keine PageOder Ihr Window.Content-Stamm ist keine Control Unterklasse. Es wird empfohlen, ein benutzerdefiniertes UserControl-Objekt entweder als Window.Content Stamm oder als Container für andere Inhalte zu definieren, auf die Sie Zustände anwenden möchten (z. B. ein Panel). Anschließend können Sie GoToState für Ihre UserControl Zustände aufrufen und Zustände anwenden, unabhängig davon, ob der Rest des Inhalts ein Controlist. Sie können beispielsweise visuelle Zustände auf die Benutzeroberfläche anwenden, die andernfalls nur aus einem SwapChainPanel besteht, solange Sie diese in Ihren UserControl und deklarierten benannten Zuständen platziert haben, die für die Eigenschaften des übergeordneten UserControl oder des benannten SwapChainPanel Teils der Vorlage gelten.

Angefügte XAML-Eigenschaften

VisualStateManager ist die Hostdienstklasse für mehrere angefügte XAML-Eigenschaften.

Um den XAML-Prozessorzugriff auf die angefügten Eigenschaften zu unterstützen und auch entsprechende Get - und Set-Vorgänge für Code verfügbar zu machen, verfügt jede angefügte XAML-Eigenschaft über ein Paar und GetSet Accessormethoden. Eine weitere Möglichkeit zum Abrufen oder Festlegen des Werts im Code besteht darin, das Abhängigkeitseigenschaftssystem zu verwenden, indem entweder GetValue oder SetValue aufgerufen und das Bezeichnerfeld als Abhängigkeitseigenschaftsbezeichner übergeben wird.

Weitere Informationen

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• XAML-Steuerelementvorlagen
• Storyboard-gesteuerte Animationen
• Übersicht über angefügte Eigenschaften
• Beispiel für XAML-Steuerelement- und App-Formatierung