VisualStateManager Classe

Definizione

Gestisce gli stati di visualizzazione e la logica per le transizioni tra stati di visualizzazione per i controlli. Fornisce inoltre il supporto delle proprietà associate per VisualStateManager.VisualStateGroups, che è il modo in cui definisci gli stati di visualizzazione 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

Esempio

Questo esempio illustra come usare la VisualStateManager.VisualStateGroups proprietà associata XAML. Si noti che in caso contrario non è definito alcun tag "VisualStateManager". Concettualmente, VisualStateManager.VisualStateGroups contiene gli stati di visualizzazione per un controllo, come tag figlio immediato della radice del modello in un modello di controllo.

Il set specifico di stati di visualizzazione contiene un oggetto VisualStateGroup, denominato "CommonStates", che definisce gli oggetti VisualState "PointerOver" e "Normal". Quando l'utente posiziona il puntatore sul pulsante, la griglia passa da verde a rosso in 5 secondi. Quando l'utente sposta il puntatore lontano dal pulsante, la griglia torna immediatamente 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 è il codice da usare insieme al codice XAML, che mostra come un'app potrebbe rilevare la larghezza della finestra dell'app e usarle per chiamare lo stato di visualizzazione 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 oggetto VisualStateGroup all'elemento radice di una definizione di modello di controllo in XAML, usando la VisualStateManager.VisualStateGroups proprietà associata. All'interno di un VisualStateGroup elemento, ogni Oggetto VisualState rappresenta uno stato di visualizzazione 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 proprietà è destinata a modifiche del valore della proprietà di dipendenza singole che devono essere applicate ogni volta che il controllo si trova in tale stato di visualizzazione.
  • Gli autori di controlli o gli sviluppatori di app passano tra questi stati chiamando il metodo Statico GoToState 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 da sola. È 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 VisualStateManager API: VisualStateManager.VisualStateGroupse 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 info, vedi la sezione "Custom VisualStateManager" in questo argomento.

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

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

VisualStateManager personalizzato

Se si vuole implementare una logica personalizzata per le transizioni tra gli stati (uno scenario avanzato), è possibile creare una classe che eredita da VisualStateManager. Segui queste linee guida:

  • La classe derivata deve eseguire l'override del metodo GoToStateCore protetto. Qualsiasi istanza dell'oggetto personalizzato 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 desidera utilizzare il comportamento della classe personalizzata VisualStateManager , insieme all'utilizzo della VisualStateManager.VisualStateGroups proprietà associata che definisce gli stati di visualizzazione per il modello. In genere si crea un'istanza della classe personalizzata VisualStateManager tramite la costruzione XAML predefinita in Application.Resources. La VisualStateManager.CustomVisualStateManager proprietà associata viene quindi impostata usando un riferimento all'estensione di markup {StaticResource} alla chiave della risorsa personalizzata VisualStateManager .

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

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

Stati di visualizzazione per gli elementi che non sono controlli

Gli stati di visualizzazione 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. Page è una Control sottoclasse ed è piuttosto raro che si mostri l'interfaccia utente in un contesto in cui non si dispone di un Pageoggetto o la radice Window.Content non è una Control sottoclasse. È consigliabile definire un oggetto UserControl personalizzato come radice o essere Window.Content 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 oggetto Control. Ad esempio, è possibile applicare gli stati di visualizzazione all'interfaccia utente che in caso contrario sono costituiti da un oggetto 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 del servizio host per diverse proprietà associate XAML.

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

Proprietà associataDescrizione
VisualStateGroups Ottiene la raccolta di elementi VisualStateGroup definiti da un elemento radice di una definizione di modello. Un controllo definisce in genere questo oggetto come parte del relativo modello.

Quando si ottiene questa proprietà nel codice, usare GetVisualStateGroups. Verrà restituito un oggetto raccolta a cui è possibile aggiungere elementi. In questo modo viene eseguito il parallelismo del comportamento di elaborazione XAML di tutti gli elementi figlio di un utilizzo degli elementi della proprietà VisualStateManager.VisualStateGroups.

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

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

Questa proprietà associata è necessaria solo per i casi in cui vuoi usare una classe di implementazione personalizzata per gestire le modifiche dello stato di visualizzazione 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

Nome Descrizione
VisualStateManager()

Inizializza una nuova istanza della classe VisualStateManager .

Proprietà

Nome Descrizione
CustomVisualStateManagerProperty

Identifica la proprietà di dipendenza VisualStateManager.CustomVisualStateManager .

Dispatcher

Restituisce null sempre in un'app di SDK per app di Windows. Usare invece DispatcherQueue .

(Ereditato da DependencyObject)
DispatcherQueue

Ottiene l'oggetto DispatcherQueue a cui è associato questo oggetto. Rappresenta DispatcherQueue una funzionalità che può accedere al nel thread dell'interfaccia DependencyObject utente anche se il codice viene avviato da un thread non dell'interfaccia utente.

(Ereditato da DependencyObject)

Proprietà associate

Nome Descrizione
CustomVisualStateManager

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

Metodi

Nome Descrizione
ClearValue(DependencyProperty)

Cancella il valore locale di una proprietà di dipendenza.

(Ereditato da DependencyObject)
GetAnimationBaseValue(DependencyProperty)

Restituisce qualsiasi valore di base stabilito per una proprietà di dipendenza, che si applica nei casi in cui un'animazione non è attiva.

(Ereditato da DependencyObject)
GetCustomVisualStateManager(FrameworkElement)

Ottiene il valore della proprietà associata VisualStateManager.CustomVisualStateManager .

GetValue(DependencyProperty)

Restituisce il valore effettivo corrente di una proprietà di dipendenza da dependencyObject.

(Ereditato da DependencyObject)
GetVisualStateGroups(FrameworkElement)

Recupera l'insieme di oggetti VisualStateGroup associati all'oggetto FrameworkElement specificato.

GoToState(Control, String, Boolean)

Esegue la transizione di un controllo tra due stati richiedendo un nuovo oggetto VisualState in base al nome.

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

Quando sottoposto a override in una classe derivata, esegue la transizione di un controllo tra stati.

RaiseCurrentStateChanged(VisualStateGroup, VisualState, VisualState, Control)

Quando sottoposto a override in una classe derivata, genera l'evento CurrentStateChanged sull'oggetto VisualStateGroup specificato.

RaiseCurrentStateChanging(VisualStateGroup, VisualState, VisualState, Control)

Quando sottoposto a override in una classe derivata, genera l'evento CurrentStateChanging nell'oggetto VisualStateGroup specificato.

ReadLocalValue(DependencyProperty)

Restituisce il valore locale di una proprietà di dipendenza, se è impostato un valore locale.

(Ereditato da DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Registra una funzione di notifica per l'ascolto delle modifiche a una dipendenza specifica in questa istanza dependencyObject .

(Ereditato da DependencyObject)
SetCustomVisualStateManager(FrameworkElement, VisualStateManager)

Imposta il valore della proprietà associata VisualStateManager.CustomVisualStateManager .

SetValue(DependencyProperty, Object)

Imposta il valore locale di una proprietà di dipendenza in un Oggetto DependencyObject.

(Ereditato da DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Annulla una notifica di modifica registrata in precedenza chiamando RegisterPropertyChangedCallback.

(Ereditato da DependencyObject)

Si applica a

Vedi anche