Silverlight - Stato visivo
È utile se l'utente può dire quale bit di un'applicazione probabilmente risponderà all'input. In una certa misura, questo può essere fatto facendo sembrare i pulsanti dei pulsanti. Se qualcosa sembra cliccabile, probabilmente lo è.
Tuttavia, una convenzione nella progettazione dell'interfaccia utente moderna è che un elemento dell'interfaccia utente dovrebbe anche segnalare la disponibilità a rispondere cambiando i genitori quando il mouse si sposta su di essi.
Ad esempio, il controllo del pulsante integrato cambia leggermente lo sfondo, quando il mouse si sposta, per suggerire che è interattivo e quindi cambia ulteriormente i genitori quando viene cliccato per farlo sembrare selezionato. Quasi tutti i controlli devono farlo ei progettisti hanno bisogno di un modo per creare e modificare le animazioni per realizzarlo.
State & State Group
Vediamo un esempio di stato visivo in azione. Considera una casella di controllo. Può essere deselezionato o selezionato e, se lo desideri, può supportare un terzo stato indeterminato. Il controllo deve avere un aspetto diverso per tutti e tre i casi. Pertanto, abbiamo tre Stati di visualizzazione.
Per dimostrare che è pronta a rispondere all'input dell'utente, la casella di controllo cambia leggermente il suo aspetto quando il mouse si sposta su di essa e cambia ulteriormente quando il mouse viene tenuto lì. Un quarto stato deve essere considerato se la casella di controllo è disabilitata, ha un bell'aspetto e segnala che non risponderà all'input dell'utente.
Quindi, abbiamo altri quattro stati qui. In qualsiasi momento, lo stato visivo di una casella di controllo deve essere oNormal, Mouse over, Checked o Disabled. Allo stesso tempo, deve esserlochecked, unchecked o indeterminate.
Visual State Manager
Poiché i suoi modelli definiscono l'aspetto dei controlli, il modello deve definire cosa accade a ciascuno degli stati di visualizzazione. I modelli che abbiamo esaminato finora non contengono tali informazioni. Di conseguenza, l'aspetto dei controlli rimane statico, indipendentemente dal suo stato corrente.
Per aggiungere stati di visualizzazione a un modello, iniziare aggiungendo un elemento di proprietà.
La cosa più semplice che puoi fare per la gestione dello stato di visualizzazione è definire l'animazione che verrà eseguita quando il controllo entra in uno stato particolare.
I controlli notificano la classe del gestore dello stato di visualizzazione ogni volta che cambiano stato.
Il visual state manager cerca quindi in questa sezione del modello e determina quale animazione eseguire.
Quindi, quando la casella di controllo inserisce la sovrastima del mouse, questa animazione verrà eseguita, cambiando il colore di una parte di un modello.
Diamo uno sguardo a un semplice esempio utilizzando i meccanismi dello stato di visualizzazione per creare un modello personalizzato per una casella di controllo che rifletta i cambiamenti di stato.
Di seguito è riportato il codice XAML per il modello personalizzato della casella di controllo con visual state.
<UserControl
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
x:Class = "CheckboxVisualState.Page"
Width = "640" Height="480"
xmlns:vsm = "clrnamespace:System.Windows;assembly = System.Windows"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<UserControl.Resources>
<ControlTemplate x:Key = "CheckBoxControlTemplate1" TargetType = "CheckBox">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name = "FocusStates">
<vsm:VisualState x:Name = "ContentFocused"/>
<vsm:VisualState x:Name = "Focused"/>
<vsm:VisualState x:Name = "Unfocused"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name = "CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name = "MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime = "00:00:00"
Duration = "00:00:00.0010000" Storyboard.TargetName = "background"
Storyboard.TargetProperty = "(Shape.Fill).
(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFFF0000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name = "Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime = "00:00:00"
Duration = "00:00:00.0010000" Storyboard.TargetName = "background"
Storyboard.TargetProperty = "(Shape.Fill).
(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFCEFF00"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name = "Disabled"/>
<vsm:VisualState x:Name = "Normal"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name = "CheckStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name = "Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime = "00:00:00"
Duration = "00:00:00.0010000" Storyboard.TargetName = "checkPath"
Storyboard.TargetProperty = "(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime = "00:00:00" Value = "1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name = "Unchecked"/>
<vsm:VisualState x:Name = "Indeterminate"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto"/>
<ColumnDefinition Width = "3.61782296696066"/>
<ColumnDefinition Width = "Auto"/>
</Grid.ColumnDefinitions>
<Canvas Height = "50" HorizontalAlignment = "Left" VerticalAlignment = "Top"
Width = "50">
<Rectangle Height = "33.746" x:Name = "background" Width = "33.746"
Canvas.Left = "8.452" Canvas.Top = "7.88" Fill = "#FFFFFFFF"
Stroke = "#FF000000"
RadiusX = "5.507" RadiusY = "5.507"/>
<Path Height = "40.25" x:Name = "checkPath" Width = "39.75" Opacity = "0"
Canvas.Left = "5.959" Canvas.Top = "7.903" Stretch = "Fill"
Stroke = "#FF1F9300" StrokeThickness = "3"
Data = "M1.5,1.5 C15.495283,8.7014561 27.056604,18.720875 33.75,33.75
M36,3.75 C22.004717,10.951456 10.443395,20.970875 3.7499986,36"/>
</Canvas>
<ContentPresenter HorizontalAlignment = "Left"
Margin = "{TemplateBinding Padding}"
VerticalAlignment = "{TemplateBinding VerticalContentAlignment}"
Grid.Column = "2" Grid.ColumnSpan = "1" d:LayoutOverrides = "Height"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot" Background = "White" >
<CheckBox HorizontalAlignment = "Left"
Margin = "52.5410003662109,53.5970001220703,0,0" VerticalAlignment = "Top"
Template = "{StaticResource CheckBoxControlTemplate1}"
Content = "CheckBox"/>
</Grid>
</UserControl>Quando il codice sopra è stato compilato ed eseguito, vedrai la seguente pagina web, che ne contiene uno checkbox.
Quando il cursore entra nella regione della casella di controllo, cambierà lo stato.
Quando fai clic sul file checkbox, vedrai il seguente stato.
Ti consigliamo di eseguire l'esempio sopra per una migliore comprensione.