Clase VisualStateManager
TOC
Collapse the table of content
Expand the table of content

VisualStateManager Class

Administra la lógica y los estados visuales de transiciones entre estados visuales de los controles. También proporciona la compatibilidad de propiedades adjunta para VisualStateManager.VisualStateGroups, que es la manera en que se definen los estados visuales en XAML para una plantilla de control.

Herencia

Object
  DependencyObject
    VisualStateManager

Sintaxis


public class VisualStateManager : DependencyObject

Atributos

[MarshalingBehavior(Agile)]
[Threading(Both)]
[Version(0x06020000)]
[WebHostHidden()]

Members

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

Constructores

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

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

 

Métodos

The VisualStateManager 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)
GetCustomVisualStateManager Gets the value of the VisualStateManager.CustomVisualStateManager attached property.
GetValue Returns the current effective value of a dependency property from a DependencyObject. (Se hereda de DependencyObject)
GetVisualStateGroups Gets the value of the VisualStateManager.VisualStateGroups attached property.
GoToState Transitions a control between two states, by requesting a new VisualState by name.
GoToStateCore When overridden in a derived class, transitions a control between states.
RaiseCurrentStateChanged When overridden in a derived class, fires the CurrentStateChanged event on the specified VisualStateGroup.
RaiseCurrentStateChanging When overridden in a derived class, fires the CurrentStateChanging event on the specified VisualStateGroup.
ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Se hereda de DependencyObject)
SetCustomVisualStateManager Sets the value of the VisualStateManager.CustomVisualStateManager attached property.
SetValue Sets the local value of a dependency property on a DependencyObject. (Se hereda de DependencyObject)

 

Propiedades adjuntas

VisualStateManagerClase has these attached properties.

Tipo de accesoDescripción

VisualStateManager.CustomVisualStateManager

Lectura/escrituraGets or sets the custom VisualStateManager object that handles transitions between the states of a control.

VisualStateManager.VisualStateGroups

De sólo lecturaGets the collection of VisualStateGroup elements that are defined by a root element of a template definition. A control typically defines this as part of its template.

 

Propiedades

VisualStateManagerClase tiene estas propiedades.

PropiedadTipo de accesoDescripción

CustomVisualStateManagerProperty

De sólo lecturaIdentifies the VisualStateManager.CustomVisualStateManager dependency property.

Dispatcher

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

 

Comentarios

VisualStateManager admite dos características importantes para los autores de controles, y para los desarrolladores de aplicaciones que están aplicando una plantilla personalizada a un control:

  • Los autores de controles o los desarrolladores de aplicaciones agregan elementos de objeto VisualStateGroup al elemento raíz de una definición de plantilla de control en XAML usando la propiedad adjunta VisualStateManager.VisualStateGroups. Dentro de un elemento VisualStateGroup, cada VisualState representa un estado visual discreto de un control. Cada VisualState tiene un nombre que representa un estado de IU que el usuario o la lógica de control pueden modificar. Un VisualState se compone principalmente de un Storyboard. Este Storyboard está dirigido a los valores de propiedad de dependencia individuales que deben aplicarse siempre que el control esté en ese estado visual. Para obtener más información sobre cómo escribir estados visuales en XAML, incluido el código de ejemplo, vea Animaciones de guion gráfico para estados visuales.
  • Los autores de controles o los desarrolladores de aplicaciones realizan la transición entre estos estados llamando al método estático GoToState de la clase VisualStateManager. Los autores de controles realizan esta acción siempre que la lógica de control controle los eventos que indican un cambio de estado o cuando la lógica de control inicia un cambio de estado en sí. Es más común que sea el código de definición del control el que haga esto en lugar del código de aplicación; de este modo, todos los posibles estados visuales, así como sus transiciones y condiciones desencadenantes estarán allí de forma predeterminada para el código de aplicación.

La mayoría de los programadores utilizarán solo dos de las API de VisualStateManager: VisualStateManager.VisualStateGroups y GoToState, como se ha descrito anteriormente. Las API restantes tienen como objetivo la compatibilidad de las extensiones y la creación de un objeto VisualStateManager personalizado. Para obtener más información vea la sección “VisualStateManager personalizado” más adelante en este tema.

Cuando edita estilos en StandardStyles.xaml o edita copias de estilos según habilita la superficie de diseño XAML de Microsoft Visual Studio, los estados visuales de la plantilla predeterminada se definen en el XAML que está editando. Asegúrese de que no se eliminan estos estados ni se cambian sus nombres, porque la lógica de control espera que estos estados visuales existan en la plantilla.

