VisualState Class

Representa la apariencia visual del control cuando está en un estado concreto. Los estados visuales utilizan Storyboard para establecer las propiedades de la interfaz de usuario dentro de plantillas de control donde se define VisualState.

Herencia

Object
  DependencyObject
    VisualState

Sintaxis


public sealed class VisualState : DependencyObject


<VisualState x:Name="stateName" />
-or-
<VisualState x:Name="stateName">
  singleStoryboard
</VisualState>

XAML Values

stateName

Nombre de este VisualState para utilizarlo como destino de una llamada GoToState. Vea la sección Comentarios.

singleStoryboard

Un elemento único del objeto Storyboard. Este Storyboard debe contener las animaciones específicas de la escala de tiempo que VisualState debe utilizar. Cada animación modificará los valores de propiedades de la plantilla de control cuando se use el estado visual como el estado actual.

Atributos

[ContentProperty("Name=Storyboard")]
[MarshalingBehavior(Agile)]
[Threading(Both)]
[Version(0x06020000)]
[WebHostHidden()]

Members

A continuación se indican los tipos de miembros de VisualState (Clase):

Constructores

A continuación se indican los constructores de VisualState (Clase).

ConstructorDescripción
VisualState Initializes a new instance of the VisualState class.

 

Métodos

The VisualState Clase tiene estos métodos. También hereda métodos de Object Clase.

MétodoDescripción
ClearValue Clears the local value of a dependency property. (Se hereda de DependencyObject)
GetAnimationBaseValue Returns any base value established for a dependency property, which would apply in cases where an animation is not active. (Se hereda de DependencyObject)
GetValue Returns the current effective value of a dependency property from a DependencyObject. (Se hereda de DependencyObject)
ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Se hereda de DependencyObject)
SetValue Sets the local value of a dependency property on a DependencyObject. (Se hereda de DependencyObject)

 

Propiedades

VisualStateClase tiene estas propiedades.

PropiedadTipo de accesoDescripción

Dispatcher

De sólo lecturaGets the CoreDispatcher that this object is associated with. (Se hereda de DependencyObject)

Name

De sólo lecturaGets the name of the VisualState.

Storyboard

Lectura/escrituraGets or sets a Storyboard that defines state-specific property values and appearance of the control when it is using this visual state.

 

Comentarios

Especifique siempre un valor x:Name para cada clase VisualState que defina. Si no le asigna un nombre, no podrá cargar ese VisualState. El método GoToState (al que normalmente se llama desde el código de control) requiere un parámetro stateName para informar a VisualStateManager sobre qué estado debe utilizarse como estado actual. Si utiliza transiciones visuales, también se hace referencia al valor del elemento x:Name de un objeto VisualState mediante los valores From o To de un objeto VisualTransition. En este caso, el nombre identifica el estado o los estados entre los que el objeto VisualTransition proporciona los valores intermedios.

El valor x:Name que especifica para VisualState debe ser único dentro del XAML de la plantilla de control donde existe VisualState. El ámbito para los nombres de estados no es específico para cada objeto VisualStateGroup, se aplica a todos los estados visuales de la plantilla. Por ejemplo, no puede definir los dos estados diferentes con nombre "Focused" en el mismo XAML de plantilla, aunque estén en grupos diferentes.

Debe usar el atributo x:Name para asignar nombre a un estado visual o un grupo de estados visuales; el atributo sin prefijo "Name" no funcionará. VisualState y VisualStateGroup tienen cada uno una propiedad Name pero son de solo lectura. Esa propiedad Name existe para escenarios avanzados que utilizan código para examinar el contenido de una plantilla de control en tiempo de ejecución, no para configurarla desde XAML.

Un elemento VisualState debe estar siempre dentro de un elemento primario VisualStateGroup en el marcado XAML. VisualStateGroup tiene una propiedad de colección States implícita para poder colocar cada VisualState como elemento secundario inmediato del VisualStateGroup 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>


Es válido y habitual definir un objeto VisualState que tenga un atributo x:Name, pero que no especifique nada en la propiedad Storyboard. Esto es útil porque tal VisualState utilizará los valores presentes en la plantilla predeterminada. A continuación puede solicitar específicamente el estado vacío de una llamada a GoToState. Cuando un estado vacío se convierte en el estado actual, se cancelan todas las modificaciones a las propiedades de plantilla realizadas por un estado visual anterior del mismo VisualStateGroup. Para obtener más información sobre cómo usar grupos para estados visuales, vea Animaciones de guion gráfico para estados visuales.

Reemplazar la plantilla de control de un control existente

Si es un desarrollador de la aplicación que utiliza un control en la interfaz de usuario de la aplicación, puede reemplazar la plantilla de control estableciendo la propiedad Control.Template en un valor diferente. O puede reemplazar la plantilla declarando un nuevo estilo que utilice la clave de estilo implícita para ese control. Para obtener más información sobre estos conceptos, vea Inicio rápido: plantillas de control.

Cuando se reemplaza una plantilla de control, es importante reproducir todos los elementos VisualState con nombre existentes del contenido VisualStateManager.VisualStateGroups de la plantilla de control original en XAML. El código de control (que no se está modificando) está llamando a GoToState. Los estados con esos nombres deben existir en la plantilla de control. Una solicitud de VisualState que falta no inicia excepciones, sino que permitirá a menudo el control en un estado visual que resulta confuso para el usuario. Por ejemplo, si no proporciona una clase VisualState con el nombre "Checked" para un control CheckBox, no se mostrará ningún comentario visual cuando el usuario seleccione el control. El usuario contará con que hay algo visualmente diferente para distinguir un CheckBox activado de un CheckBox desactivado. Por lo que un error al reproducir los estados visuales en la parte del desarrollador de la aplicación hará que el control le parezca roto al usuario.

Cuando utiliza un IDE como Microsoft Visual Studio, las acciones que emplea para reemplazar una plantilla de control proporcionan la opción de comenzar con una copia del XAML de plantilla original, de forma que se puedan ver todos los elementos VisualState con nombre originales y otra composición de controles que se está reemplazando. Es mejor comenzar con copias de la plantilla y modificar estas para evitar omitir accidentalmente un estado visual esperado de la nueva plantilla.

Asignando los estados visuales con nombre del control personalizado

Si define 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 del control 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 del control. Cada atributo debe especificar el x:Name del estado, que es el valor stateName que un consumidor de control pasaría en una llamada al método GoToState para usar dicho estado visual. Si el VisualState forma parte de un VisualStateGroup, también se debe indicar en los valores de atributo.

Ejemplos

Este ejemplo crea un objeto VisualStateGroup en la clase ControlTemplate de un control Button denominado "CommonStates" y agrega los objetos VisualState para los estados, "Normal", "Pressed" y "PointerOver". Button también define un estado denominado "Disabled" que está en "CommonStates" denominado VisualStateGroup, pero que se omite en el ejemplo 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>


Requisitos

Cliente mínimo admitido

Windows 8 [Solo aplicaciones de la Tienda Windows]

Servidor mínimo admitido

Windows Server 2012 [Solo aplicaciones de la Tienda Windows]

Espacio de nombres

Windows.UI.Xaml
Windows::UI::Xaml [C++]

Metadatos

Windows.winmd

Vea también

DependencyObject
VisualStateGroup
Animaciones de guion gráfico para estados visuales
Animaciones de guion gráfico
Atributo x:Name
Inicio rápido: plantillas de control
Ejemplo de aplicación de estilo a controles y aplicaciones en XAML

 

 

Mostrar:
© 2014 Microsoft