VisualTransition Classe

Definição

Namespace:

Windows.UI.Xaml

Representa o comportamento visual que ocorre quando o controle faz a transição de um estado visual para outro.

/// [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 VisualTransition : 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")]
public class VisualTransition : DependencyObject

Public Class VisualTransition
Inherits DependencyObject

<VisualStateGroup>
  <!--one or more Visual State elements in the implicit States collection property -->
  <VisualStateGroup.Transitions>
    <VisualTransition>
      singleStoryboard
    </VisualTransition>
    <!--more transitions as above-->
  </VisualStateGroup.Transitions>
</VisualStateGroup>

Herança

Object IInspectable DependencyObject VisualTransition

Atributos

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

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 cria um VisualTransition que especifica que, quando o usuário move o mouse para longe do controle, a borda do controle muda para azul e, em seguida, para amarelo e, em seguida, para preto em 1,5 segundos.

<!--Take one and a half seconds to transition from the
    PointerOver state to the Normal state. 
    Have the SolidColorBrush, BorderBrush, fade to blue, 
    then to yellow, and then to black in that time.-->
<VisualTransition From="PointerOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
  <Storyboard>
    <ColorAnimationUsingKeyFrames
      Storyboard.TargetProperty="Color"
      Storyboard.TargetName="BorderBrush"
      FillBehavior="HoldEnd" >

      <ColorAnimationUsingKeyFrames.KeyFrames>

        <LinearColorKeyFrame Value="Blue" 
                             KeyTime="0:0:0.5" />
        <LinearColorKeyFrame Value="Yellow" 
                             KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="Black" 
                             KeyTime="0:0:1.5" />

      </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>

<VisualStateGroup x:Name="CommonStates">

  <!--Define the VisualTransitions that can be used when the control
      transitions between VisualStates that are defined in the
      VisualStatGroup.-->
  <VisualStateGroup.Transitions>

    <!--Take one hundredth of a second to transition to the
        Pressed state.-->
    <VisualTransition To="Pressed" 
                          GeneratedDuration="0:0:0.01" />
    
    <!--Take one half second to transition to the PointerOver state.-->
    <VisualTransition To="PointerOver" 
                          GeneratedDuration="0:0:0.5" />

    <!--Take one hundredth of a second to transition from the
        Pressed state to the PointerOver state.-->
    <VisualTransition From="Pressed" To="PointerOver" 
                          GeneratedDuration="0:0:0.01" />

    <!--Take one and a half seconds to transition from the
        PointerOver state to the Normal state. 
        Have the SolidColorBrush, BorderBrush, fade to blue, 
        then to yellow, and then to black in that time.-->
    <VisualTransition From="PointerOver" To="Normal" 
                          GeneratedDuration="0:0:1.5">
      <Storyboard>
        <ColorAnimationUsingKeyFrames
          Storyboard.TargetProperty="Color"
          Storyboard.TargetName="BorderBrush"
          FillBehavior="HoldEnd" >

          <ColorAnimationUsingKeyFrames.KeyFrames>

            <LinearColorKeyFrame Value="Blue" 
                               KeyTime="0:0:0.5" />
            <LinearColorKeyFrame Value="Yellow" 
                               KeyTime="0:0:1" />
            <LinearColorKeyFrame Value="Black" 
                               KeyTime="0:0:1.5" />

          </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </VisualTransition>
  </VisualStateGroup.Transitions>

  <!--The remainder of the VisualStateGroup is the
      same as the previous example.-->

  <VisualState x:Name="Normal" />

  <VisualState x:Name="PointerOver">
    <Storyboard>
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Red" />

    </Storyboard>
  </VisualState>

  <VisualState x:Name="Pressed">
    <Storyboard >
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Transparent"/>
    </Storyboard>
  </VisualState>

  <!--The Disabled state is omitted for brevity.-->

</VisualStateGroup>

Comentários

