VisualStateManager Classe

Riferimento

Definizione

Spazio dei nomi:: Microsoft.UI.Xaml

Importante

Alcune informazioni sono relative alla release non definitiva del prodotto, che potrebbe subire modifiche significative prima della release definitiva. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Modifica

Gestisce gli stati visivi e la logica per le transizioni tra stati visivi per i controlli. Fornisce anche il supporto della proprietà associata per VisualStateManager.VisualStateGroups, che è il modo in cui si definiscono gli stati visivi in XAML per un modello di controllo.

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

Ereditarietà: Object IInspectable DependencyObject VisualStateManager

Attributi: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Esempio

In questo esempio viene illustrato come usare la VisualStateManager.VisualStateGroups proprietà associata XAML. Si noti come non esiste alcun tag "VisualStateManager" definito. Concettualmente, VisualStateManager.VisualStateGroups contiene gli stati visivi per un controllo, come tag figlio immediato della radice del modello in un modello di controllo.

Il set specifico di stati visivi contiene un oggetto VisualStateGroup denominato "CommonStates", che definisce gli oggetti "PointerOver" e "Normal". Quando l'utente inserisce il puntatore sul pulsante, la griglia cambia da verde a rosso in 5 secondi. Quando l'utente sposta il puntatore lontano dal pulsante, la griglia viene immediatamente modificata in verde.

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

Il frammento di codice successivo è codice da seguire con XAML, che mostra come un'app potrebbe rilevare la larghezza della finestra dell'app e usare tali informazioni per chiamare lo stato visivo appropriato.

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

Commenti

VisualStateManager supporta due funzionalità importanti per gli autori di controlli e per gli sviluppatori di app che applicano un modello personalizzato a un controllo:

Gli autori di controlli o gli sviluppatori di app aggiungono elementi dell'oggetto VisualStateGroup all'elemento radice di una definizione del modello di controllo in XAML usando la VisualStateManager.VisualStateGroups proprietà associata. All'interno di un VisualStateGroup elemento, ogni Oggetto VisualState rappresenta uno stato visivo discreto di un controllo. Ogni VisualState oggetto ha un nome rappresentativo di uno stato dell'interfaccia utente che può essere modificato dall'utente o modificato dalla logica di controllo. Un VisualState oggetto è costituito principalmente da uno Storyboard. Questa Storyboard destinazione consente di modificare il valore della proprietà di dipendenza singolo che deve essere applicato ogni volta che il controllo si trova in tale stato visivo.
Controllare gli autori o gli sviluppatori di app tra questi stati chiamando il metodo GoToState statico di VisualStateManager. Gli autori di controlli eseguono questa operazione ogni volta che la logica di controllo gestisce gli eventi che indicano una modifica dello stato o la logica di controllo avvia una modifica dello stato stessa. È più comune che il codice di definizione del controllo e non il codice dell'app, in modo che tutti gli stati visivi possibili e le relative transizioni e condizioni di trigger siano presenti per impostazione predefinita per il codice dell'app e che la logica sia incapsulata dal controllo.

La maggior parte degli sviluppatori userà solo due DELLE VisualStateManager API: VisualStateManager.VisualStateGroups, e GoToState, come descritto in precedenza. Le API rimanenti sono tutte per il supporto dell'estensione e la creazione di un oggetto personalizzato VisualStateManager. Per altre informazioni, vedere la sezione "Custom VisualStateManager" in questo argomento.

Quando si modificano copie di stili come abilitate dall'area di progettazione XAML di Microsoft Visual Studio, gli stati visivi del modello predefinito vengono definiti nel codice XAML che si sta modificando. Assicurarsi di non eliminare questi stati o modificare i nomi, perché la logica di controllo prevede che questi stati visivi esistano nel modello.

