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 sich der Rahmen des Steuerelements in Blau und dann in 1,5 Sekunden in Schwarz ändert, 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

A VisualTransition ist ein Verhalten, das ein Storyboard initiiert. Dieses Storyboard ist eine Zeitachse, die die Dauer deklariert, die animationen, die zwischen zwei visuellen Zuständen übertragen werden. Der Übergang kann für jede Kombination des Startzustands (Vom Zustand ) und des Endzustands (der To-Zustand ) wie durch den Satz visueller Zustände des Steuerelements definiert werden, unterschiedlich definiert werden. Ü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 treten die Übergänge zwischen Zuständen sofort auf. Die Änderungen des alten Zustands an der Vorlage werden entfernt, und die Änderungen des neuen Zustands werden angewendet.

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

Eine VisualTransition Kann nur auf einen From-Zustand , nur einen To-Zustand oder einen From - und To-Zustand verweisen. Auslassen von "Von" oder "An " entspricht einem beliebigen Zustand. VisualStateManager verwendet eine Rangfolgelogik, für die der Übergang angewendet werden soll, wenn sich visuelle Zustände ändern:

1. Wenn ein VisualTransition Vorhanden ist, der speziell auf den alten Zustand als "Von" und den neuen Zustand " An" verweist, verwenden Sie diesen Übergang.
2. Andernfalls verwenden Sie diesen Übergang, wenn ein VisualTransition Vorhanden ist, der speziell auf den neuen Zustand als "An ", aber nicht " Von" verweist.
3. Wenn schließlich ein VisualTransition Vorhanden ist, der speziell auf den alten Zustand als "Von " verweist, aber nicht angibt, verwenden Sie diesen Übergang.

Wenn keines 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 Ausführung ausgeführt, wenn ein Übergang mit den beiden visuellen Zuständen vorhanden ist und der von GoToState angeforderte benannte visuelle Zustand gültig ist und ein neuer Zustand ist.
• Wenn visualState wie benannt von stateName einem Storyboard verfügt, beginnt das Storyboard.

A VisualTransition kann einen Storyboardwert , einen GeneratedDuration-Wert oder beides aufweisen. Wenn ein Wert VisualTransition jedoch weder einen Wert noch einen StoryboardGeneratedDuration Wert aufweist, führt dies VisualTransition nichts in Bezug auf Animationen durch, auch wenn die durch die Werte "Von " und "An " benannten Zustände an einer Zustandsänderung beteiligt sind.

Implizite Übergänge

Sie können so definieren, dass sie über eine VisualTransitionGeneratedDuration verfügt, aber keine spezifischen Abhängigkeitseigenschaften aufweist, die anvisiert und animiert werden. Dadurch wird ein impliziter Übergang erstellt. Jede Abhängigkeitseigenschaft, die speziell für Animationen in den Visuellen Zu- oder Von-Zu-Zuständen bestimmt ist und somit unterschiedliche Werte für die Zustandsänderung aufweist, verwendet dann eine generierte Übergangsanimation. Diese generierte Animation wechselt zwischen dem From-Zustandswert und dem To-Zustandswert einer solchen Eigenschaft mithilfe der Interpolation. Die implizite Übergangsanimation dauert für die von GeneratedDuration angegebene Zeit.

Implizite Übergänge gelten nur für Eigenschaften, bei denen es sich um einen Double-, Color - oder Point-Wert handelt. Mit anderen Worten: Die Eigenschaft muss implizit mit einer DoubleAnimation, PointAnimation oder ColorAnimation animiert werden können. Wenn Sie eine Übergangsanimation für einen anderen Wert erstellen möchten, z. B. einen Wert, der ObjectAnimationUsingKeyFrames erfordert, platzieren Sie diese Animation im Storyboard , und weisen Sie der Animation eine Dauer zu, die sie ausführen soll.

Standardmäßig verwendet eine implizite Übergangsanimation die 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 " und GeneratedDuration "On a VisualTransition" festlegen.

Ü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 an Eigenschaften von Steuerelementteilen wie bei visuellen Zuständen anzuwenden, stellt eine Übergangsanimation Änderungen in der Beziehung zwischen einem vollständigen UI-Element und der gesamten App und der Benutzeroberfläche dar. Beispielsweise gibt es eine RepositionThemeTransition , die angewendet werden kann, wenn ein UI-Element im Ui-Koordinatenbereich des Layoutcontainers verschoben wird. Viele der Übergangsanimationen werden von einer Benutzeraktion initiiert. Eine Übergangsanimation gilt für verschiedene Übergangseigenschaften von UIElement und bestimmten abgeleiteten Klassen, nicht für eine VisualStateGroup. Übergangsanimationen und Designanimationen sind häufig in das Standardverhalten eines Steuerelements integriert.

Weitere Informationen

• DependencyObject
• Transitions
• VisualStateGroup
• VisualStateManager
• Steuerelementvorlagen
• Storyboard-gesteuerte Animationen