Freigeben über


VisualStateManager Klasse

Definition

Verwaltet visuelle Zustände und die Logik für Übergänge zwischen visuellen Zuständen für Steuerelemente. Stellt außerdem die Unterstützung für angefügte Eigenschaften für VisualStateManager.VisualStateGroups bereit, wodurch Sie visuelle Zustände in XAML für eine Steuerelementvorlage definieren.

/// [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
Vererbung
Object IInspectable DependencyObject VisualStateManager
Attribute

Windows-Anforderungen

Gerätefamilie
Windows 10 (eingeführt in 10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (eingeführt in v1.0)

Beispiele

In diesem Beispiel wird gezeigt, wie die angefügte XAML-Eigenschaft VisualStateManager.VisualStateGroups verwendet wird. Beachten Sie, dass andernfalls kein "VisualStateManager"-Tag definiert ist. Konzeptionell enthält VisualStateManager.VisualStateGroups die visuellen Zustände für ein Steuerelement als unmittelbar untergeordnetes Tag des Vorlagenstamms in einer Steuerelementvorlage.

Der bestimmte Satz visueller Zustände enthält eine VisualStateGroup namens "CommonStates", die die VisualState-Objekte "PointerOver" und "Normal" definiert. Wenn der Benutzer den Mauszeiger über die Schaltfläche legt, ändert sich das Raster in 0,5 Sekunden von grün in rot. Wenn der Benutzer den Zeiger von der Schaltfläche weg bewegt, wechselt 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 der Code, der mit dem XAML-Code übereinstimmt 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 visualStateGroup-Objektelemente zum Stammelement einer Steuerelementvorlagendefinition in XAML hinzu, indem sie die angefügte VisualStateManager.VisualStateGroups-Eigenschaft verwenden. Innerhalb eines VisualStateGroup-Elements stellt jedes VisualState einen diskreten visuellen Zustand eines Steuerelements dar. Jedes VisualState hat einen Namen, der für einen Benutzeroberflächenzustand steht, der vom Benutzer oder von der Steuerelementlogik geändert werden kann. Ein VisualState besteht hauptsächlich aus einem Storyboard. Dieses Storyboard zielt auf Änderungen einzelner Abhängigkeitseigenschaften ab, die angewendet werden sollten, wenn sich das Steuerelement in diesem visuellen Zustand befindet. Weitere Informationen zum Schreiben von visuellen Zuständen in XAML, einschließlich Beispielcode, finden Sie unter Storyboardanimationen für visuelle Zustände.
  • Steuerelementautoren oder App-Entwickler wechseln zwischen diesen Zuständen, indem sie die statische GoToState-Methode von VisualStateManager aufrufen. Steuerelementautoren tun dies, wenn die Steuerelementlogik Ereignisse verarbeitet, die auf eine Zustandsänderung hinweisen, oder die Steuerungslogik initiiert eine Zustandsänderung selbst. Es ist häufiger, dass Steuerelementdefinitionscode dies anstelle von App-Code tut, 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.VisualStateGroups und GoToState, wie oben beschrieben. Die verbleibenden APIs dienen alle zur Unterstützung von Erweiterungen und zum Erstellen eines benutzerdefinierten VisualStateManagers. Weitere Informationen finden Sie im Abschnitt "Custom VisualStateManager" in diesem Thema.

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

Zusätzlich zu den visuellen Zuständen umfasst das visuelle Zustandsmodell auch Übergänge. Übergänge sind Animationsaktionen, die von einem Storyboard gesteuert werden und zwischen jedem visuellen Zustand auftreten, wenn der Zustand geändert wird. Der Übergang kann für jede Kombination aus Startzustand und Endzustand unterschiedlich 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 Eigenschaftenelementsyntax definiert. Die meisten Standardsteuerelementvorlagen definieren keine Übergänge. Wenn keine speziell definierten Übergänge vorhanden sind, erfolgen die Übergänge zwischen Zuständen sofort (Nulldauer). Weitere Informationen finden Sie unter VisualTransition.

Benutzerdefinierter 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 von VisualStateManager erbt. Beachten Sie diese Vorgaben:

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

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

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

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 Control-Unterklasse ist. Dies ist nicht direkt möglich, da der Steuerelementparameter der GoToState-Methode eine Control-Unterklasse erfordert, die auf das Objekt verweist, auf das visualStateManager reagiert. Page ist eine Steuerelement-Unterklasse , und es ist ziemlich selten, dass Die Benutzeroberfläche in einem Kontext angezeigt wird, in dem Sie keine Seite haben oder ihr Window.Content-Stamm keine Steuerelementunterklasse ist. Es wird empfohlen, ein benutzerdefiniertes UserControl zu definieren, um entweder als Window.Content-Stamm oder als Container für andere Inhalte zu dienen, auf die Sie Zustände anwenden möchten (z. B. ein Panel). Anschließend können Sie GoToState für Ihr UserControl aufrufen und Zustände anwenden, unabhängig davon, ob der Rest des Inhalts ein Steuerelement ist. Sie können beispielsweise visuelle Zustände auf die Benutzeroberfläche anwenden, die andernfalls nur aus einem SwapChainPanel besteht, solange Sie diese in Ihrem UserControl-Objekt platziert haben und benannte Zustände deklariert haben, die für die Eigenschaften des übergeordneten UserControl-Objekts 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 äquivalente Get - und Set-Vorgänge für Code verfügbar zu machen, verfügt jede angefügte XAML-Eigenschaft über ein Paar von Get- und Set-Accessormethoden. Eine weitere Möglichkeit zum Abrufen oder Festlegen des Werts im Code besteht darin, das Abhängigkeitseigenschaftensystem zu verwenden, entweder GetValue oder SetValue aufzurufen und das Bezeichnerfeld als Abhängigkeitseigenschaftsbezeichner zu übergeben.

Angefügte EigenschaftBESCHREIBUNG
Visualstategroups Ruft die Auflistung von VisualStateGroup-Elementen ab, die durch ein Stammelement einer Vorlagendefinition definiert werden. Ein Steuerelement definiert dies in der Regel als Teil seiner Vorlage.

Wenn Sie diese Eigenschaft im Code abrufen, verwenden Sie GetVisualStateGroups. Dadurch wird ein Auflistungsobjekt zurückgegeben, dem Sie Elemente hinzufügen können. Dies entspricht dem XAML-Verarbeitungsverhalten aller untergeordneten Elemente einer VisualStateManager.VisualStateGroups-Eigenschaft.

Da für diese bestimmte angefügte Eigenschaft kein öffentlicher Abhängigkeitseigenschaftsbezeichner vorhanden ist, können Sie getValue nicht verwenden, um diesen angefügten Eigenschaftswert abzurufen. Sie müssen immer GetVisualStateGroups verwenden.

CustomVisualStateManager Ruft das benutzerdefinierte VisualStateManager-Objekt ab, das Übergänge zwischen den Zuständen eines Steuerelements behandelt, oder legt es fest.

Konstruktoren

VisualStateManager()

Initialisiert eine neue instance der VisualStateManager-Klasse.

Eigenschaften

CustomVisualStateManagerProperty

Identifiziert die VisualStateManager.CustomVisualStateManager-Abhängigkeitseigenschaft .

Dispatcher

Ruft den CoreDispatcher ab, dem dieses Objekt zugeordnet ist. CoreDispatcher stellt eine Funktion dar, die auf das DependencyObject im UI-Thread zugreifen kann, auch wenn der Code von einem Nicht-UI-Thread initiiert wird.

(Geerbt von DependencyObject)

Angefügte Eigenschaften

CustomVisualStateManager

Ruft das benutzerdefinierte VisualStateManager-Objekt ab, das Übergänge zwischen den Zuständen eines Steuerelements behandelt, oder legt es fest.

Methoden

ClearValue(DependencyProperty)

Löscht den lokalen Wert einer Abhängigkeitseigenschaft.

(Geerbt von DependencyObject)
GetAnimationBaseValue(DependencyProperty)

Gibt einen beliebigen Basiswert zurück, der für eine Abhängigkeitseigenschaft eingerichtet wurde, der in Fällen gilt, in denen eine Animation nicht aktiv ist.

(Geerbt von DependencyObject)
GetCustomVisualStateManager(FrameworkElement)

Ruft den Wert der angefügten Eigenschaft VisualStateManager.CustomVisualStateManager ab.

GetValue(DependencyProperty)

Gibt den aktuellen effektiven Wert einer Abhängigkeitseigenschaft aus einem DependencyObject zurück.

(Geerbt von DependencyObject)
GetVisualStateGroups(FrameworkElement)

Ruft die Auflistung von VisualStateGroup-Objekten ab, die dem angegebenen FrameworkElement zugeordnet sind.

GoToState(Control, String, Boolean)

Übergibt ein Steuerelement zwischen zwei Zuständen, indem ein neues VisualState anhand des Namens angefordert wird.

GoToStateCore(Control, FrameworkElement, String, VisualStateGroup, VisualState, Boolean)

Beim Überschreiben in einer abgeleiteten Klasse übergibt ein Steuerelement zwischen Zuständen.

RaiseCurrentStateChanged(VisualStateGroup, VisualState, VisualState, Control)

Löst beim Überschreiben in einer abgeleiteten Klasse das CurrentStateChanged-Ereignis für die angegebene VisualStateGroup aus.

RaiseCurrentStateChanging(VisualStateGroup, VisualState, VisualState, Control)

Löst beim Überschreiben in einer abgeleiteten Klasse das CurrentStateChanging-Ereignis für die angegebene VisualStateGroup aus.

ReadLocalValue(DependencyProperty)

Gibt den lokalen Wert einer Abhängigkeitseigenschaft zurück, wenn ein lokaler Wert festgelegt ist.

(Geerbt von DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Registriert eine Benachrichtigungsfunktion zum Lauschen auf Änderungen an einer bestimmten DependencyProperty für dieses DependencyObject-instance.

(Geerbt von DependencyObject)
SetCustomVisualStateManager(FrameworkElement, VisualStateManager)

Legt den Wert der angefügten Eigenschaft VisualStateManager.CustomVisualStateManager fest.

SetValue(DependencyProperty, Object)

Legt den lokalen Wert einer Abhängigkeitseigenschaft für ein DependencyObject fest.

(Geerbt von DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Bricht eine Änderungsbenachrichtigung ab, die zuvor durch Aufrufen von RegisterPropertyChangedCallback registriert wurde.

(Geerbt von DependencyObject)

Gilt für:

Weitere Informationen