Compartilhar via

VisualStateManager Classe

  • Referência

Definição

Namespace:
Windows.UI.Xaml
Editar

Gerencia estados visuais e a lógica para transições entre estados visuais para controles. Também fornece o suporte à propriedade anexada para VisualStateManager.VisualStateGroups, que é como você define estados visuais em XAML para um modelo de controle.

/// [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
Herança
Object IInspectable DependencyObject VisualStateManager
Atributos
ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Requisitos do Windows

Família de dispositivos
Windows 10 (introduzida na 10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduzida na v1.0)

Exemplos

Este exemplo mostra como usar a propriedade anexada XAML VisualStateManager.VisualStateGroups. Observe como não há nenhuma marca "VisualStateManager" definida. Conceitualmente, VisualStateManager.VisualStateGroups contém os estados visuais de um controle, como uma marca filho imediata da raiz do modelo em um modelo de controle.

O conjunto específico de estados visuais contém um VisualStateGroup, chamado "CommonStates", que define os objetos "PointerOver" e "Normal" do VisualState . Quando o usuário coloca o ponteiro sobre o Botão, a Grade muda de verde para vermelho em 0,5 segundos. Quando o usuário move o ponteiro para longe do botão, a Grade muda imediatamente de volta para 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>

O próximo snippet é o código para acompanhar o XAML, mostrando como um aplicativo pode detectar a largura da janela do aplicativo e usar essas informações para chamar o estado visual apropriado.

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

Comentários

O VisualStateManager dá suporte a dois recursos importantes para autores de controle e para desenvolvedores de aplicativos que estão aplicando um modelo personalizado a um controle:

  • Os autores de controle ou desenvolvedores de aplicativos adicionam elementos de objeto VisualStateGroup ao elemento raiz de uma definição de modelo de controle em XAML, usando a propriedade anexada VisualStateManager.VisualStateGroups . Dentro de um elemento VisualStateGroup, cada VisualState representa um estado visual discreto de um controle. Cada VisualState tem um nome que representa um estado de interface do usuário que pode ser alterado pelo usuário ou alterado pela lógica de controle. Um VisualState consiste principalmente em um Storyboard. Este Storyboard tem como destino alterações de valor de propriedade de dependência individuais que devem ser aplicadas sempre que o controle estiver nesse estado visual. Para obter mais informações sobre como escrever estados visuais em XAML, incluindo código de exemplo, consulte Animações storyboarded para estados visuais.
  • Controlar a transição de autores ou desenvolvedores de aplicativos entre esses estados chamando o método GoToState estático de VisualStateManager. Os autores de controle fazem isso sempre que a lógica de controle manipula eventos que indicam uma alteração de estado ou a lógica de controle inicia uma alteração de estado por si só. É mais comum que o código de definição de controle faça isso em vez do código do aplicativo, para que todos os estados visuais possíveis e suas transições e condições de gatilho estejam lá por padrão para o código do aplicativo, e a lógica seja encapsulada pelo controle.

A maioria dos desenvolvedores usará apenas duas das APIs VisualStateManager: VisualStateManager.VisualStateGroups e GoToState, conforme descrito acima. As APIs restantes são todas para suporte à extensão e criação de um VisualStateManager personalizado. Para obter mais informações, consulte a seção "VisualStateManager personalizado" neste tópico.

Quando você edita cópias de estilos como habilitadas pela superfície de design XAML do Microsoft Visual Studio, os estados visuais do modelo padrão são definidos no XAML que você está editando. Certifique-se de não excluir esses estados ou alterar seus nomes, pois a lógica de controle está esperando que esses estados visuais existam no modelo.

Além dos estados visuais, o modelo de estado visual também inclui transições. As transições são ações de animação controladas por um Storyboard que ocorrem entre cada estado visual quando o estado é alterado. A transição pode ser definida de forma diferente para cada combinação de estado inicial e estado final, conforme definido pelo conjunto de estados visuais do controle. As transições são definidas pela propriedade Transitions do VisualStateGroup, em XAML usando a sintaxe do elemento de propriedade. A maioria dos modelos de controle padrão não define transições. Na ausência de transições definidas especificamente, as transições entre estados ocorrem instantaneamente (duração zero). Para obter mais informações, consulte VisualTransition.

VisualStateManager personalizado

Se você quiser implementar sua própria lógica para transições entre estados (um cenário avançado), poderá criar uma classe herdada do VisualStateManager. Siga estas diretrizes:

  • A classe derivada deve substituir o método GoToStateCore protegido. Qualquer instância do VisualStateManager personalizado usa essa lógica Core quando seu método GoToState é chamado.
  • Para referenciar sua classe VisualStateManager personalizada, defina o valor da propriedade anexada VisualStateManager.CustomVisualStateManager no elemento raiz de um ControlTemplate em que você deseja usar o comportamento da classe VisualStateManager personalizada, juntamente com o uso da propriedade anexada VisualStateManager.VisualStateGroups que define os estados visuais para o modelo. Normalmente, você cria uma instância da classe VisualStateManager personalizada por meio da construção XAML padrão em Application.Resources. Em seguida, a propriedade anexada VisualStateManager.CustomVisualStateManager é definida usando uma referência de extensão de marcação {StaticResource} à chave do recurso personalizado VisualStateManager.

Esses são os requisitos básicos para criar e usar um VisualStateManager personalizado. Você também pode optar por substituir mais alguns comportamentos:

