VisualState Clase

Definición

public ref class VisualState sealed : DependencyObject

/// [Windows.Foundation.Metadata.Activatable(65536, Windows.Foundation.UniversalApiContract)]
/// [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)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
class VisualState final : DependencyObject

/// [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)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class VisualState final : DependencyObject

[Windows.Foundation.Metadata.Activatable(65536, typeof(Windows.Foundation.UniversalApiContract))]
[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)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
public sealed class VisualState : 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)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class VisualState : DependencyObject

Public NotInheritable Class VisualState
Inherits DependencyObject

<VisualState x:Name="stateName" />
-or-
<VisualState x:Name="stateName">
  singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.StateTriggers>
    oneOrMoreTriggers
  </VisualState.StateTriggers>  
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>

Herencia

Object Platform::Object IInspectable DependencyObject VisualState

Atributos

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Requisitos de Windows

Ejemplos

En este ejemplo se crea un VisualStateGroup en controlTemplate de un button denominado "CommonStates" y se agregan objetos VisualState para los estados , "Normal", "Pressed" y "PointerOver". El botón también define un estado denominado "Disabled" que se encuentra en "CommonStates" denominado VisualStateGroup, pero el ejemplo lo omite por motivos de 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>

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock x:Name="myTextBlock" MaxLines="5" Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

Comentarios

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

Al usar StateTriggers, asegúrese de que VisualStateGroup se declara en el primer elemento secundario de la raíz para que los desencadenadores surtan efecto automáticamente.

Estado predeterminado

Es legal y común definir un visualState que tiene un atributo x:Name , pero no especifica nada en el Guión gráfico. Esto resulta útil porque este tipo de VisualState usará los valores que estén presentes en la plantilla predeterminada. A continuación, puede solicitar específicamente el estado vacío desde una llamada a GoToState . Cuando un estado vacío se convierte en el estado actual, que cancela todas las modificaciones en 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, consulta Animaciones con guion gráfico para estados visuales.

Al usar StateTriggers, ya no es necesario crear un VisualState vacío para llamar a GoToState . Cuando ya no se cumplen las condiciones de stateTrigger , todas las modificaciones realizadas por el VisualState correspondiente se quitan automáticamente y los valores proporcionados en el marcado predeterminado surten efecto.

VisualState y x:Name

El método GoToState (que normalmente se llama desde el código de control) requiere un parámetro stateName para informar al VisualStateManager qué estado se debe usar como estado actual. Especifique un atributo x:Name para cada VisualState que deba aplicarse manualmente mediante una llamada a GoToState desde el código. Si usa StateTriggers para desencadenar automáticamente visualState desde el marcado, no es necesario especificar un atributo x:Name en ese VisualState.

Si usa transiciones visuales, también se hace referencia al valor del atributo 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 indica que VisualTransition proporciona los valores intermedios entre .

El valor del atributo x:Name que especifiques para un VisualState debe ser único dentro del XAML de la plantilla de control donde existe visualState. El ámbito de los nombres de estado no solo tiene como ámbito cada VisualStateGroup, sino que se limita a todos los estados visuales de la plantilla. Por ejemplo, no puedes definir dos estados diferentes denominados "Centrados" en el mismo XAML de plantilla, aunque estén en grupos diferentes.

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

Reemplazar la plantilla de control de un control existente

Si eres un desarrollador de aplicaciones que usa un control en la interfaz de usuario de la aplicación, puedes reemplazar la plantilla de control estableciendo la propiedad Control.Template en un valor diferente. O bien, puede reemplazar la plantilla declarando un nuevo estilo que use la clave de estilo implícita para ese control. Para obtener más información sobre estos conceptos, consulte Inicio rápido: Plantillas de control.

Al reemplazar una plantilla de control, es importante que reproduzca todos los elementos de VisualState con nombre existentes del contenido visualStateManager.VisualStateGroups de la plantilla de control original en XAML. El código de control (que no está modificando) llama a GoToState. Los estados con esos nombres deben existir en la plantilla de control. Una solicitud de visualState que falta no producirá excepciones, pero a menudo dejará el control en un estado visual que será confuso para el usuario. Por ejemplo, si no proporciona un visualState denominado "Checked" para un control CheckBox , no aparece ningún comentario visual cuando el usuario selecciona el control. El usuario esperará que haya algo visualmente diferente para distinguir un CheckBox activado de una casilla desactivada. Por lo tanto, un error al reproducir los estados visuales en la parte del desarrollador de la aplicación hará que el control parezca roto para el usuario.

Cuando usas un IDE como Microsoft Visual Studio, las acciones que usas para reemplazar una plantilla de control proporcionan la opción de empezar con una copia del XAML de la plantilla original, por lo que puedes ver todos los elementos originales denominados VisualState y otra composición de control que estás reemplazando. Es mejor empezar con las copias de plantilla y, a continuación, modificarlas, de modo que no se omita accidentalmente un estado visual esperado de la nueva plantilla.

Atribuir los estados visuales con nombre de un control personalizado

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

Constructores

Propiedades

Métodos

Se aplica a

Consulte también

• DependencyObject
• VisualStateGroup
• Animaciones con guion gráfico para estados visuales
• Animaciones con guion gráfico
• Atributo x:Name
• Inicio rápido: Plantillas de control
• Ejemplo de estilo de aplicación y control XAML
• Ejemplo maestro y detalle (Windows 10)