Oltre agli stati visivi, il modello di stato visivo include anche transizioni. Le transizioni sono azioni di animazione controllate da uno Storyboard che si verificano tra ogni stato visivo quando lo stato viene modificato. La transizione può essere definita in modo diverso per ogni combinazione di stato iniziale e stato finale, come definito dal set di stati visivi del controllo. Le transizioni vengono definite dalla proprietà Transitions di , in XAML usando la sintassi degli VisualStateGroupelementi delle proprietà. La maggior parte dei modelli di controllo predefiniti non definisce le transizioni. In assenza di transizioni definite in modo specifico, le transizioni tra stati si verificano istantaneamente (durata zero). Per altre informazioni, vedere VisualTransition.

VisualStateManager personalizzato

Se si vuole implementare la propria logica per le transizioni tra stati (uno scenario avanzato), è possibile creare una classe che eredita da VisualStateManager. Attenersi alle seguenti indicazioni:

La classe derivata deve eseguire l'override del metodo GoToStateCore protetto. Qualsiasi istanza della personalizzata VisualStateManager usa questa logica Core quando viene chiamato il metodo GoToState .
Per fare riferimento alla classe personalizzata VisualStateManager , impostare il valore della VisualStateManager.CustomVisualStateManager proprietà associata sull'elemento radice di un oggetto ControlTemplate in cui si vuole usare il comportamento della classe personalizzata VisualStateManager , insieme VisualStateManager.VisualStateGroups all'utilizzo della proprietà associata che definisce gli stati visivi per il modello. In genere si crea un'istanza della classe personalizzata VisualStateManager tramite la costruzione XAML predefinita in Application.Resources. VisualStateManager.CustomVisualStateManager La proprietà associata viene quindi impostata usando un riferimento all'estensione di markup {StaticResource} alla chiave della risorsa personalizzataVisualStateManager.

Ecco i requisiti di base per la creazione e l'uso di un oggetto personalizzato VisualStateManager. È anche possibile scegliere di eseguire l'override di alcuni altri comportamenti:

Eseguire l'override di RaiseCurrentStateChanged per controllare quando l'evento CurrentStateChanged viene generato da un oggetto VisualStateGroup gestito da VisualStateManager.
Eseguire l'override di RaiseCurrentStateChanging per controllare quando l'evento VisualStateManagerCurrentStateChanging viene generato da un oggetto VisualStateGroup gestito da .
Eseguire l'override o l'overload del costruttore se la classe personalizzata richiede informazioni aggiuntive per inizializzare.

Tutte le altre API (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) sono infrastruttura per il supporto delle proprietà associate e non è necessario chiamarle o eseguire alcuna operazione con loro.

Stati visivi per gli elementi che non sono controlli

Gli stati visivi sono talvolta utili per gli scenari in cui si vuole modificare lo stato di un'area dell'interfaccia utente che non è immediatamente una sottoclasse Control . Non è possibile eseguire questa operazione direttamente perché il parametro di controllo del metodo GoToState richiede una Control sottoclasse, che fa riferimento all'oggetto su cui agisce VisualStateManager. La pagina è una sottoclasse ed è piuttosto rara che l'interfaccia utente venga visualizzata in un Control contesto in cui non si ha una Pageclasse o la radice Window.Content non è una Control sottoclasse. È consigliabile definire un userControl personalizzato per essere la Window.Content radice o essere un contenitore per altri contenuti a cui si desidera applicare gli stati, ad esempio un pannello. È quindi possibile chiamare GoToState sugli UserControl stati e applicare, indipendentemente dal fatto che il resto del contenuto sia un Controloggetto . Ad esempio, è possibile applicare stati visivi all'interfaccia utente che in caso contrario è costituito da uno SwapChainPanel , purché sia stato inserito all'interno UserControl degli stati denominati e dichiarati che si applicano alle proprietà dell'elemento padre UserControl o della parte denominata SwapChainPanel del modello.

Proprietà associate XAML

VisualStateManager è la classe di servizio host per diverse proprietà associate XAML.