Um VisualTransition é um comportamento que inicia um Storyboard. Este Storyboard é um linha do tempo que declara a duração em que as animações que fazem a transição entre dois estados visuais serão executadas. A transição pode ser definida de forma diferente para cada combinação de estado inicial (o estado De ) e o estado final (o estado Para ), conforme definido pelo conjunto de estados visuais do controle. As transições são definidas pela propriedade Transitions de VisualStateGroup e geralmente são definidas em XAML. A maioria dos modelos de controle padrão não define transições e, nesse caso, as transições entre estados ocorrem instantaneamente. As modificações do estado antigo no modelo são removidas e as modificações do novo estado são aplicadas.

Um VisualTransition faz referência a um ou dois estados visuais nomeados. O valor De faz referência ao nome de um estado que é o estado atual. O valor To faz referência ao nome de um estado que é o novo estado solicitado por uma chamada GoToState . Esses nomes vêm de um valor de cadeia de caracteres de atributo x:Name que é aplicado a um VisualState como parte de sua definição no mesmo VisualStateGroup. From ou To são um valor necessário para um VisualTransition eficaz, um VisualTransition que não tem nenhum desses valores ou usa valores que não correspondem aos estados existentes não faz nada.

Um VisualTransition pode referenciar apenas um estado De , apenas um estado Para ou um estado De e Para . Omitir De ou Para equivale a qualquer estado. O VisualStateManager usa uma lógica de precedência para a qual a transição será aplicada sempre que os estados visuais forem alterados:

1. Se existir um VisualTransition que referencie especificamente o estado antigo como From e o novo estado como To, use essa transição.
2. Caso contrário, se existir um VisualTransition que referencie especificamente o novo estado como To , mas não especifique From, use essa transição.
3. Por fim, se existir um VisualTransition que referencie especificamente o estado antigo como De , mas não especifique To, use essa transição. Se nenhuma das opções acima se aplicar, nenhuma transição será executada.

Quando você chama GoToState para alterar o estado visual de um controle, o VisualStateManager executa estas ações:

• Se o VisualState que o controle estava usando antes do estado visual recém-solicitado tiver um Storyboard, esse storyboard será interrompido.
• Entre essas ações, o Storyboard para um VisualTransition será executado, se houver uma transição que envolva os dois estados visuais e o estado visual nomeado solicitado por GoToState for válido e for um novo estado.
• Se o VisualState como nomeado por stateName tiver um Storyboard, o storyboard começará.

Um VisualTransition pode ter um valor storyboard , um valor GeneratedDuration ou ambos. Mas se um VisualTransition não tiver um valor storyboard nem um valor GeneratedDuration , esse VisualTransition não fará nada em termos de animações, mesmo que os estados nomeados pelos valores From e To estejam envolvidos em uma alteração de estado.

Transições implícitas

Você pode definir um VisualTransition de modo que ele tenha uma GeneratedDuration, mas não tenha nenhuma propriedade de dependência específica sendo direcionada e animada. Isso cria uma transição implícita. Qualquer propriedade de dependência especificamente direcionada para animação nos estados visuais De ou Para e, portanto, tem valores diferentes em toda a alteração de estado, em seguida, usa uma animação de transição gerada. Essa animação gerada faz a transição entre o valor do estado De e o valor de estado Para dessa propriedade usando interpolação. A animação de transição implícita dura o tempo declarado por GeneratedDuration.

Transições implícitas se aplicam apenas a propriedades que são um valor Double, Color ou Point . Em outras palavras, a propriedade deve ser possível animar implicitamente usando um DoubleAnimation, PointAnimation ou ColorAnimation. Se você quiser criar uma animação de transição em algum outro valor, por exemplo, um valor que exija ObjectAnimationUsingKeyFrames, coloque essa animação no Storyboard e dê à animação uma Duração que você deseja que ela execute.

