Silverlight - Estado visual
Es bueno si su usuario puede saber qué parte de una aplicación es probable que responda a la entrada. Hasta cierto punto, esto se puede hacer haciendo que los botones parezcan botones. Si parece que se puede hacer clic en algo, probablemente lo sea.
Sin embargo, una convención en el diseño de la interfaz de usuario moderna es que un elemento de la interfaz de usuario también debe indicar la voluntad de responder cambiando sus padres cuando el mouse se mueve sobre ellos.
Por ejemplo, el control de botón incorporado cambia levemente su fondo, cuando el mouse se mueve, para indicar que es interactivo y luego cambia más los padres cuando se hace clic para que parezca que está seleccionado. Casi todos los controles necesitan hacer esto y los diseñadores necesitan una forma de crear y editar las animaciones para que esto suceda.
Estado y grupo estatal
Veamos un ejemplo de estado visual en acción. Considere una casilla de verificación. Puede estar desmarcado o marcado y, si lo desea, puede admitir un tercer estado indeterminado. El control debe tener un aspecto diferente para los tres casos. Por tanto, tenemos tres estados visuales.
Para demostrar que está listo para responder a la entrada del usuario, la casilla de verificación cambia ligeramente su apariencia cuando el mouse se mueve sobre ella y cambia aún más cuando el mouse se mantiene allí. Se debe considerar un cuarto estado si la casilla de verificación está deshabilitada, se ve muy bien y señala que no responderá a la entrada del usuario.
Entonces, tenemos otros cuatro estados aquí. En cualquier momento, el estado visual de una casilla de verificación debe serNormal, Mouse over, Checked o Disabled. Al mismo tiempo, debe serchecked, unchecked o indeterminate.
Administrador de estado visual
Dado que sus plantillas definen la apariencia de los controles, la plantilla necesita definir qué sucede con cada uno de los estados visuales. Las plantillas que hemos examinado hasta ahora no contienen dicha información. Como resultado, la apariencia de los controles permanece estática, independientemente de su estado actual.
Para agregar estados visuales a una plantilla, comience agregando un elemento de propiedad.
Lo más simple que puede hacer para el manejo del estado visual es definir la animación que se ejecutará cuando el control entre en un estado particular.
Los controles notifican a la clase de administrador de estado visual cada vez que cambian de estado.
Luego, el administrador de estado visual busca en esta sección de la plantilla y determina qué animación ejecutar.
Entonces, cuando la casilla de verificación ingresa al estado exagerado del mouse, esta animación se ejecutará, cambiando el color de alguna parte de una plantilla.
Echemos un vistazo a un ejemplo simple utilizando los mecanismos de estado visual para crear una plantilla personalizada para una casilla de verificación que refleje los cambios de estado.
A continuación se muestra el código XAML para la plantilla personalizada de la casilla de verificación 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>Cuando se compila y ejecuta el código anterior, verá la siguiente página web, que contiene una checkbox.
Cuando el cursor entre en la región de la casilla de verificación, cambiará el estado.
Cuando haces clic en el checkbox, verá el siguiente estado.
Le recomendamos que ejecute el ejemplo anterior para comprenderlo mejor.