VisualState Klasse

Definition

public ref class VisualState sealed : DependencyObject

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [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 VisualState final : DependencyObject

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[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 sealed class VisualState : DependencyObject

Public NotInheritable Class VisualState
Inherits DependencyObject

<VisualState x:Name="stateName" />
-or-
<VisualState x:Name="stateName">
  singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.StateTriggers>
    oneOrMoreTriggers
  </VisualState.StateTriggers>  
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>

Vererbung

Object Platform::Object IInspectable DependencyObject VisualState

Attribute

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Beispiele

In diesem Beispiel wird eine VisualStateGroup in der ControlTemplate einer Schaltfläche namens "CommonStates" erstellt und Objekte für die Zustände "Normal", "Pressed" und "PointerOver" hinzugefügt VisualState . Außerdem Button wird ein Zustand namens "Disabled" definiert, der sich in der "CommonStates" mit dem Namen "VisualStateGroup" befindet, aber im Beispiel wird er aus Platzgründen weggelassen.

<ControlTemplate TargetType="Button">
  <Border x:Name="RootElement">

    <VisualStateManager.VisualStateGroups>

      <!--Define the states for the common states.
          The states in the VisualStateGroup are mutually exclusive to
          each other.-->
      <VisualStateGroup x:Name="CommonStates">

        <!--The Normal state is the state the button is in
            when it is not in another state from this VisualStateGroup.-->
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, BorderBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Red" />

          </Storyboard>

        </VisualState>

        <!--Change the SolidColorBrush, BorderBrush, to Transparent when the
            button is pressed.-->
        <VisualState x:Name="Pressed">
          <Storyboard >
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Transparent"/>
          </Storyboard>
        </VisualState>
          <!--The Disabled state is omitted for brevity.-->
        </VisualStateGroup>
  
    </VisualStateManager.VisualStateGroups>
    

    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>

    <Grid Background="{TemplateBinding Background}" Margin="4">
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />

    </Grid>


  </Border>
</ControlTemplate>

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock x:Name="myTextBlock" MaxLines="5" Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

Hinweise

Ein VisualState Element muss immer in einem übergeordneten Element von VisualStateGroup im XAML-Markup enthalten sein. Die Eigenschaft VisualStateGroup hat eine implizite Sammlungseigenschaft Status, sodass Sie die einzelnen VisualState elemente als direktes untergeordnetes Element des VisualStateGroup übergeordneten Elements platzieren können. Beispiel:

<VisualStateGroup x:Name="CommonStates">
   <VisualState x:Name="Normal"/>
   <VisualState x:Name="PointerOver">...</VisualState>
<!-- do not need explicit VisualStateGroups.States property element, States is the XAML content property-->
</VisualStateGroup>

Stellen Sie bei Verwendung von StateTriggers sicher, dass die VisualStateGroup unter dem ersten untergeordneten Element des Stamms deklariert wird, damit die Trigger automatisch wirksam werden.

Standardzustand

Es ist gesetzlich und üblich, ein x VisualState:Name-Attribut zu definieren, gibt aber nichts im Storyboard an. Dies ist nützlich, da eine VisualState solche Werte verwendet, die in der Standardvorlage vorhanden sind. Anschließend können Sie den leeren Zustand von einem GoToState-Aufruf explizit anfordern. Wenn ein leerer Zustand zum aktuellen Zustand wird, werden alle Änderungen an Vorlageneigenschaften abgebrochen, die von einem vorherigen visuellen Zustand aus derselben VisualStateGroup vorgenommen wurden.

Wenn Sie StateTriggers verwenden, müssen Sie nicht mehr ein leeres VisualState Objekt erstellen, um GoToState aufzurufen. Wenn die Bedingungen für einen StateTrigger nicht mehr erfüllt sind, werden alle Änderungen an den Eigenschaften, die durch die entsprechenden VisualState Eigenschaften vorgenommen werden, automatisch entfernt, und die im Standardmarkup bereitgestellten Werte werden wirksam.

VisualState und x:Name

Die GoToState-Methode (die in der Regel aus Steuerelementcode aufgerufen wird) erfordert einen stateName Parameter, um den VisualStateManager zu informieren, welcher Zustand als aktueller Zustand verwendet werden soll. Geben Sie ein x:Name-Attribut für jedes VisualState Attribut an, das mithilfe eines GoToState Aufrufs aus Code manuell angewendet werden muss. Wenn Sie StateTriggers verwenden, um automatisch ein VisualState Markup auszulösen, müssen Sie für diesen VisualState kein x:Name-Attribut angeben.

Wenn Sie visuelle Übergänge verwenden, wird auch auf den Wert des x:Name-Attributs eines VisualState Werts von "From" oder "To " einer VisualTransition verwiesen. In diesem Fall identifiziert der Name den Zustand oder die Zustände, zwischen denen die VisualTransition Zwischenwerte bereitgestellt werden.

Der x:Name-Attributwert , den Sie für ein VisualState Attribut angeben, muss innerhalb des XAML-Codes der Steuerelementvorlage eindeutig sein, in dem die VisualState Eigenschaft vorhanden ist. Der Bereich für Statusnamen ist nicht nur für jede VisualStateGroup vorgesehen, sie ist auf alle visuellen Zustände in der Vorlage festgelegt. Sie können z. B. nicht zwei unterschiedliche Zustände mit dem Namen "Relevant" in der gleichen Xaml-Vorlage definieren, auch wenn sie sich in verschiedenen Gruppen befinden.

Sie müssen das x:Name-Attribut verwenden, um eine Gruppe visueller Zustände oder visueller Zustände zu benennen; Das nicht veraltete Attribut "Name" funktioniert nicht. VisualState und VisualStateGroup verfügen jeweils über eine Name Eigenschaft, aber diese sind schreibgeschützt. Diese Name Eigenschaft ist für erweiterte Szenarien vorhanden, die Code verwenden, um den Inhalt einer Steuerelementvorlage zur Laufzeit zu untersuchen, nicht für die Einstellung aus XAML.

Ersetzen der Steuerelementvorlage eines vorhandenen Steuerelements

Wenn Sie ein App-Entwickler sind, das ein Steuerelement in der App-UI verwendet, können Sie die Steuerelementvorlage ersetzen, indem Sie die Eigenschaft "Control.Template " auf einen anderen Wert festlegen. Alternativ können Sie die Vorlage ersetzen, indem Sie eine neue Formatvorlage deklarieren, die den impliziten Stilschlüssel für dieses Steuerelement verwendet. Weitere Informationen zu diesen Konzepten finden Sie unter XAML-Steuerelementvorlagen.

Wenn Sie eine Steuerelementvorlage ersetzen, ist es wichtig, dass Sie alle vorhandenen benannten VisualState Elemente aus dem Inhalt der ursprünglichen Steuerelementvorlage VisualStateManager.VisualStateGroups in XAML reproduzieren. Der Steuerelementcode (den Sie nicht ändern) ruft GoToState auf. Zustände mit diesen Namen müssen in der Steuerelementvorlage vorhanden sein. Eine Anforderung für ein fehlendes Element VisualState löst keine Ausnahmen aus, belässt jedoch häufig das Steuerelement in einem visuellen Zustand, der für den Benutzer verwirrend ist. Wenn Sie z. B. keinen Namen "Aktiviert" für ein CheckBox-Steuerelement angebenVisualState, wird kein visuelles Feedback angezeigt, wenn der Benutzer das Steuerelement auswählt. Der Benutzer erwartet, dass es etwas anderes gibt, um ein Kontrollkästchen CheckBox von einem deaktivierten CheckBoxzu unterscheiden. Ein Fehler beim Reproduzieren der visuellen Zustände auf dem Teil des App-Entwicklers macht das Steuerelement für den Benutzer scheinbar fehlerhaft.

Wenn Sie eine IDE wie Microsoft Visual Studio verwenden, bieten die Aktionen, die Sie zum Ersetzen einer Steuerelementvorlage verwenden, die Option, mit einer Kopie der ursprünglichen Vorlagen-XAML zu beginnen, sodass Sie alle ursprünglichen benannten VisualState Elemente und andere Steuerelementkompositionen sehen können, die Sie ersetzen. Es empfiehlt sich, mit Vorlagenkopien zu beginnen und diese dann zu ändern, damit Sie nicht versehentlich einen erwarteten visuellen Zustand aus Der neuen Vorlage weglassen.

Attributieren der benannten visuellen Zustände eines benutzerdefinierten Steuerelements

Wenn Sie ein benutzerdefiniertes Steuerelement definieren, das visuelle Zustände in der XAML-Steuerelementvorlage aufweist, empfiehlt es sich, die Steuerelementklasse zu attributieren, um zu steuern, welche visuellen Zustände verfügbar sind. Wenden Sie dazu ein oder mehrere TemplateVisualState-Attribute auf der Klassenebene des Steuerelementdefinitionscodes an. Jedes Attribut sollte das x:Name-Attribut des Zustands angeben. Dabei handelt es sich um den Wert, den stateName ein Consumer eines Steuerelements in einem GoToState-Aufruf übergeben würde, um diesen visuellen Zustand zu verwenden. Wenn der VisualState Teil einer VisualStateGroup ist, sollte dies auch in Ihren Attributwerten angegeben werden.

Weitere Informationen

• DependencyObject
• VisualStateGroup
• Storyboard-gesteuerte Animationen
• x:Name-Attribut
• XAML-Steuerelementvorlagen
• Beispiel für XAML-Steuerelement- und App-Formatierung
• Master/Detail-Beispiel (Windows 10)