VisualState Clase
Definición
Importante
Parte de la información hace referencia a la versión preliminar del producto, que puede haberse modificado sustancialmente antes de lanzar la versión definitiva. Microsoft no otorga ninguna garantía, explícita o implícita, con respecto a la información proporcionada aquí.
Representa la apariencia visual de un elemento de interfaz de usuario cuando está en un estado específico. Los estados visuales usan establecedores o guion gráfico para establecer propiedades de interfaz de usuario dentro de páginas o plantillas de control donde se define .VisualState
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>
- Herencia
- Atributos
Ejemplos
En este ejemplo se crea un VisualStateGroup en controlTemplate de un button denominado "CommonStates" y se agregan VisualState objetos para los estados , "Normal", "Pressed" y "PointerOver".
Button También define un estado denominado "Disabled" que se encuentra en "CommonStates" denominado VisualStateGroup, pero el ejemplo lo omite para mayor brevedad.
<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>
Comentarios
Un VisualState elemento siempre debe estar contenido dentro de un elemento primario VisualStateGroup en el marcado XAML.
VisualStateGroup tiene una propiedad de colección implícita Estados, por lo que puede colocar cada VisualState una como un elemento secundario inmediato del VisualStateGroup elemento primario. Por ejemplo:
<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>
Al usar StateTriggers, asegúrese de que VisualStateGroup se declara en el primer elemento secundario de la raíz para que los desencadenadores surtan efecto automáticamente.
Estado predeterminado
Es legal y común definir un VisualState que tiene un atributo x:Name , pero no especifica nada en el Guión gráfico. Esto resulta útil porque se VisualState usará cualquier valor que esté presente en la plantilla predeterminada. A continuación, puede solicitar específicamente el estado vacío desde una llamada a GoToState . Cuando un estado vacío se convierte en el estado actual, que cancela todas las modificaciones en las propiedades de plantilla realizadas por un estado visual anterior del mismo VisualStateGroup.
Al usar StateTriggers, ya no es necesario crear un vacío VisualState para llamar a GoToState . Cuando ya no se cumplen las condiciones de stateTrigger , todas las modificaciones realizadas en las propiedades realizadas por el correspondiente VisualState se quitan automáticamente y los valores proporcionados en el marcado predeterminado surten efecto.
VisualState y x:Name
El método GoToState (que normalmente se llama desde el código de control) requiere un stateName parámetro para informar al VisualStateManager del estado que se debe usar como estado actual. Especifique un atributo x:Name para cada uno VisualState que deba aplicarse manualmente mediante una llamada desde código GoToState . Si usa StateTriggers para desencadenar automáticamente un VisualState de marcado, no es necesario especificar un atributo x:Name en ese VisualState.
Si usa transiciones visuales, también se hace referencia al valor del atributo x:Name de un VisualState objeto mediante los valores From o To de un objeto VisualTransition. En este caso, el nombre identifica el estado o los estados entre los VisualTransition que proporciona los valores intermedios.
El valor del atributo x:Name que especifiques para debe VisualState ser único dentro del XAML de la plantilla de control donde VisualState existe. El ámbito de los nombres de estado no solo tiene como ámbito cada VisualStateGroup, sino que se limita a todos los estados visuales de la plantilla. Por ejemplo, no puedes definir dos estados diferentes denominados "Centrados" en el mismo XAML de plantilla, aunque estén en grupos diferentes.
Debe usar el atributo x:Name para asignar un nombre a un estado visual o un grupo de estados de objetos visuales; El atributo sin prefijo "Name" no funcionará.
VisualState y VisualStateGroup tienen una Name propiedad, pero son de solo lectura. Esa Name propiedad existe para escenarios avanzados que usan código para examinar el contenido de una plantilla de control en tiempo de ejecución, no para establecer desde XAML.
Reemplazar la plantilla de control de un control existente
Si eres un desarrollador de aplicaciones que usa un control en la interfaz de usuario de la aplicación, puedes reemplazar la plantilla de control estableciendo la propiedad Control.Template en un valor diferente. O bien, puede reemplazar la plantilla declarando un nuevo estilo que use la clave de estilo implícita para ese control. Para obtener más información sobre estos conceptos, consulta Plantillas de control XAML.
Al reemplazar una plantilla de control, es importante que reproduzcas todos los elementos con nombre VisualState existentes del contenido de la plantilla de VisualStateManager.VisualStateGroups control original en XAML. El código de control (que no está modificando) llama a GoToState. Los estados con esos nombres deben existir en la plantilla de control. Una solicitud de falta VisualState no producirá excepciones, pero a menudo dejará el control en un estado visual que será confuso para el usuario. Por ejemplo, si no proporciona un VisualState denominado "Checked" para un control CheckBox , no aparece ningún comentario visual cuando el usuario selecciona el control. El usuario esperará que haya algo visualmente diferente para distinguir una comprobación de una desactivada CheckBoxCheckBox. Por lo tanto, un error al reproducir los estados visuales en la parte del desarrollador de la aplicación hará que el control parezca roto para el usuario.
Cuando usas un IDE como Microsoft Visual Studio, las acciones que usas para reemplazar una plantilla de control proporcionan la opción de empezar con una copia del XAML de la plantilla original, por lo que puedes ver todos los elementos con nombre VisualState originales y otra composición de control que estás reemplazando. Es mejor empezar con las copias de plantilla y, a continuación, modificarlas, de modo que no se omita accidentalmente un estado visual esperado de la nueva plantilla.
Atribuir los estados visuales con nombre de un control personalizado
Si va a definir un control personalizado que tiene estados visuales en su XAML de plantilla de control, se recomienda atribuir la clase de control para indicar a los consumidores qué estados visuales están disponibles. Para ello, aplique uno o varios atributos TemplateVisualState en el nivel de clase del código de definición de control. Cada atributo debe especificar el atributo x:Name del estado, que es el stateName valor que un consumidor de control pasaría en una llamada a GoToState para usar ese estado visual.
VisualState Si forma parte de visualStateGroup, también debe indicarse en los valores de atributo.
Constructores
| VisualState() |
Inicializa una nueva instancia de la clase VisualState . |
Propiedades
| Dispatcher |
Siempre devuelve |
| DispatcherQueue |
Obtiene el objeto |
| Name |
Obtiene el nombre de VisualState. |
| Setters |
Obtiene una colección de objetos Setter que definen valores de propiedad discretos que controlan la apariencia de UIElements cuando se aplica este Objeto VisualState . |
| StateTriggers |
Obtiene una colección de objetos StateTriggerBase que indican cuándo se debe aplicar este objeto VisualState . Si alguno (no todos) de los desencadenadores está activo, |
| Storyboard |
Obtiene o establece un guión gráfico que define los valores de propiedad específicos del estado y la apariencia del control cuando se usa este estado visual. |
Métodos
| ClearValue(DependencyProperty) |
Borra el valor local de una propiedad de dependencia. (Heredado de DependencyObject) |
| GetAnimationBaseValue(DependencyProperty) |
Devuelve cualquier valor base establecido para una propiedad de dependencia, que se aplicaría en los casos en los que una animación no está activa. (Heredado de DependencyObject) |
| GetValue(DependencyProperty) |
Devuelve el valor efectivo actual de una propiedad de dependencia de dependencyObject. (Heredado de DependencyObject) |
| ReadLocalValue(DependencyProperty) |
Devuelve el valor local de una propiedad de dependencia, si se establece un valor local. (Heredado de DependencyObject) |
| RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback) |
Registra una función de notificación para escuchar los cambios en una dependencyProperty específica en esta instancia de DependencyObject . (Heredado de DependencyObject) |
| SetValue(DependencyProperty, Object) |
Establece el valor local de una propiedad de dependencia en dependencyObject. (Heredado de DependencyObject) |
| UnregisterPropertyChangedCallback(DependencyProperty, Int64) |
Cancela una notificación de cambio registrada anteriormente mediante una llamada a RegisterPropertyChangedCallback. (Heredado de DependencyObject) |