Por padrão, uma animação de transição implícita usa interpolação linear para animar um valor por meio de GeneratedDuration. Você pode alterar a interpolação linear para um comportamento de interpolação de sua escolha definindo GeneratedEasingFunction , bem como GeneratedDuration em um VisualTransition.

Animações de transição

Há outro padrão de design e API para exibir transições visuais para um aplicativo UWP usando C++, C# ou Visual Basic. Esse conceito é chamado de animações de transição e a classe que implementa o comportamento é uma transição de tema ou uma animação de tema. Em vez de declarar transições entre estados visuais do mesmo controle e aplicar alterações às propriedades de partes de controle como você faz com estados visuais, uma animação de transição representa alterações na relação entre um elemento de interface do usuário completo e o aplicativo e a interface do usuário gerais. Por exemplo, há um RepositionThemeTransition que pode ser aplicado sempre que um elemento de interface do usuário é movido no espaço de coordenadas da interface do usuário de seu contêiner de layout. Muitas das animações de transição são iniciadas por uma ação do usuário. Uma animação de transição se aplica a várias propriedades de Transição de UIElement e classes derivadas específicas, não a um VisualStateGroup. Animações de transição e animações de tema geralmente são internas para o comportamento padrão de um controle. Para obter mais informações, consulte Animações de storyboard para estados visuais.

Observações para versões anteriores

Windows 8.x

Por Windows 8, as transições de tema XAML e vários outros comportamentos animados automáticos na biblioteca de animação não respeitaram uma configuração específica de Facilidade de Acesso do Microsoft Windows que permite aos usuários desativar "animações desnecessárias".

Começando com Windows 8.1, transições de tema, animações de tema e transições visuais respeitam a configuração Desativar todas as animações desnecessárias (quando possível) na Facilidade de Acesso. As animações não serão executadas e o estado do controle será alterado ou as alterações visuais serão instantâneas.

Se você migrar o código do aplicativo de Windows 8 para Windows 8.1, talvez queira testar seus comportamentos de animação com Desativar todas as animações desnecessárias (quando possível) habilitadas. Como algumas dessas animações são controladas por storyboards e, como às vezes você encadeia animações personalizadas para iniciar após a conclusão de transições visuais ou animações de tema, a configuração Desativar todas as animações desnecessárias (quando possível) pode afetar os intervalos de suas animações. Além disso, se você implementou algo como um VisualTransition em um estado visual em vez de como uma animação com storyboard, convém alterná-lo para ser uma verdadeira animação personalizada, para que a configuração Desativar todas as animações desnecessárias (quando possível) não a desabilite .

Os aplicativos que foram compilados para Windows 8 mas em execução no Windows 8.1 continuam a usar o comportamento Windows 8 para animações de tema e transições visuais. No entanto, as transições de tema são desabilitadas pela configuração em Windows 8.1, mesmo que um aplicativo não seja recompilado.

Construtores

VisualTransition()

Inicializa uma nova instância da classe VisualTransition .

Propriedades

Dispatcher	Obtém o CoreDispatcher ao qual esse objeto está associado. O CoreDispatcher representa uma instalação que pode acessar o 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)
From	Obtém ou define o nome do VisualState do qual fazer a transição.
GeneratedDuration	Obtém ou define o tempo necessário para mover de um estado para outro e o tempo que qualquer animação de transição implícita deve ser executada como parte do comportamento de transição.
GeneratedEasingFunction	Obtém ou define a função de easing aplicada às animações geradas.
Storyboard	Obtém ou define o Storyboard que é executado quando a transição ocorre.
To	Obtém ou define o nome do VisualState para o qual fazer a transição.

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)
GetValue(DependencyProperty)	Retorna o valor efetivo atual de uma propriedade de dependência de um DependencyObject. (Herdado de DependencyObject)
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 nessa instância dependencyObject . (Herdado de DependencyObject)
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)

Confira também

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Início rápido: modelos de controle
• Animações com storyboard
• Início rápido: modelos de controle
• Animações com storyboard
• Animações de storyboard para estados visuais