VisualStateManager Clase

Definición

/// [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. Observe 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 objeto VisualStateGroup, denominado "CommonStates", que define los objetos "PointerOver" y "Normal" VisualState . 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, la cuadrícula 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 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 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 Objeto 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 cada vez 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 GoToState estático de VisualStateManager. Los autores de controles lo hacen cada vez 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 la lógica se encapsula mediante el control .

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 property. 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 directrices.

• 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 clase personalizada VisualStateManagerVisualStateManager, junto con el VisualStateManager.VisualStateGroups uso de propiedades adjuntas que define los estados visuales de la plantilla. Normalmente, se crea una instancia de la clase personalizada VisualStateManager a través de 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 objeto VisualStateGroup administrado por .VisualStateManager
• Invalide RaiseCurrentStateChanging para controlar cuándo se desencadena el evento CurrentStateChanging mediante un objeto VisualStateGroup administrado por .VisualStateManager
• Invalide o sobrecargue el constructor si la clase personalizada necesita información adicional para inicializarla.

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

A veces, los estados visuales son útiles para escenarios en los que 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 sobre el que actúa VisualStateManager. La página es una Control subclase y es bastante poco frecuente que se muestre la interfaz de usuario en un contexto en el que no tenga una Pageraíz Window.Content o que la raíz Window.Content no sea una Control subclase. Se recomienda definir un UserControl personalizado para que sea la Window.Content raíz o ser un contenedor para otro contenido al que quiera aplicar estados (como un Panel). A continuación, puede llamar a GoToState en sus 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 coloque dentro de los UserControl 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 equivalentes de obtención y establecimiento del 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.

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