Silverlight - État visuel
Il est bon que votre utilisateur sache quel élément d'une application est susceptible de répondre à l'entrée. Dans une certaine mesure, cela peut être fait en faisant en sorte que les boutons ressemblent à des boutons. Si quelque chose semble cliquable, c'est probablement le cas.
Cependant, une convention dans la conception d'interface utilisateur moderne est qu'un élément d'interface utilisateur doit également signaler une volonté de répondre en changeant de parents lorsque la souris passe dessus.
Par exemple, le contrôle de bouton intégré modifie légèrement son arrière-plan, lorsque la souris se déplace, pour indiquer qu'il est interactif, puis change davantage les parents lorsque vous cliquez dessus pour le faire ressembler à sa sélection. Presque tous les contrôles doivent le faire et les concepteurs ont besoin d'un moyen de créer et de modifier les animations pour que cela se produise.
État et groupe d'État
Regardons un exemple d'état visuel en action. Considérez une case à cocher. Il peut être décoché ou coché et si vous le souhaitez, il peut prendre en charge un troisième état indéterminé. Le contrôle doit avoir une apparence différente pour les trois cas. Par conséquent, nous avons trois états visuels.
Afin de démontrer qu'il est prêt à répondre à l'entrée de l'utilisateur, la case à cocher change légèrement d'apparence lorsque la souris se déplace dessus et elle change davantage lorsque la souris y est maintenue. Un quatrième état doit être pris en compte si la case à cocher est désactivée, elle a fière allure et signale qu'elle ne répondra pas à l'entrée de l'utilisateur.
Donc, nous avons quatre autres états ici. À tout moment, l'état visuel d'une case à cocher doit être soitNormal, Mouse over, Checked ou Disabled. En même temps, il doit être soitchecked, unchecked ou indeterminate.
Gestionnaire d'état visuel
Étant donné que ses modèles définissent l'apparence des contrôles, le modèle doit définir ce qui arrive à chacun des états visuels. Les modèles que nous avons examinés jusqu'à présent ne contiennent pas de telles informations. Par conséquent, l'apparence des contrôles reste statique, quel que soit son état actuel.
Pour ajouter des états visuels à un modèle, vous commencez par ajouter un élément de propriété.
La chose la plus simple que vous puissiez faire pour la gestion de l'état visuel est de définir une animation qui s'exécutera lorsque le contrôle entrera dans un état particulier.
Les contrôles notifient la classe de gestionnaire d'état visuel chaque fois qu'ils changent d'état.
Le gestionnaire d'état visuel regarde ensuite dans cette section du modèle et détermine quelle animation exécuter.
Ainsi, lorsque la case à cocher entre dans la surestimation de la souris, cette animation s'exécute, changeant la couleur d'une partie d'un modèle.
Jetons un coup d'œil à un exemple simple en utilisant les mécanismes d'état visuel pour créer un modèle personnalisé pour une case à cocher reflétant les changements d'état.
Vous trouverez ci-dessous le code XAML pour le modèle personnalisé de case à cocher avec 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>Lorsque le code ci-dessus est compilé et exécuté, vous verrez la page Web suivante, qui en contient une checkbox.
Lorsque le curseur entre dans la zone de case à cocher, il change d'état.
Lorsque vous cliquez sur le checkbox, vous verrez l'état suivant.
Nous vous recommandons d'exécuter l'exemple ci-dessus pour une meilleure compréhension.