VisualStateManager Clase

Definición

Espacio de nombres:

Microsoft.UI.Xaml

Administra los estados visuales y la lógica para las transiciones entre los estados visuales de 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(Microsoft.UI.Xaml.WinUIContract, 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(Microsoft.UI.Xaml.WinUIContract), 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

Ejemplos

En este ejemplo se muestra cómo usar la VisualStateManager.VisualStateGroups propiedad adjunta XAML. 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 plantilla en una plantilla de control.

El conjunto determinado de estados visuales contiene un 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 el código para ir junto con el CÓDIGO XAML, que muestra 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 los desarrolladores de aplicaciones agregan elementos de objeto VisualStateGroup al elemento raíz de una definición de plantilla de control en XAML, mediante la VisualStateManager.VisualStateGroups propiedad adjunta. Dentro de un VisualStateGroup elemento, cada VisualState representa un estado visual discreto de un control. Cada 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 VisualState consta principalmente de un guión gráfico. Esto Storyboard tiene como destino los cambios de valor de propiedad de dependencia individuales que se deben aplicar siempre que el control esté en ese estado visual.
• Los autores de controles o los desarrolladores de aplicaciones realizan la transición entre estos estados mediante una llamada al método estático GoToState de VisualStateManager. Los autores de controles lo hacen siempre que la lógica de control controla los 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 VisualStateManager API: VisualStateManager.VisualStateGroups, y GoToState, como se ha descrito anteriormente. Todas las API restantes son compatibles con la extensión y la creación de un personalizado VisualStateManager. Para obtener más información, consulta 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 personalizado VisualStateManager usa esta lógica core cuando se llama a su método GoToState .
• Para hacer referencia a la clase personalizada, establezca el valor de la VisualStateManager.CustomVisualStateManager propiedad adjunta en el elemento raíz de un ControlTemplate donde desea usar el comportamiento de la clase personalizada VisualStateManagerVisualStateManager, junto con el VisualStateManager.VisualStateGroups uso de la propiedad adjunta que define los estados visuales de la plantilla. Normalmente, se crea una instancia de la clase personalizada VisualStateManager mediante la construcción XAML predeterminada en Application.Resources. A continuación, la VisualStateManager.CustomVisualStateManager propiedad adjunta se establece mediante una referencia de extensión de marcado {StaticResource} a la clave del recurso personalizado VisualStateManager .

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

• Invalide RaiseCurrentStateChanged para controlar cuándo se desencadena el evento CurrentStateChanged mediante un VisualStateGroup administrado por .VisualStateManager
• Invalide RaiseCurrentStateChanging para controlar cuándo el evento CurrentStateChanging se desencadena mediante un VisualStateGroup administrado por .VisualStateManager
• Invalide o sobrecargue el constructor si la clase personalizada necesita información adicional con la que inicializarse.

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 se desea cambiar el estado de alguna á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 Control subclase, que hace referencia al objeto en el que actúa VisualStateManager. Page es una Control subclase y es bastante poco frecuente que se muestre la interfaz de usuario en un contexto en el que no tenga , Pageo que la raíz Window.Content no sea una Control subclase. Se recomienda definir un UserControl personalizado para ser la Window.Content raíz o ser un contenedor para otro contenido al que desea aplicar estados (como un Panel). A continuación, puede llamar a GoToState en los UserControl estados y aplicar independientemente de si el resto del contenido es .Control Por ejemplo, podría aplicar estados visuales a la interfaz de usuario que, de lo contrario, consiste solo en un SwapChainPanel siempre y cuando lo haya colocado dentro UserControl de los estados con nombre declarados que se aplican a las propiedades del elemento primario UserControl o de la parte con nombre SwapChainPanel 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 el código, cada propiedad adjunta XAML tiene un par de métodos de descriptor de Get acceso 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 de identificador como identificador de propiedad de dependencia.

Propiedad adjunta	Descripción
VisualStateGroups	Obtiene la colección de elementos VisualStateGroup definidos por un elemento raíz de una definición de plantilla. Un control normalmente define esto como parte de su plantilla. Tipo: VisualStateGroup Campo de identificador: N/A Métodos de descriptor de acceso: GetVisualStateGroups 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. Tipo: VisualStateManager Campo identificador: CustomVisualStateManagerProperty Métodos de descriptor de acceso: GetCustomVisualStateManager, SetCustomVisualStateManager Esta propiedad adjunta solo es necesaria para los casos en los que quieres usar una clase de implementación personalizada para controlar los cambios de estado visual de la aplicación, en lugar de la clase predeterminada VisualStateManager implementada por el Windows Runtime. Si no tiene previsto usar una implementación personalizada, no es necesario establecer esta propiedad.

Constructores

VisualStateManager()

Inicializa una nueva instancia de la clase VisualStateManager .

Propiedades

CustomVisualStateManagerProperty	Identifica la propiedad de dependencia VisualStateManager.CustomVisualStateManager .
Dispatcher	Siempre devuelve null en una aplicación de SDK de Aplicaciones para Windows. En su lugar, use DispatcherQueue . (Heredado de DependencyObject)
DispatcherQueue	Obtiene el objeto DispatcherQueue al que está asociado este objeto. DispatcherQueue 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, solicitando un nuevo 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 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 mediante una llamada a RegisterPropertyChangedCallback. (Heredado de DependencyObject)

Consulte también

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• Plantillas de control XAML
• Animaciones con guion gráfico
• Introducción a las propiedades adjuntas
• Ejemplo de estilo de aplicación y control XAML