VisualTransition Classe

Definizione

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

Ereditarietà

Object IInspectable DependencyObject VisualTransition

Attributi

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Esempio

In questo esempio viene creato un oggetto VisualTransition che specifica che quando l'utente allontana il mouse dal controllo, il bordo del controllo passa al blu, quindi al giallo, quindi al nero in 1,5 secondi.

<!--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>

Commenti

Un VisualTransition è un comportamento che avvia uno Storyboard. Questo storyboard è una sequenza temporale che dichiara la durata di esecuzione delle animazioni che passano tra due stati di visualizzazione. La transizione può essere definita in modo diverso per ogni combinazione di stato iniziale (stato From ) e stato finale (stato A ) come definito dal set di stati di visualizzazione del controllo. Le transizioni sono definite dalla proprietà Transitions di VisualStateGroup e sono in genere definite in XAML. La maggior parte dei modelli di controllo predefiniti non definisce le transizioni e in questo caso le transizioni tra gli stati vengono eseguite immediatamente. Le modifiche dello stato precedente al modello vengono rimosse e vengono applicate le modifiche del nuovo stato.

Un VisualTransition oggetto fa riferimento a uno o due stati di visualizzazione denominati. Il valore From fa riferimento al nome di uno stato che corrisponde allo stato corrente. Il valore To fa riferimento al nome di uno stato che rappresenta il nuovo stato richiesto da una chiamata GoToState . Questi nomi provengono da un valore stringa dell'attributo x:Name applicato a un oggetto VisualState come parte della relativa definizione nello stesso Oggetto VisualStateGroup. From o To sono un valore obbligatorio per un oggetto VisualTransition efficace, un oggetto VisualTransition che non dispone di uno di questi valori o usa valori che non corrispondono agli stati esistenti non esegue alcuna operazione.

Un VisualTransition oggetto può fare riferimento solo a uno stato From , solo uno stato A o uno stato From e To . Omettendo From o To equivale a qualsiasi stato. VisualStateManager usa una logica di precedenza per la quale la transizione da applicare ogni volta che cambiano gli stati di visualizzazione:

1. Se esiste un VisualTransition oggetto che fa riferimento in modo specifico allo stato precedente come From e al nuovo stato come A, usare tale transizione.
2. In caso contrario, se esiste un VisualTransition oggetto che fa riferimento in modo specifico al nuovo stato come A , ma non specifica From, utilizzare tale transizione.
3. Infine, se esiste un VisualTransition oggetto che fa riferimento in modo specifico allo stato precedente come From ma non specifica To, usare tale transizione.

Se nessuna delle versioni precedenti è applicabile, non viene eseguita alcuna transizione.

Quando si chiama GoToState per modificare lo stato di visualizzazione di un controllo, VisualStateManager esegue queste azioni:

• Se l'oggetto VisualState usato dal controllo prima dello stato di visualizzazione appena richiesto ha uno Storyboard, lo storyboard si arresta.
• Tra queste azioni, lo storyboard per un'esecuzione VisualTransition , se esiste una transizione che coinvolge i due stati di visualizzazione e lo stato di visualizzazione denominato richiesto da GoToState è valido ed è un nuovo stato.
• Se VisualState come denominato da stateName ha uno Storyboard, inizia lo storyboard.

Un VisualTransition oggetto può avere un valore storyboard , un valore GeneratedDuration o entrambi. Tuttavia, se un VisualTransition oggetto non ha né un Storyboard valore né un GeneratedDuration valore, che VisualTransition non esegue alcuna operazione in termini di animazioni, anche se gli stati denominati dai valori From e To sono coinvolti in una modifica dello stato.

Transizioni implicite

È possibile definire un VisualTransition oggetto in modo che abbia generatedDuration, ma non abbia proprietà di dipendenza specifiche di destinazione e animate. In questo modo viene creata una transizione implicita. Qualsiasi proprietà di dipendenza specificamente destinata all'animazione negli stati di visualizzazione From o To e presenta quindi valori diversi nella modifica dello stato, quindi usa un'animazione di transizione generata. Questa animazione generata passa tra il valore dello stato Frome il valore to di tale proprietà usando l'interpolazione. L'animazione di transizione implicita dura per l'ora indicata da GeneratedDuration.

Le transizioni implicite si applicano solo alle proprietà che sono un valore Double, Color o Point . In altre parole, la proprietà deve essere possibile animare in modo implicito usando un oggetto DoubleAnimation, PointAnimation o ColorAnimation. Se vuoi creare un'animazione di transizione su un altro valore, ad esempio un valore che richiede ObjectAnimationUsingKeyFrames, inserisci l'animazione nello Storyboard e assegna all'animazione un valore Duration che vuoi eseguire.

Per impostazione predefinita, un'animazione di transizione implicita usa l'interpolazione lineare per animare un valore tramite GeneratedDuration. È possibile modificare l'interpolazione lineare in un comportamento di interpolazione a scelta impostando GeneratedEasingFunction e GeneratedDuration su un oggetto VisualTransition.

Animazioni di transizione

È disponibile un altro modello di progettazione e un'API per la visualizzazione delle transizioni visive per le app che usano C++ o C#. Questo concetto è denominato animazioni di transizione e la classe che implementa il comportamento è una transizione del tema o un'animazione del tema. Invece di dichiarare transizioni tra stati di visualizzazione dello stesso controllo e applicare modifiche alle proprietà delle parti di controllo come si fa con gli stati di visualizzazione, un'animazione di transizione rappresenta le modifiche nella relazione tra un elemento dell'interfaccia utente completo e l'app e l'interfaccia utente complessiva. Ad esempio, è presente un oggetto RepositionThemeTransition che può essere applicato ogni volta che un elemento dell'interfaccia utente viene spostato nello spazio delle coordinate dell'interfaccia utente del contenitore di layout. Molte delle animazioni di transizione vengono avviate da un'azione dell'utente. Un'animazione di transizione si applica a varie proprietà di transizione di UIElement e classi derivate specifiche, non a un Oggetto VisualStateGroup. Le animazioni di transizione e le animazioni del tema sono spesso incorporate nel comportamento predefinito di un controllo.

Costruttori

Proprietà

Metodi

Si applica a

Vedi anche

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Modelli di controllo
• Animazioni con storyboard