VisualStateManager Clase

  • Referencia

Definición

Espacio de nombres:
Windows.UI.Xaml
Editar

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

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualStateManager : DependencyObject
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class VisualStateManager : DependencyObject
Public Class VisualStateManager
Inherits DependencyObject
Herencia
Object IInspectable DependencyObject VisualStateManager
Atributos
ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Requisitos de Windows

Familia de dispositivos
Windows 10 (se introdujo en la versión 10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (se introdujo en la versión v1.0)

Ejemplos

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

El conjunto concreto de estados visuales contiene un objeto VisualStateGroup, denominado "CommonStates", que define los objetos VisualState "PointerOver" y "Normal". Cuando el usuario coloca el puntero sobre el botón, la cuadrícula cambia de verde a rojo en .5 segundos. Cuando el usuario mueve el puntero fuera del botón, grid cambia 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>

<common:LayoutAwarePage>
  <Grid>
...
    <VisualStateManager.VisualStateGroups>
    <!-- Visual states reflect the application's window size -->
      <VisualStateGroup>
        <VisualState x:Name="DefaultLayout">
           <Storyboard>
           </Storyboard>
        </VisualState>
        <VisualState x:Name="Below768Layout">
           <Storyboard>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
               Storyboard.TargetName="ContentRoot">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                   <Thickness>20,20,20,20</Thickness>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
               Storyboard.TargetName="FooterPanel">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
           </Storyboard>
         </VisualState>
       </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
   </Grid>
</common:LayoutAwarePage>

El siguiente fragmento de código es código para ir junto con el XAML, mostrando cómo una aplicación podría detectar el ancho de la ventana de la aplicación y usar esa información para llamar al estado visual adecuado.

String state = (Window.Current.Bounds.Width > 768) ? "DefaultLayout" : "Below768Layout";
VisualStateManager.GoToState(this, state, false); // 'this' is the LayoutAwarePage, scope is page code-behind

Comentarios

VisualStateManager admite dos características importantes para los autores de controles y para los desarrolladores de aplicaciones que aplican una plantilla personalizada a un control:

  • Los autores de controles o desarrolladores de aplicaciones agregan elementos de objeto VisualStateGroup al elemento raíz de una definición de plantilla de control en XAML mediante la propiedad adjunta VisualStateManager.VisualStateGroups . Dentro de un elemento VisualStateGroup, cada Objeto VisualState representa un estado visual discreto de un control. Cada Objeto VisualState tiene un nombre que es representativo de un estado de interfaz de usuario que el usuario puede cambiar o cambiar por lógica de control. Un objeto VisualState consta principalmente de un Guión gráfico. Este guión gráfico tiene como destino los cambios de valor de propiedad de dependencia individuales que se deben aplicar cada vez 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, consulta Animaciones con guion gráfico para estados visuales.
  • Los autores de controles o desarrolladores de aplicaciones realizan la transición entre estos estados mediante una llamada al método GoToState estático de VisualStateManager. Los autores de controles lo hacen cada vez que la lógica de control controla eventos que indican un cambio de estado o la lógica de control inicia un cambio de estado por sí mismo. Es más común que el código de definición de control haga esto en lugar del código de la aplicación, de modo que todos los estados visuales posibles y sus transiciones y condiciones de desencadenador estén allí de forma predeterminada para el código de la aplicación y el control encapsula la lógica.

La mayoría de los desarrolladores usarán solo dos de las API de VisualStateManager: VisualStateManager.VisualStateGroups y GoToState, como se describió anteriormente. Todas las API restantes son compatibles con extensiones y crean un VisualStateManager personalizado. Para obtener más información, consulte la sección "Custom VisualStateManager" de este tema.

Al editar copias de estilos como habilitadas por 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 no eliminar estos estados ni cambiar sus nombres, ya que 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 Guión gráfico que se produce entre cada estado visual cuando se cambia el estado. La transición se puede definir de forma diferente para cada combinación de estado inicial y estado final según lo definido por el conjunto de estados visuales del control. Las transiciones se definen mediante la propiedad Transitions de VisualStateGroup, en XAML mediante la sintaxis del elemento de propiedad. La mayoría de las plantillas de control predeterminadas no definen transiciones. En ausencia de transiciones definidas específicamente, las transiciones entre estados se producen instantáneamente (duración cero). Para obtener más información, consulta VisualTransition.

VisualStateManager personalizado

Si desea implementar su propia lógica para las transiciones entre estados (un escenario avanzado), puede crear una clase que herede de VisualStateManager. Siga estas instrucciones:

  • La clase derivada debe invalidar el método GoToStateCore protegido. Cualquier instancia del VisualStateManager personalizado usa esta lógica core cuando se llama a su método GoToState .
  • Para hacer referencia a la clase VisualStateManager personalizada, establezca el valor de la propiedad adjunta VisualStateManager.CustomVisualStateManager en el elemento raíz de un ControlTemplate donde quiera usar el comportamiento personalizado de la clase VisualStateManager, junto con el uso de la propiedad adjunta VisualStateManager.VisualStateGroups que define los estados visuales de la plantilla. Normalmente, creas una instancia de la clase VisualStateManager personalizada a través de la construcción XAML predeterminada en Application.Resources. A continuación, la propiedad adjunta VisualStateManager.CustomVisualStateManager se establece mediante una referencia de extensión de marcado {StaticResource} a la clave del recurso visualStateManager personalizado.

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

Todas las demás API (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) son infraestructura para la compatibilidad con propiedades adjuntas y no es necesario llamarlas ni hacer nada con ellos.

Estados visuales de los elementos que no son controles

Los estados visuales a veces son útiles para escenarios en los que desea cambiar el estado de algún área de la interfaz de usuario que no es inmediatamente una subclase Control . No puede hacerlo directamente porque el parámetro de control del método GoToState requiere una subclase Control , que hace referencia al objeto sobre el que actúa VisualStateManager. Page es una subclase Control y es bastante poco frecuente que se muestre la interfaz de usuario en un contexto en el que no tenga una página o que la raíz Window.Content no sea una subclase Control . Se recomienda definir un UserControl personalizado para que sea la raíz Window.Content o ser un contenedor para otro contenido al que quiera aplicar estados (por ejemplo, un Panel). A continuación, puede llamar a GoToState en userControl y aplicar estados independientemente de si el resto del contenido es un control. Por ejemplo, podría aplicar estados visuales a la interfaz de usuario que, de lo contrario, consta de un SwapChainPanel siempre y cuando lo haya colocado dentro de userControl y declarado estados con nombre que se aplican a las propiedades del UserControl primario o de la parte swapChainPanel denominada de la plantilla.

Propiedades adjuntas xaml

VisualStateManager es la clase de servicio host para varias propiedades adjuntas xaml.

Para admitir el acceso del procesador XAML a las propiedades adjuntas, y también para exponer operaciones de obtención y establecimiento equivalentes en código, cada propiedad adjunta XAML tiene un par de métodos de descriptor de acceso Get y Set. Otra manera de obtener o establecer el valor en el código es usar el sistema de propiedades de dependencia, llamar a GetValue o SetValue y pasar el campo identificador como identificador de propiedad de dependencia.

Propiedad adjuntaDescripción
VisualStateGroups Obtiene la colección de elementos De VisualStateGroup definidos por un elemento raíz de una definición de plantilla. Normalmente, un control define esto como parte de su plantilla.

Al obtener esta propiedad en el código, use GetVisualStateGroups. Esto devuelve un objeto de colección al que puede agregar elementos. Esto paraleliza el comportamiento de procesamiento XAML de cualquier elemento secundario de un uso de elementos de propiedad VisualStateManager.VisualStateGroups.

Dado que no hay ningún identificador de propiedad de dependencia público para esta propiedad adjunta determinada, no puede usar GetValue para obtener este valor de propiedad adjunta, siempre tiene que usar GetVisualStateGroups.

CustomVisualStateManager Obtiene o establece el objeto VisualStateManager personalizado que controla las transiciones entre los estados de un control.

Constructores

VisualStateManager()

Inicializa una nueva instancia de la clase VisualStateManager .

Propiedades

CustomVisualStateManagerProperty

Identifica la propiedad de dependencia VisualStateManager.CustomVisualStateManager .
Dispatcher

Obtiene el CoreDispatcher al que está asociado este objeto. CoreDispatcher representa una instalación que puede tener acceso a DependencyObject en el subproceso de interfaz de usuario incluso si un subproceso que no es de interfaz de usuario inicia el código.

(Heredado de DependencyObject)

Propiedades adjuntas

CustomVisualStateManager

Obtiene o establece el objeto VisualStateManager personalizado que controla las transiciones entre los estados de un control.

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)
GetCustomVisualStateManager(FrameworkElement)

