VisualStateManager Classe

Definizione

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

Ereditarietà

Object IInspectable DependencyObject VisualStateManager

Attributi

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Requisiti Windows

Esempio

In questo esempio viene illustrato come usare la proprietà associata XAML VisualStateManager.VisualStateGroups. 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 proprietà associata VisualStateManager.VisualStateGroups . All'interno di un elemento VisualStateGroup, ogni Oggetto VisualState rappresenta uno stato visivo discreto di un controllo. Ogni oggetto VisualState ha un nome rappresentativo di uno stato dell'interfaccia utente che può essere modificato dall'utente o modificato dalla logica di controllo. VisualState è costituito principalmente da uno Storyboard. Questo storyboard è destinato a modifiche del valore della proprietà di dipendenza singole che devono essere applicate ogni volta che il controllo si trova in tale stato visivo. Per altre informazioni su come scrivere stati visivi in XAML, incluso il codice di esempio, vedere Animazioni storyboard per gli stati visivi.
• 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 API VisualStateManager: VisualStateManager.VisualStateGroups e GoToState, come descritto in precedenza. Le API rimanenti sono tutte per il supporto dell'estensione e la creazione di un oggetto VisualStateManager personalizzato. 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 VisualStateGroup in XAML usando la sintassi degli elementi 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 di VisualStateManager personalizzata usa questa logica Core quando viene chiamato il metodo GoToState .
• Per fare riferimento alla classe VisualStateManager personalizzata, impostare il valore della proprietà associata VisualStateManager.CustomVisualStateManager nell'elemento radice di un oggetto ControlTemplate in cui si vuole usare il comportamento personalizzato della classe VisualStateManager, insieme all'utilizzo della proprietà associata VisualStateManager.VisualStateGroups che definisce gli stati visivi per il modello. In genere si crea un'istanza della classe VisualStateManager personalizzata tramite la costruzione XAML predefinita in Application.Resources. Viene quindi impostata la proprietà associata VisualStateManager.CustomVisualStateManager usando un riferimento all'estensione di markup {StaticResource} alla chiave della risorsa VisualStateManager personalizzata.

Ecco i requisiti di base per la creazione e l'uso di un oggetto VisualStateManager personalizzato. È 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 CurrentStateChanging viene generato da un oggetto VisualStateGroup gestito da VisualStateManager.
• 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 sottoclasse Control, che fa riferimento all'oggetto su cui agisce VisualStateManager. Page è una sottoclasse Control ed è abbastanza raro che l'interfaccia utente venga visualizzata in un contesto in cui non si ha una pagina o la radice Window.Content non è una sottoclasse Control . È consigliabile definire un userControl personalizzato per essere la radice Window.Content o essere un contenitore per altri contenuti a cui si desidera applicare gli stati, ad esempio un pannello. È quindi possibile chiamare GoToState in UserControl e applicare gli stati indipendentemente dal fatto che il resto del contenuto sia un controllo. Ad esempio, è possibile applicare gli stati visivi all'interfaccia utente che in caso contrario è costituito da uno SwapChainPanel , purché sia stato inserito all'interno di UserControl e dichiarato stati denominati che si applicano alle proprietà dell'oggetto UserControl padre 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 accesso Get e Set. 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.

Costruttori

Proprietà

Proprietà associate

Metodi

Si applica a

Vedi anche

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• Guida introduttiva: Modelli di controllo
• Animazioni con storyboard
• Animazioni con storyboard per stati di visualizzazione
• Panoramica delle proprietà associate
• Esempio di applicazione di stili di controllo XAML e app