VisualTransition Classe

Definição

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [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 VisualTransition : DependencyObject

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[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 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

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

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 é uma linha do tempo que declara a duração 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 do 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.

Uma VisualTransition 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. De ou Para é um valor necessário para um VisualTransition eficaz, um VisualTransition que não tem nenhum desses valores ou usa valores que não correspondem a estados existentes não faz nada.

A VisualTransition pode fazer referência apenas a um estado De, apenas um estado Para ou um estado Dee 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 De 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 especificar De, use essa transição.
3. Por fim, se existir um VisualTransition que referencie especificamente o estado antigo como De , mas não especificar Para, 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 uma VisualTransition execução, 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 tiver stateName um Storyboard, o storyboard começará.

É VisualTransition possível ter um valor de Storyboard , um valor GeneratedDuration ou ambos. Mas se um VisualTransition não tiver um Storyboard valor nem um GeneratedDuration valor, isso VisualTransition não fará nada em termos de animações, mesmo se os estados nomeados pelos valores De e Para estiverem envolvidos em uma alteração de estado.

Transições implícitas

Você pode definir um VisualTransition 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 e usa uma animação de transição gerada. Essa animação gerada faz transições entre o valor De estado e o valor de estado Para de tal propriedade usando interpolação. A animação de transição implícita dura o tempo indicado por GeneratedDuration.

Transições implícitas se aplicam somente a propriedades que são um valor Duplo, Cor ou Ponto . Em outras palavras, a propriedade deve ser possível animar implicitamente usando 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 seja executada.

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 uma API para exibir transições visuais para aplicativos usando C++ ou C#. 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 geral e a interface do usuário. Por exemplo, há uma RepositionThemeTransition que pode ser aplicada 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.

Confira também

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Modelos de controle
• animações animadas a partir de storyboards