Obtiene el valor de la propiedad adjunta VisualStateManager.CustomVisualStateManager .
GetValue(DependencyProperty)

Devuelve el valor efectivo actual de una propiedad de dependencia de dependencyObject.

(Heredado de DependencyObject)
GetVisualStateGroups(FrameworkElement)

Recupera la colección de objetos VisualStateGroup asociados al frameworkElement especificado.
GoToState(Control, String, Boolean)

Realiza una transición de un control entre dos estados mediante la solicitud de un nuevo Objeto VisualState por nombre.
GoToStateCore(Control, FrameworkElement, String, VisualStateGroup, VisualState, Boolean)

Cuando se invalida en una clase derivada, realiza una transición de un control entre estados.
RaiseCurrentStateChanged(VisualStateGroup, VisualState, VisualState, Control)

Cuando se invalida en una clase derivada, desencadena el evento CurrentStateChanged en el objeto VisualStateGroup especificado.
RaiseCurrentStateChanging(VisualStateGroup, VisualState, VisualState, Control)

Cuando se invalida en una clase derivada, desencadena el evento CurrentStateChanging en el objeto VisualStateGroup especificado.
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)
SetCustomVisualStateManager(FrameworkElement, VisualStateManager)

Establece el valor de la propiedad adjunta VisualStateManager.CustomVisualStateManager .
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 llamando a RegisterPropertyChangedCallback.

(Heredado de DependencyObject)

Se aplica a

Consulte también