VisualState Classe
Definizione
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.
Rappresenta l'aspetto visivo di un elemento dell'interfaccia utente quando si trova in uno stato specifico. Gli stati di visualizzazione usano setter o storyboard per impostare le proprietà dell'interfaccia utente all'interno di pagine o modelli di controllo in cui VisualState è definito .
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 : DependencyObjectPublic 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>
- Ereditarietà
- Attributi
Esempio
In questo esempio viene creato un oggetto VisualStateGroup in ControlTemplate di un controllo Button denominato "CommonStates" e vengono aggiunti VisualState oggetti per gli stati, "Normal", "Pressed" e "PointerOver". Definisce Button anche uno stato denominato "Disabled" che si trova in "CommonStates" denominato VisualStateGroup, ma l'esempio lo omette per brevità.
<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>
Commenti
Un VisualState elemento deve essere sempre contenuto all'interno di un elemento padre di VisualStateGroup nel markup XAML. Ha VisualStateGroup una proprietà di raccolta implicita States, in modo da poter inserire ognuno VisualState come elemento figlio immediato dell'elemento VisualStateGroup padre. Per esempio:
<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>
Quando si usa StateTriggers, assicurarsi che VisualStateGroup sia dichiarato nel primo elemento figlio della radice affinché i trigger vengano applicati automaticamente.
Stato predefinito
È legale e comune definire un oggetto VisualState con un attributo x:Name , ma non specifica nulla nello Storyboard. Ciò è utile perché in questo VisualState modo verranno usati i valori presenti nel modello predefinito. È quindi possibile richiedere in modo specifico lo stato vuoto da una chiamata GoToState . Quando uno stato vuoto diventa lo stato corrente, che annulla tutte le modifiche apportate alle proprietà del modello apportate da uno stato di visualizzazione precedente dallo stesso Oggetto VisualStateGroup.
Quando si usa StateTriggers, non è più necessario creare un elemento vuoto VisualState per chiamare GoToState . Quando le condizioni per un oggetto StateTrigger non vengono più soddisfatte, tutte le modifiche apportate alle proprietà apportate dal corrispondente VisualState vengono rimosse automaticamente e i valori forniti nel markup predefinito diventano effettivi.
VisualState e x:Name
Il metodo GoToState (in genere chiamato dal codice di controllo) richiede un stateName parametro per informare VisualStateManager quale stato deve essere usato come stato corrente. Specificare un attributo x:Name per ognuno VisualState che dovrà essere applicato manualmente usando una GoToState chiamata dal codice. Se si usa StateTriggers per attivare automaticamente un oggetto VisualState dal markup, non è necessario specificare un attributo x:Name in tale Oggetto VisualState.
Se si usano transizioni visive, viene fatto riferimento anche al valore dell'attributo x:Name di un VisualState oggetto dai valori From o To di un oggetto VisualTransition. In questo caso, il nome identifica lo stato o gli stati tra i quali fornisce VisualTransition i valori intermedi.
Il valore dell'attributo x:Name specificato per deve VisualState essere univoco all'interno del codice XAML del modello di controllo in cui VisualState esiste. L'ambito per i nomi di stato non è limitato a ogni oggetto VisualStateGroup, ma ha come ambito tutti gli stati di visualizzazione nel modello. Ad esempio, non è possibile definire due stati diversi denominati "Focus" nello stesso codice XAML del modello, anche se si trovano in gruppi diversi.
È necessario usare l'attributo x:Name per assegnare un nome a uno stato di visualizzazione o a un gruppo di stato degli oggetti visivi; L'attributo "Name" senza prefisso non funzionerà.
VisualState e VisualStateGroup dispongono di una Name proprietà, ma sono di sola lettura. Tale Name proprietà esiste per scenari avanzati che usano il codice per esaminare il contenuto di un modello di controllo in fase di esecuzione, non per l'impostazione da XAML.
Sostituzione del modello di controllo di un controllo esistente
Gli sviluppatori di app che usano un controllo nell'interfaccia utente dell'app possono sostituire il modello di controllo impostando la proprietà Control.Template su un valore diverso. In alternativa, è possibile sostituire il modello dichiarando un nuovo stile che usa la chiave di stile implicita per tale controllo. Per altre info su questi concetti, vedi Modelli di controllo XAML.
Quando sostituisci un modello di controllo, è importante riprodurre tutti gli elementi denominati VisualState esistenti dal contenuto del modello di VisualStateManager.VisualStateGroups controllo originale in XAML. Il codice di controllo (che non si sta modificando) chiama GoToState. Gli stati con tali nomi devono esistere nel modello di controllo. Una richiesta per un elemento mancante VisualState non genera eccezioni, ma spesso lascia il controllo in uno stato di visualizzazione che creerà confusione all'utente. Ad esempio, se non si specifica un VisualState controllo Checked denominato per un controllo CheckBox , non viene visualizzato alcun feedback visivo quando l'utente seleziona il controllo. L'utente si aspetta che ci sia qualcosa di visivamente diverso per distinguere un controllo da un oggetto deselezionato CheckBoxCheckBox. Pertanto, un errore di riprodurre gli stati di visualizzazione nella parte dello sviluppatore dell'app farà sembrare il controllo interrotto all'utente.
Quando usi un IDE, ad esempio Microsoft Visual Studio, le azioni usate per sostituire un modello di controllo forniscono l'opzione per iniziare con una copia del codice XAML del modello originale, in modo da poter visualizzare tutti gli elementi denominati VisualState originali e altre composizioni di controlli che stai sostituendo. È consigliabile iniziare con le copie del modello, quindi modificarle, in modo da non omettere accidentalmente uno stato di visualizzazione previsto dal nuovo modello.
Attributi degli stati di visualizzazione denominati di un controllo personalizzato
Se si definisce un controllo personalizzato con stati di visualizzazione nel codice XAML del modello di controllo, è consigliabile attribuire la classe di controllo per indicare ai consumer quali stati di visualizzazione sono disponibili. A tale scopo, applicare uno o più attributi TemplateVisualState a livello di classe del codice di definizione del controllo. Ogni attributo deve specificare l'attributo x:Name dello stato, ovvero il valore che un consumer di stateName controlli passerà in una chiamata GoToState per usare tale stato di visualizzazione. Se fa VisualState parte di un oggetto VisualStateGroup, deve essere indicato anche nei valori dell'attributo.
Costruttori
| Nome | Descrizione |
|---|---|
| VisualState() |
Inizializza una nuova istanza della classe VisualState . |
Proprietà
| Nome | Descrizione |
|---|---|
| Dispatcher |
Restituisce |
| DispatcherQueue |
Ottiene l'oggetto |
| Name |
Ottiene il nome di VisualState. |
| Setters |
Ottiene un insieme di oggetti Setter che definiscono valori di proprietà discreti che controllano l'aspetto di UIElements quando viene applicato questo oggetto VisualState . |
| StateTriggers |
Ottiene un insieme di oggetti StateTriggerBase che indicano quando deve essere applicato questo oggetto VisualState . Se uno dei trigger (non tutti) è attivo, |
| Storyboard |
Ottiene o imposta uno Storyboard che definisce i valori di proprietà e l'aspetto specifici dello stato del controllo quando usa questo stato di visualizzazione. |
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) |
| GetValue(DependencyProperty) |
Restituisce il valore effettivo corrente di una proprietà di dipendenza da dependencyObject. (Ereditato da DependencyObject) |
| 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) |
| 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) |