Todas as outras API (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) são infraestrutura para suporte à propriedade anexada e você não precisa chamá-las ou fazer nada com elas.

Estados visuais para elementos que não são controles

Os estados visuais às vezes são úteis para cenários em que você deseja alterar o estado de alguma área da interface do usuário que não é imediatamente uma subclasse control . Você não pode fazer isso diretamente porque o parâmetro de controle do método GoToState requer uma subclasse Control , que se refere ao objeto no qual o VisualStateManager atua. Page é uma subclasse control e é bastante raro que você esteja mostrando a interface do usuário em um contexto em que você não tem uma Página ou sua raiz Window.Content não é uma subclasse Control . Recomendamos que você defina um UserControl personalizado para ser a raiz Window.Content ou ser um contêiner para outro conteúdo ao qual você deseja aplicar estados (como um Painel). Em seguida, você pode chamar GoToState em seu UserControl e aplicar estados independentemente de o restante do conteúdo ser um Controle. Por exemplo, você pode aplicar estados visuais à interface do usuário que, de outra forma, consistem em apenas um SwapChainPanel , desde que você tenha colocado isso em seu UserControl e declarado estados nomeados que se aplicam às propriedades do UserControl pai ou da parte nomeada SwapChainPanel do modelo.

Propriedades anexadas XAML

VisualStateManager é a classe de serviço host para várias propriedades anexadas XAML.

Para dar suporte ao acesso do processador XAML às propriedades anexadas e também para expor operações equivalentes get e set ao código, cada propriedade anexada XAML tem um par de métodos de acessador Get e Set. Outra maneira de obter ou definir o valor no código é usar o sistema de propriedades de dependência, chamando GetValue ou SetValue e passando o campo identificador como o identificador de propriedade de dependência.

Propriedade anexadaDescrição
Visualstategroups Obtém a coleção de elementos VisualStateGroup que são definidos por um elemento raiz de uma definição de modelo. Um controle normalmente define isso como parte de seu modelo.

Ao obter essa propriedade no código, use GetVisualStateGroups. Isso retorna um objeto de coleção ao qual você pode adicionar itens. Isso paralelamente ao comportamento de processamento XAML de qualquer elemento filho de um uso de elemento de propriedade VisualStateManager.VisualStateGroups.

Como não há nenhum identificador de propriedade de dependência pública para essa propriedade anexada específica, você não pode usar GetValue para obter esse valor de propriedade anexada, você sempre precisa usar GetVisualStateGroups.

Customvisualstatemanager Obtém ou define o objeto VisualStateManager personalizado que manipula transições entre os estados de um controle.

Construtores

VisualStateManager()

Inicializa uma nova instância da classe VisualStateManager .

Propriedades

CustomVisualStateManagerProperty

Identifica a propriedade de dependência VisualStateManager.CustomVisualStateManager .
Dispatcher

Obtém o CoreDispatcher ao qual esse objeto está associado. O CoreDispatcher representa uma instalação que pode acessar DependencyObject no thread da interface do usuário mesmo que o código seja iniciado por um thread que não seja da interface do usuário.

(Herdado de DependencyObject)

Propriedades Anexadas

CustomVisualStateManager

Obtém ou define o objeto VisualStateManager personalizado que manipula transições entre os estados de um controle.

Métodos

ClearValue(DependencyProperty)

Limpa o valor local de uma propriedade de dependência.

(Herdado de DependencyObject)
GetAnimationBaseValue(DependencyProperty)

Retorna qualquer valor base estabelecido para uma propriedade de dependência, que se aplicaria nos casos em que uma animação não está ativa.

(Herdado de DependencyObject)
GetCustomVisualStateManager(FrameworkElement)

Obtém o valor da propriedade anexada VisualStateManager.CustomVisualStateManager .
GetValue(DependencyProperty)

Retorna o valor efetivo atual de uma propriedade de dependência de um DependencyObject.

(Herdado de DependencyObject)
GetVisualStateGroups(FrameworkElement)

Recupera a coleção de objetos VisualStateGroup associados ao FrameworkElement especificado.
GoToState(Control, String, Boolean)

Faz a transição de um controle entre dois estados, solicitando um novo VisualState por nome.
GoToStateCore(Control, FrameworkElement, String, VisualStateGroup, VisualState, Boolean)

Quando substituído em uma classe derivada, faz a transição de um controle entre estados.
RaiseCurrentStateChanged(VisualStateGroup, VisualState, VisualState, Control)

Quando substituído em uma classe derivada, aciona o evento CurrentStateChanged no VisualStateGroup especificado.
RaiseCurrentStateChanging(VisualStateGroup, VisualState, VisualState, Control)

Quando substituído em uma classe derivada, aciona o evento CurrentStateChanging no VisualStateGroup especificado.
ReadLocalValue(DependencyProperty)

Retorna o valor local de uma propriedade de dependência, se um valor local for definido.

(Herdado de DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Registra uma função de notificação para escutar alterações em uma DependencyProperty específica nesta instância dependencyObject .

(Herdado de DependencyObject)
SetCustomVisualStateManager(FrameworkElement, VisualStateManager)

Define o valor da propriedade anexada VisualStateManager.CustomVisualStateManager .
SetValue(DependencyProperty, Object)

Define o valor local de uma propriedade de dependência em um DependencyObject.

(Herdado de DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Cancela uma notificação de alteração que foi registrada anteriormente chamando RegisterPropertyChangedCallback.

(Herdado de DependencyObject)

Aplica-se a

Confira também