Per supportare l'accesso al processore XAML alle proprietà associate e anche per esporre operazioni di get e set equivalenti al codice, ogni proprietà associata XAML ha una coppia di metodi di Get accesso e Set accesso. Un altro modo per ottenere o impostare il valore nel codice consiste nell'usare il sistema delle proprietà di dipendenza, chiamando GetValue o SetValue e passando il campo identificatore come identificatore della proprietà di dipendenza.

Proprietà associata	Descrizione
VisualStateGroups	Ottiene l'insieme di elementi VisualStateGroup definiti da un elemento radice di una definizione di modello. Un controllo definisce in genere questo come parte del modello. Tipo: VisualStateGroup Campo identificatore: N/A Metodi di accesso: GetVisualStateGroups Quando si ottiene questa proprietà nel codice, usare GetVisualStateGroups. Restituisce un oggetto raccolta, a cui è possibile aggiungere elementi. Ciò parallela al comportamento di elaborazione XAML di tutti gli elementi figlio di un elemento di proprietà VisualStateManager.VisualStateGroups. Poiché non esiste alcun identificatore di proprietà di dipendenza pubblica per questa determinata proprietà associata, non è possibile usare GetValue per ottenere questo valore di proprietà collegato, è sempre necessario usare GetVisualStateGroups.
CustomVisualStateManager	Ottiene o imposta l'oggetto VisualStateManager personalizzato che gestisce le transizioni tra gli stati di un controllo. Tipo: VisualStateManager Campo Identificatore: CustomVisualStateManagerProperty Metodi di accesso: GetCustomVisualStateManager, SetCustomVisualStateManager Questa proprietà associata è necessaria solo per i casi in cui si vuole usare una classe di implementazione personalizzata per gestire le modifiche dello stato visivo dell'app, anziché la classe VisualStateManager predefinita implementata dal Windows Runtime. Se non si intende usare un'implementazione personalizzata, non è necessario impostare questa proprietà.

Proprietà associata

Descrizione

VisualStateGroups

Ottiene l'insieme di elementi VisualStateGroup definiti da un elemento radice di una definizione di modello. Un controllo definisce in genere questo come parte del modello.

Tipo: VisualStateGroup
Campo identificatore: N/A
Metodi di accesso: GetVisualStateGroups

Quando si ottiene questa proprietà nel codice, usare GetVisualStateGroups. Restituisce un oggetto raccolta, a cui è possibile aggiungere elementi. Ciò parallela al comportamento di elaborazione XAML di tutti gli elementi figlio di un elemento di proprietà VisualStateManager.VisualStateGroups.

Poiché non esiste alcun identificatore di proprietà di dipendenza pubblica per questa determinata proprietà associata, non è possibile usare GetValue per ottenere questo valore di proprietà collegato, è sempre necessario usare GetVisualStateGroups.

CustomVisualStateManager

Ottiene o imposta l'oggetto VisualStateManager personalizzato che gestisce le transizioni tra gli stati di un controllo.

Tipo: VisualStateManager
Campo Identificatore: CustomVisualStateManagerProperty
Metodi di accesso: GetCustomVisualStateManager, SetCustomVisualStateManager

Questa proprietà associata è necessaria solo per i casi in cui si vuole usare una classe di implementazione personalizzata per gestire le modifiche dello stato visivo dell'app, anziché la classe VisualStateManager predefinita implementata dal Windows Runtime. Se non si intende usare un'implementazione personalizzata, non è necessario impostare questa proprietà.

Costruttori

VisualStateManager()

Inizializza una nuova istanza della classe VisualStateManager .

Proprietà

CustomVisualStateManagerProperty	Identifica la proprietà di dipendenza VisualStateManager.CustomVisualStateManager .
Dispatcher	Restituisce `null` sempre in un'app Windows App SDK. Usare invece DispatcherQueue . (Ereditato da DependencyObject)
DispatcherQueue	Ottiene l'oggetto `DispatcherQueue` associato. Rappresenta `DispatcherQueue` una struttura che può accedere al thread dell'interfaccia utente anche se il codice viene avviato da un thread non dell'interfaccia `DependencyObject` utente. (Ereditato da DependencyObject)

Proprietà associate