VisualTransition Klasse

Definition

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

Vererbung

Object IInspectable DependencyObject VisualTransition

Attribute

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Beispiele

In diesem Beispiel wird eine VisualTransition erstellt, die angibt, dass der Rahmen des Steuerelements in blau und dann in gelb und dann in 1,5 Sekunden schwarz geändert wird, wenn der Benutzer die Maus vom Steuerelement weg bewegt.

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

Hinweise

Ein VisualTransition ist ein Verhalten, das ein Storyboard initiiert. Dieses Storyboard ist eine Zeitleiste, die die Dauer der Ausführung von Animationen deklariert, die zwischen zwei visuellen Zuständen wechseln. Der Übergang kann für jede Kombination aus Startzustand ( Vom-Zustand ) und Endzustand ( An-Zustand ) unterschiedlich definiert werden, wie durch den Satz visueller Zustände ihres Steuerelements definiert. Übergänge werden durch die Transitions-Eigenschaft von VisualStateGroup definiert und in der Regel in XAML definiert. Die meisten Standardsteuerelementvorlagen definieren keine Übergänge, und in diesem Fall erfolgen die Übergänge zwischen Zuständen sofort. Die Änderungen des alten Zustands an der Vorlage werden entfernt, und die Änderungen des neuen Zustands werden angewendet.

Ein VisualTransition verweist entweder auf einen oder zwei benannte visuelle Zustände. Der From-Wert verweist auf den Namen eines Zustands, der dem aktuellen Zustand entspricht. Der To-Wert verweist auf den Namen eines Zustands, der dem neuen Zustand entspricht, der von einem GoToState-Aufruf angefordert wird. Diese Namen stammen aus einem x:Name-Attributzeichenfolgenwert, der als Teil seiner Definition in derselben VisualStateGroup auf einen VisualState angewendet wird. From oderTo sind ein erforderlicher Wert für eine effektive VisualTransition, eine VisualTransition, die keinen dieser Werte enthält oder Werte verwendet, die nicht mit vorhandenen Zuständen übereinstimmen.

Ein VisualTransition kann nur auf einen Von-Zustand , nur auf einen An-Zustand oder auf einen Von - und einen An-Zustand verweisen. Das Auslassen von Von oder To entspricht einem beliebigen Zustand. VisualStateManager verwendet eine Rangfolgenlogik, für die der Übergang angewendet werden soll, wenn sich die visuellen Zustände ändern:

1. Wenn ein VisualTransition vorhanden ist, der speziell auf den alten Zustand als From und den neuen Zustand als To verweist, verwenden Sie diesen Übergang.
2. Andernfalls verwenden Sie diesen Übergang, wenn ein VisualTransition vorhanden ist, der speziell auf den neuen Zustand als An verweist, aber nicht Von angibt.
3. Wenn ein VisualTransition vorhanden ist, der speziell auf den alten Zustand als From verweist, aber nicht An angibt, verwenden Sie diesen Übergang.

Wenn keine der oben genannten Punkte zutrifft, wird kein Übergang ausgeführt.

Wenn Sie GoToState aufrufen, um den visuellen Zustand eines Steuerelements zu ändern, führt VisualStateManager die folgenden Aktionen aus:

• Wenn der VisualState , den das Steuerelement vor dem neu angeforderten visuellen Zustand verwendet hat, über ein Storyboard verfügt, wird dieses Storyboard beendet.
• Zwischen diesen Aktionen wird das Storyboard für eine VisualTransition ausgeführt, wenn ein Übergang mit den beiden visuellen Zuständen vorhanden ist und der von GoToState angeforderte benannte visuelle Zustand gültig und ein neuer Zustand ist.
• Wenn visualState wie benannt von stateName über ein Storyboard verfügt, beginnt das Storyboard.

Ein VisualTransition kann über einen Storyboardwert , einen GeneratedDuration-Wert oder beides verfügen. Wenn ein VisualTransition jedoch weder einen Storyboard Wert noch einen GeneratedDuration Wert hat, bewirkt dies VisualTransition nichts in Bezug auf Animationen, auch wenn Zustände, die von den Werten From und To benannt werden, an einer Zustandsänderung beteiligt sind.

Implizite Übergänge

Sie können eine VisualTransition -Klasse so definieren, dass sie über eine GeneratedDuration verfügt, aber keine spezifischen Abhängigkeitseigenschaften aufweist, die als Ziel verwendet und animiert werden. Dadurch wird ein impliziter Übergang erstellt. Jede Abhängigkeitseigenschaft, die speziell für animationen im visuellen Zustand "From " oder " To " bestimmt ist und daher unterschiedliche Werte für die Zustandsänderung aufweist, verwendet dann eine generierte Übergangsanimation. Diese generierte Animation übergibt zwischen dem Wert from state und dem To state-Wert einer solchen Eigenschaft mithilfe von Interpolation. Die Animation für den impliziten Übergang dauert für den von GeneratedDuration angegebenen Zeitraum.

Implizite Übergänge gelten nur für Eigenschaften, die ein Double-, Color- oder Point-Wert sind. Anders ausgedrückt: Die -Eigenschaft muss implizit mithilfe von DoubleAnimation, PointAnimation oder ColorAnimation animiert werden können. Wenn Sie eine Übergangsanimation für einen anderen Wert erstellen möchten, z. B. für einen Wert, der ObjectAnimationUsingKeyFrames erfordert, fügen Sie diese Animation in das Storyboard ein, und weisen Sie der Animation eine Dauer zu, die ausgeführt werden soll.

Standardmäßig verwendet eine implizite Übergangsanimation eine lineare Interpolation, um einen Wert über die GeneratedDuration zu animieren. Sie können die lineare Interpolation in ein Interpolationsverhalten Ihrer Wahl ändern, indem Sie GeneratedEasingFunction sowie GeneratedDuration auf einer VisualTransitionfestlegen.

Übergangsanimationen

Es gibt ein weiteres Entwurfsmuster und eine API zum Anzeigen visueller Übergänge für Apps mit C++ oder C#. Dieses Konzept wird als Übergangsanimationen bezeichnet, und die Klasse, die das Verhalten implementiert, ist ein Designübergang oder eine Designanimation. Anstatt Übergänge zwischen visuellen Zuständen desselben Steuerelements zu deklarieren und Änderungen auf Eigenschaften von Steuerelementteilen anzuwenden, wie bei visuellen Zuständen, stellt eine Übergangsanimation Änderungen in der Beziehung zwischen einem vollständigen UI-Element und der gesamten App und Ui dar. Beispielsweise gibt es eine RepositionThemeTransition , die angewendet werden kann, wenn ein UI-Element in den Ui-Koordinatenbereich seines Layoutcontainers verschoben wird. Viele der Übergangsanimationen werden von einer Benutzeraktion initiiert. Eine Übergangsanimation gilt für verschiedene Transition-Eigenschaften von UIElement und bestimmte abgeleitete Klassen, nicht für visualStateGroup. Übergangsanimationen und Designanimationen sind häufig in das Standardverhalten eines Steuerelements integriert.

Konstruktoren

Eigenschaften

Methoden

Gilt für:

Weitere Informationen

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Steuerelementvorlagen
• Storyboardanimationen