VisualStateManager Classe

Definição

/// [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

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:

• Substitua RaiseCurrentStateChanged para controlar quando o evento CurrentStateChanged é acionado por um VisualStateGroup que está sendo gerenciado pelo VisualStateManager.
• Substitua RaiseCurrentStateChanging para controlar quando o evento CurrentStateChanging é acionado por um VisualStateGroup que está sendo gerenciado pelo VisualStateManager.
• Substitua ou sobrecarregue o construtor se sua classe personalizada precisar de informações adicionais para inicializar.

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.

Construtores

Propriedades

Propriedades Anexadas

Métodos

Aplica-se a

Confira também

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• Início rápido: modelos de controle
• Animações com storyboard
• Animações de storyboard para estados visuais
• Visão geral das propriedades anexadas
• Exemplo de estilo de aplicativo e controle XAML