Además de los estados visuales, el modelo de estado visual también incluye transiciones. Las transiciones son acciones de animación controladas por un Storyboard que se realizan entre cada estado visual cuando cambia el estado. La transición se puede definir de manera diferente para cada combinación de estado de inicio y estado de fin definidos por el conjunto de estados visuales del control. Las transiciones se definen mediante la propiedad Transitions de VisualStateGroup y se definen normalmente en XAML. La mayoría de las plantillas de control predeterminadas no definen transiciones y, en este caso las transiciones entre los estados suceden instantáneamente. Para obtener más información, vea VisualTransition.

Propiedades adjuntas definidas por VisualStateManager

VisualStateManager es compatible con estas propiedades unidas a XAML:

Personalizar VisualStateManager

Como escenario avanzado, es posible derivar de la clase VisualStateManager y cambiar el comportamiento predeterminado del método GoToState. Siga estas instrucciones:

  • La clase derivada debería reemplazar al método protegido GoToStateCore. Cualquier instancia de la clase VisualStateManager personalizada usa esta lógica Core cuando se llama al método GoToState.
  • Para utilizar VisualStateManager personalizado en el código de la aplicación, haga referencia la clase personalizada como recurso mediante la propiedad adjunta VisualStateManager.CustomVisualStateManager. Establezca VisualStateManager.CustomVisualStateManager en el elemento raíz de una ControlTemplate, junto con el uso de la propiedad adjunta VisualStateManager.VisualStateGroups que define los estados visuales de la plantilla.

Esos son los requisitos básicos para crear y usar un objeto VisualStateManager personalizado. También puede decidir invalidar algunos comportamientos más:

El resto de las API (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) son infraestructura para compatibilidad de las propiedades adjuntas, y no necesita llamarlas ni hacer nada con ellas.

Ejemplos

En este ejemplo se muestra cómo usar la propiedad adjunta XAML VisualStateManager.VisualStateGroups. Observe que, de lo contrario, no hay ninguna etiqueta "VisualStateManager" definida. Conceptualmente, VisualStateManager.VisualStateGroups contiene los estados visuales de cualquier un control, como una etiqueta secundaria inmediata de la raíz de una plantilla de control.

El conjunto determinado de estados visuales contiene una clase VisualStateGroup, denominada "CommonStates", que define los objetos "PointerOver" y "Normal" VisualState. Cuando el usuario coloca el puntero sobre Button, Grid cambia de verde a rojo durante medio segundo. Cuando el usuario mueve el puntero fuera del botón, Grid vuelve a cambiar inmediatamente a verde.


<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>


Este ejemplo muestra un patrón posible para invocar GoToState desde la lógica de la aplicación. Esto es un controlador para el evento Window.SizeChanged, y el escenario aquí es que se usan estados visuales de un objeto Page para controlar el diseño de página de cada uno de los estados de vista posibles de una aplicación (Full, Portrait, Snapped, Fill).


        public void OnSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs args)
        {
            switch (Windows.UI.ViewManagement.ApplicationView.Value)
            {
                case Windows.UI.ViewManagement.ApplicationViewState.Filled:
                    VisualStateManager.GoToState(this, "Fill", false);
                    break;
                case Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape:
                    VisualStateManager.GoToState(this, "Full", false);
                    break;
                case Windows.UI.ViewManagement.ApplicationViewState.Snapped:
                    VisualStateManager.GoToState(this, "Snapped", false);
                    break;
                case Windows.UI.ViewManagement.ApplicationViewState.FullScreenPortrait:
                    VisualStateManager.GoToState(this, "Portrait", false);
                    break;
                default:
                    break;
            }

            this.ShowCurrentViewState();
        }

Para obtener otro ejemplo que muestra cómo definir un estado visual que cambie la propiedad Visibility de un elemento de composición de control (una situación muy común en diseño de estado visual), vea el ejemplo de XAML en Animaciones de guion gráfico para los estados visuales.

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
VisualState
Storyboard
Inicio rápido: plantillas de control
Animaciones de guion gráfico
Animaciones de guion gráfico para estados visuales
Información general sobre propiedades adjuntas
Ejemplo de ajuste
Ejemplo de aplicación de estilo a controles y aplicaciones en XAML

 

 

Mostrar:
© 2017 Microsoft