XamlFlair

Xamlflair

Das Ziel der XAMLFLAIR -Bibliothek ist es, die Implementierung gemeinsamer Animationen zu erleichtern und einem Entwickler einfach eine einzelne oder kombinierte Reihe von Animationen mit nur wenigen Zeilen von XAML hinzuzufügen.

Showcase

Sekuenz -Puzzlespiel

Unterstützt mich

Wenn Sie meine Arbeit mit ein paar Kaffee unterstützen möchten, können Sie es hier schaffen: Kaufen Sie mir einen Kaffee. Ihre Hilfe ermöglicht es mir, weiterhin Zeit für dieses Projekt zu verbringen und sie nach Möglichkeit mit neuen Funktionen zu pflegen und zu aktualisieren. Dank im Voraus!

Inhalt

• Aus Nuget einbauen

• Funktionenübersicht

• Grundkonzepte

• Verwendung

• Basisanimationstypen

• Farbanimationen ( nur WPF und UNO )

• Überschreiben Sie die globalen Standardwerte

• Verwendung eines ResourceDictionary für Basiseinstellungen

• Standardanimationen ( nur WPF )

• TransformOn -Eigenschaft ( nur WPF )

• Perspektive Rotationen ( nur UWP )

• Animationen kombinieren

• Übergeordnete Werte

• Relative Übersetzungen auf X- und Y -Achsen

• Zusammengesetzte Animationen

• Animationen wiederholen

• Ereignisse

• Bindungen

• Primär- und Sekundärfunktionsbefehle

• Verwenden der Eigenschaft StartWith

• Verwenden Sie die Eigenschaft AllowOpacityReset ( nur WPF )

• Verwenden der Eigenschaft ClipToBounds ( nur UWP und nur UNO )

• Animationen debuggen

• Animationen protokollieren

• ListViewBase ( UWP und UNO ) und ListBox -basierte ( WPF ) -Animationen

Aus Nuget einbauen

Plattform	Paket	Nuget
UWP	Xamlflair.uwp
WPF	Xamlflair.wpf
Uno	Xamlflair.uno

Führen Sie den folgenden Befehl in der Paket -Manager -Konsole aus, um XAMLFLAIR zu installieren:

UWP:

 Install-Package XamlFlair.UWP

Ihre App muss mindestens Windows 10 Version 1809 ansprechen (Build 17763)

WPF:

 Install-Package XamlFlair.WPF

UNO:

 Install-Package XamlFlair.Uno

Ihre UWP -App muss mindestens Windows 10 Version 1809 ansprechen (Build 18362)

Funktionenübersicht

Besonderheit	UWP	WPF	UWP (UNO)	iOS (UNO)	Android (UNO)	WASM (UNO) Experimental
Animationssystem	Zusammensetzung	Storyboards	Storyboards	Storyboards	Storyboards	Storyboards
Transformationstyp	N / A	TransformGroup	CompositeTransform	CompositeTransform	CompositeTransform	CompositeTransform
DefaultAnimations.xaml	- -	✔	- -	- -	- -	- -
TransformOn	- -	✔	- -	- -	- -	- -
Zusammengesetzte Animationen	✔	✔	✔	✔	✔	✔
Relative Übersetzungen	✔	✔	✔	✔	✔	✔
Animationen wiederholen	✔	✔	✔	✔	✔	✔
Ereignisse und Bindungen	✔	✔	✔	✔	✔	✔
Befehle primärer/sekundärer Abschluss	✔	✔	✔	✔	✔	✔
StartWith	✔	✔	✔	✔	✔	✔
AllowOpacityReset	- -	✔	- -	- -	- -	- -
ClipToBounds	✔	N / A	✔	✔	✔	✔
Animierte Listen	✔	✔	✔	✔	✔	✔
Unschärfeeffekt	✔	✔	- -	- -	- -	- -
Sättigungseffekt	✔	- -	- -	- -	- -	- -
Tönungseffekt	✔	- -	- -	- -	- -	- -
Farbanimationen	- -	✔	✔	✔	✔	✔
Perspektiven Rotationen (drehend)	✔	- -	- -	- -	- -	- -
Animationen debuggen	✔	✔	✔	✔	✔	- -

Grundkonzepte

Das grundlegende Konzept von XAMLFLAIR basiert auf Animationen, die wie von und zu und zu kategorisiert sind. Jedes UI -Element, das aus einer Animation besteht , beginnt mit einem oder mehreren willkürlichen Werten und vervollständigt den Standardwert der entsprechenden Eigenschaft . Jedes UI -Element, das aus A zu Animation besteht , beginnt in seinem aktuellen Zustand und belebt einen oder mehrere willkürliche Werte .

Beispiel für eine Animation (ein UI -Element, das zum Standardwert einer Übersetzung (0) übersetzt wird):

Beispiel für eine Animation (ein UI -Element, das von seinem aktuellen Zustand wegrutscht):

Hinweis : Es ist wichtig zu beachten, dass es eine Ausnahme von dieser Regel für Farbanimationen gibt, die im Abschnitt Basisanimationstypen erläutert wird.

Verwendung

Zunächst müssen Sie die folgende XAML -Namespace -Referenz haben:

UWP und UNO:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

Von hier aus ist es eine einfache Frage, eine angehängte Eigenschaft auf jedes FrameworkElement zu setzen, das eine Animation benötigt:

< Border xf:Animations.Primary= " {StaticResource FadeIn} " />

Hinweis : Wenn Ihr FrameworkElement eine CompositeTransform in Ihrem XAML definiert, wird sie während des Animationsprozesses geändert.

Hinweis : Die Verwendung von StaticResource besteht darin, auf globale gemeinsame Animationen zu verweisen, die im nächsten Abschnitt erörtert werden.

Basisanimationstypen

Verblassen

Warnung : Seien Sie vorsichtig, wenn Sie FadeTo animieren, da das Element im visuellen Baum bleibt, wenn die Visibility Visible ist. Es kann Fälle geben, in denen Sie IsHitTestVisible manuell verwalten müssen, damit der Benutzer das Element durchschütten .

Übersetzen

Skala

Drehen

Blur ( nur UWP und nur WPF )

Sättigen ( nur UWP )

Tönung ( nur UWP )

Farbe ( nur WPF und UNO )

HINWEIS : Es ist wichtig zu beachten, dass die Farbe eine Farbe mit einer aus Animation animierten Farbe anstelle eines Standardwerts von einem angegebenen Wert in ihren aktuellen Zustand animiert.

Schwenkbar ( nur UWP )

HINWEIS : Weitere Informationen finden Sie im Abschnitt Perspektive -Rotationen ( nur UWP ).

Im Folgenden sind einige bemerkenswerte Standardwerte aufgeführt, wenn sie mit Xamlflair arbeiten:

• Art : Fadeto
• Dauer ( Millisekunden ): 500
• Lockerung : Kubisch
• Lockerungsmodus : Easyout
• TransformCenterpoint : (0,5, 0,5)
• Ereignis : geladen
• InterelementDelay ( Millisekunden ): 25 ( nur Listensteuerungen )
• Transformon : Render ( nur WPF )
• Sättigung : 0,5 ( nur UWP )
• Tönung : transparent ( nur UWP )

Farbanimationen ( nur WPF und UNO )

Farbanimationen erfordern einige Aufmerksamkeit, da sie sich etwas von den anderen Basistypanimationen unterscheiden. Bei Verwendung von ColorTo und ColorFrom muss Folgendes durchgeführt werden:

• Shape.Fill können nur TextBlock.Foreground Control.BorderBrush Border.Background Border.BorderBrush : Control.Background Shape.Stroke Control.Foreground
• Stellen Sie sicher, dass Sie eine Bürste auf der entsprechenden Eigenschaft setzen, die Sie animieren möchten
• Sie müssen auch die Zieleigenschaft mit ColorOn angeben

Das folgende Beispiel animiert die Fill des Rechtecks ​​von Royalblue nach DarkGreen:

< xf : AnimationSettings x : Key = " SampleColorAnimation "
                      Kind = " ColorTo "
                      Color = " DarkGreen "
                      ColorOn = " Fill " />

< Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />

Überschreiben Sie die globalen Standardwerte

Wenn Sie einen der Standardanimationswerte global ändern müssen (z. B. eine Duration von 750 anstelle von 500), können Sie die Funktion OverrideDefaultSettings im Initialisierungscode Ihrer App aufrufen. Das folgende Beispiel ändert die Standardwerte für Duration und Easing :

 XamlFlair . Animations . OverrideDefaultSettings (
    duration : 750 ,
    easing : EasingType . Quadratic ) ;

Daher wird mit dem obigen Beispielcode jede Animation für 750 ms mit einer quadratischen Lockerung ausgeführt.

Verwendung eines ResourceDictionary für Basiseinstellungen

Alle gängigen Animationen sollten in einem globalen ResourceDictionary (Ex: Animations.xaml ) platziert und bei Bedarf in der gesamten App verwendet werden. Ziel ist es, alle Animationen in eine Datei mit aussagekräftigen Namen zu konsolidieren, damit jeder Entwickler genau verstehen kann, welche Animation auf ein FrameworkElement angewendet wird. Hier ist ein kleines Beispiel dafür, wie es aussieht:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >

    < x : Double x : Key = " PositiveOffset " >50</ x : Double >
    < x : Double x : Key = " NegativeOffset " >-50</ x : Double >
    < x : Double x : Key = " SmallScaleFactor " >0.75</ x : Double >
    < x : Double x : Key = " LargeScaleFactor " >1.25</ x : Double >

    < xf : AnimationSettings x : Key = " FadeIn "
                          Kind = " FadeFrom "
                          Opacity = " 0 " />

    < xf : AnimationSettings x : Key = " FadeOut "
                          Kind = " FadeTo "
                          Opacity = " 0 " />

    <!-- Scale to a larger value -->
    < xf : AnimationSettings x : Key = " Expand "
                          Kind = " ScaleXTo,ScaleYTo "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />

    <!-- Scale from a larger value -->
    < xf : AnimationSettings x : Key = " Contract "
                          Kind = " ScaleXFrom,ScaleYFrom "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Führen Sie AnimationSettings folgenden Schritte aus:

1. Klicken Sie mit der rechten Maustaste auf Ihr Projekt und klicken Sie dann auf Hinzufügen> neuer Artikel ...
2. Wählen Sie Ressourcenwörterbuch und nennen Sie es Animations.xaml
3. Fügen Sie in Ihrer App.xaml Folgendes hinzu:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

4. In Animations.xaml kopieren Sie den Inhalt aus den entsprechenden Links unten und fügen Sie sie ein:

• Animationseinstellungen für UWP

• Animationseinstellungen für WPF

• Animationseinstellungen für UNO

Ihre App verfügt jetzt über eine globale Reihe gängiger Animationen.

Standardanimationen ( nur WPF )

Alternativ zum Erstellen eines eigenen ResourceDictionary mit Ihren benutzerdefinierten AnimationSettings bietet XAMLFLAIR einige Standardanimationen .

Führen Sie die folgenden Schritte in Ihrer App.xaml aus, um diese Standardanimationen in Ihrer Anwendung zu verweisen:

1. Definieren Sie den XamlFlair.WPF -Namespace oben:

    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

2. Aktualisieren Sie Ihre Anwendungsressourcen:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Ihre Anwendung verfügt jetzt über eine globale Reihe von Standardanimationen , die verwendet werden können.

Wenn Visual Studio IntelliSense bei Verwendung <xf:XamlFlairResources /> nicht funktioniert, möchten Sie stattdessen die folgenden Aussagen ausprobieren:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

TransformOn -Eigenschaft ( nur WPF )

Mithilfe der TransformOn -Eigenschaft können Sie sich auf die Art von RenderTransform ansprechen, die Sie für Ihre Animation anwenden sollen. Verfügbare Optionen sind Render und Layout . Wenn nichts angegeben ist, wird der Standard -Tal Render . Hier ist ein Beispiel für die beiden:

HINWEIS : Sehr wichtig zu beachten, dass LayoutTransform von WPF keine TranslateTransform unterstützt, weshalb die Übersetzungsanimationen niemals funktionieren. Weitere Informationen zum Abschnitt "Bemerkungen" finden Sie hier.

Perspektive Rotationen ( nur UWP )

Es ist wichtig zu beachten, dass zur Anwendung einer perspektivischen Rotation (auch als Swivel bezeichnet) auf ein Zielelement angewendet wird. Es ist erforderlich, dass sie in einen Container mit den auf das Containerelement angewendeten Layouteigenschaften eingewickelt wird. Betrachten Sie daher die folgende einfache Perspektivenrotation:

< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
                      Kind = " SwivelYFrom "
                      SwivelY = " -45 " />

Anstatt das Element als solches zu animieren:

< Rectangle Fill = " RoyalBlue "
           Width = " 200 "
           Height = " 200 "
           HorizontalAlignment = " Center "
           VerticalAlignment = " Center "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />

Das Element sollte in einen Container platziert werden, damit die Animation korrekt funktioniert:

< Border Width = " 200 "
        Height = " 200 "
        HorizontalAlignment = " Center "
        VerticalAlignment = " Center " >
    < Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >

Animationen kombinieren

Animationen können kombiniert werden, und wie bereits erwähnt, sollte jede dieser kombinierten Animationen, die häufig verwendet werden, im globalen ResourceDictionary (Ex: Animations.xaml ) platziert werden:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >
    .
    .
    .
    < xf : AnimationSettings x : Key = " FadeInAndSlideFromLeft "
                          Kind = " FadeFrom,TranslateXFrom "
                          Opacity = " 0 "
                          OffsetX = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndSlideFromTop "
                          Kind = " FadeFrom,TranslateYFrom "
                          Opacity = " 0 "
                          OffsetY = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrow "
                          Kind = " FadeFrom,ScaleXFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} "
                          ScaleY = " {StaticResource SmallScaleFactor} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrowHorizontally "
                          Kind = " FadeFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Dies zeigt eine kombinierte Animation eines FadeFrom und TranslateFrom :

Dies zeigt eine kombinierte Animation von FadeFrom , TranslateFrom und ScaleFrom :

Übergeordnete Werte

Animationen können ihre Einstellungen direkt auf das FrameworkElement überschreiben lassen. Dies wird üblicherweise durchgeführt, um Werte für Verzögerungen und Dauer zu ändern, sodass wir die Datei Animations.xaml mit wiederholten Ressourcen nicht überlagern. Verwenden Sie die Animate -Markup -Erweiterung, die mit der BasedOn -Eigenschaft gepaart ist, um eine Übersteuerung zu erreichen:

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />

Relative Übersetzungen auf X- und Y -Achsen

Da hartcodierte Werte für OffsetX und OffsetY einschränken OffsetX (z OffsetY

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />

Ein sternbasierter Wert berechnet den Offset basierend auf dem aktuellen Wert der ActualWidth und/oder ActualHeight Werts des FrameworkElement . Daher ist es wichtig, dass das Element sein Loaded Ereignis ausgeführt hat. Wenn ActualWidth und/oder ActualHeight noch nicht berechnet werden, versucht der Offset -Wert, auf Width und/oder Height zu basieren.

Zusammengesetzte Animationen

Eine zusammengesetzte Animation ist einfach eine mehrstufige Animation unter Verwendung der CompoundSettings -Klasse. Jede innere Animation führt nach Abschluss des vorherigen aus. Daher sind sie sequentielle Animationen:

< xf : CompoundSettings x : Key = " Compound " >
    < xf : CompoundSettings .Sequence>
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1.25 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " RotateTo "
                              Rotation = " 360 "
                              Duration = " 1250 " />
    </ xf : CompoundSettings .Sequence>
</ xf : CompoundSettings >

Hinweis : CompoundSettings unterstützen die Event , die in einem späteren Abschnitt erörtert wird.

Animationen wiederholen

Eine Animation kann durch die Verwendung der Eigenschaften IterationBehavior und IterationCount -Eigenschaften (Standardwerte der Count bzw. 1 ) wiederholt werden.

Das Folgende zeigt, wie eine Animation nur 5 Mal ausgeführt wird:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationCount= " 5 " />

Das Folgende zeigt, wie eine Animation auf unbestimmte Zeit ausgeführt wird:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationBehavior= " Forever " />

Beachten Sie auch, dass es auch möglich ist, eine zusammengesetzte Animation zu wiederholen. Beispielsweise unter Verwendung der zusammengesetzten Animation (mit dem Namen Fortschritt ) aus dem vorherigen Abschnitt:

< Border xf:Animations.Primary= " {StaticResource Progress} "
        xf:Animations.IterationCount= " 5 " />

Warnung : Wenn Sie sich wiederholte Animationen verwenden, können Sie keine Secondary Animation auf das Element festlegen.

Es ist wichtig zu beachten, dass alle XAMLFLAIR-Animationen "Kick-off" -Aimationen sind, mit anderen Worten, sie beginnen und halten nur an, wenn sie abgeschlossen sind (oder wenn das zugehörige Element entlädt), mit Ausnahme der Wiederholung von Animationen. Eine sich wiederholende Animation kann gestoppt werden, wenn die PrimaryBinding Bindungseigenschaft einen false Wert liefert (Bindungen werden im nächsten Abschnitt behandelt):

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Wenn ein false auf die Bindung eingestellt ist, wird die aktuelle Iteration der Animation ausgeführt, bis sie fertig ist, und dann hört die sich wiederholende Animation auf.

Ereignisse

Standardmäßig werden alle Animationen ausgeführt, wenn das animierte Element sein Loaded Ereignis abfängt. Dieses Verhalten kann durch Einstellen der Event überschrieben werden. Event kann jedes Ereignis sein, das aus dem animierten Element ausgesetzt ist. Um beispielsweise eine Animation auf einer Schaltfläche auszuführen, wenn sie geklickt wird, kann das Click verwendet werden:

< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />

Einige Beispiele für gemeinsame Ereignisse, die verwendet werden können:

• Geladen ( Standardwert )
• Sichtbarkeit ( Auslöser nur, wenn Sichtbarkeit == sichtbar )
• DatacontextChanged ( Auslöser, wenn der Wert nicht null ist )
• Zeiger
• Pointerexit
• Gotfokus
• Lostfocus

Es gibt einige besondere Fälle, die Sie zur Kenntnis nehmen müssen. Der erste Sonderfall ist das DataContextChanged -Ereignis. Wenn das DataContextChanged -Ereignis verwendet wird, wird es abfeuern, wenn sich der DataContext -Wert ändert, mit Ausnahme von Fällen, in denen ein null festgelegt wird, wird null herausgefiltert und würde keine Animation auslösen.

Ein weiterer Sonderfall ist Visibility . Obwohl kein Event VisibilityChanged in einem FrameworkElement vorhanden ist, wurde die Visibility wie ein Ereignis behandelt, wenn sich der Wert ändert, da es nützlich sein kann, ein Element zu beleben, wenn es auf der Benutzeroberfläche sichtbar wird. Wenn eine Animation mit Event=Visibility ausgelöst wird, wird sie nur dann ausgelöst, wenn ein Wert von Visibile festgelegt wird.

Bindungen

Einer der wichtigsten Werte für Event ist None , was ein Wert ist, der zum Abbrechen eines ereignisbasierten Animationsauslösers verwendet wird. Wenn Sie None angeben, müssen Sie Ihre Animationen manuell mithilfe der PrimaryBinding oder SecondaryBinding auslösen. Diese Eigenschaften sind vom Typ bool vom Typ und erwarten einen Wert von True , um die entsprechende Animation auszuführen. Das Folgende ist ein Beispiel für die Auslösen einer Animation, die auf dem IsChecked der Checkbox -Steuerung basiert:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Die obige Animation wird nur ausgeführt, wenn der IsChecked True ist. Wenn None für Event angegeben wäre, würde die Animation auf Loaded und der Bindung ausgeführt.

Wenn Sie sowohl mit PrimaryBinding als auch mit SecondaryBinding zusammenarbeiten (basierend auf demselben booleschen Wert), kann es sauberer und einfacher sein, CombinedBinding zu verwenden. CombinedBinding fungiert einfach sowohl als PrimaryBinding als auch SecondaryBinding zusammen. Anstelle der folgenden:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.SecondaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox, Converter={StaticResource InverseBoolConverter}} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Sie würden es als solche verwenden:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.CombinedBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Durch die Verwendung von CombinedBinding auf diese Weise spart es, wenn man einen Konverter für den inversen booleschen Wert verwenden muss, der intern behandelt wird.

Primär- und Sekundärfunktionsbefehle

Es kann Szenarien geben, in denen Sie nach Abschluss einer Animation möglicherweise einen ICommand ausführen möchten. In einem solchen Fall existieren zwei Eigenschaften: PrimaryCompletionCommand und SecondaryCompletionCommand .

Im folgenden Beispiel wird der Befehl namens MyCustomCommand ausgeführt, sobald die primäre Animation abgeschlossen ist:

< TextBlock Text = " Example of a completion command "
           xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
           xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />

Verwenden der Eigenschaft StartWith

Es wird Fälle geben, in denen Sie Ihr UI -Element benötigen, um in einem bestimmten Zustand zu beginnen. Zum Beispiel muss das Element geschrumpft werden, bevor seine Animation ausgeführt wird. Dies wird mit der Eigenschaft StartWith erreicht:

< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
           xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />

Im obigen Beispiel, da das Element von unten skaliert, müssen wir jedoch mit einer Verzögerung in der skalierten Position beginnen , damit wir die StartWith -Eigenschaft verwenden, um seinen Anfangszustand festzulegen. StartWith im Wesentlichen ist es, die anfänglichen Werte im Element so zu ermitteln, sobald es geladen wurde.

Verwenden Sie die Eigenschaft AllowOpacityReset ( nur WPF )

Die .NET -Dokumentation gibt Folgendes an:

In einigen Fällen scheint es, dass Sie den Wert einer Eigenschaft nach ihrer Animation nicht ändern können. ... Sie müssen die Animation daran hindern, das Eigentum zu beeinflussen.

Es kann Fälle geben, in denen Sie die Deckkraft animieren, in der die Opazitätsanimation sie plötzlich zurücksetzt, anstatt sich zu animieren, oder sich nicht so verhalten, wie Sie es beabsichtigen. In Fällen müssen Sie möglicherweise AllowOpacityReset = False festlegen ( der Standardwert von AllowOpacityReset ist True ), um das beabsichtigte Verhalten zu erreichen:

< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
       xf:Animations.AllowOpacityReset= " False "
       Source = " /Assets/... " />

Verwenden der Eigenschaft ClipToBounds ( nur UWP und nur UNO )

ClipToBounds ist eine hilfreiche Eigenschaft, die in WPF vorhanden ist. Daher wurde es in Xamlflair aufgrund seiner Benutzerfreundlichkeit und Handlichkeit hinzugefügt. Um den untergeordneten Inhalt an die Grenzen des enthaltenden Elements zu bestimmen, stellen Sie einfach ClipToBounds auf das enthaltende Element auf True :

< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >

Animationen debuggen

Um eine Animation zu debuggen und in den Code einzusteigen, verwenden Sie die EnableDebugging -Eigenschaft. Debugging ist aufgrund der Aufnahme der Sourcelink -Bibliothek möglich. Bitte machen Sie Folgendes Folgendes:

< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Die folgenden Tabellen erläutern die Aufzählungswerte:

Umlaufwert	Beschreibung
None	Standardwert. Es wird kein Debuggen auftreten.
InitializeElement	Bricht den Debugger in der InitializeElement -Funktion von Xamlflair.
RunAnimation	Bricht den Debugger in der RunAnimation von Xamlflair.

Animationen protokollieren

Die XAMLFLAIR -Bibliothek ist ihre Protokollierung mit Microsoft.Extensions.Logging.Abstractions abstrahiert. Im Folgenden finden Sie ein Protokollierungsbeispiel mit Serilog in einer UWP -App:

 public App ( )
{
    this . InitializeComponent ( ) ;
    .
    .
    .
    // Setup the Serilog logger
    Log . Logger = new LoggerConfiguration ( )
        . MinimumLevel . Debug ( )
        . WriteTo . Debug ( )
        . CreateLogger ( ) ;

    // Initalie the XamlFlair loggers using the LoggerFactory (with Serilog support)
	XamlFlair . Animations . InitializeLoggers ( new LoggerFactory ( ) . AddSerilog ( ) ) ;
}

Um die Werte einer oder mehrerer Animationen auszugeben, setzen Sie einfach Debug auf die EnableLogging -Eigenschaft auf dem FrameworkElement :

< Rectangle xf:Animations.EnableLogging= " Debug "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Wenn Sie dies tun, erhalten Sie den folgenden ähnlichen Konsolenausgang (unterscheidet sich geringfügig für WPF):

 Element = Windows.UI.Xaml.Controls.Button
Kind = FadeFrom, TranslateFrom
TargetProperty = Translation
Duration = 500
Delay = 0
Opacity = 0
OffsetX = 0
OffsetY = 50
OffsetZ = 0
ScaleX = 1
ScaleY = 1
ScaleZ = 1
Rotation = 0
Blur = 0
TransformCenterPoint = 0.5,0.5
Easing = Cubic
EasingMode = EaseOut

Wenn jedes Storyboard ausgeführt wird, wird es in einer internen Liste aufbewahrt, bis es abgeschlossen ist (oder gestoppt wird). Um diese interne Liste auszugeben, fügen Sie vorübergehend den folgenden App -Start -Code hinzu:

 Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;

Wenn Sie dies tun, erhalten Sie die folgende ähnliche Konsolenausgabe:

 ---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:43222

Element = Button,  Key = d69f826a-1978-4a4e-b516-4a6b0469238b,  ElementGuid = 195d8c13-1dd7-4fef-a7f3-fc78bdab1cd7
    State = Running,  IsSequence = False,  IsIterating = False,  IterationBehavior = Count,  IterationCount = 0
------------------------------------

---------- ACTIVE TIMELINE --------
Guid d69f826a-1978-4a4e-b516-4a6b0469238b - Updated state to: Completed at 12:42:26:88616
------------------------------------

---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:89614

NO ACTIVE TIMELINES!
------------------------------------

Derzeit ist die oben erwähnte Protokollierung in Xamlflair unter LogLevel.Debug protokolliert

ListViewBase ( UWP und UNO ) und ListBox -basierte ( WPF ) -Animationen

Um Elementanimationen in Listelemente ordnungsgemäß zu implementieren, reichte es nicht aus, einfach beigefügte Eigenschaften für die Steuerelemente ListViewBase (UWP) und Listbox (WPF) zu erstellen. Stattdessen wurden ererbte Steuerelemente erstellt: AnimatedListView und AnimatedGridView für UWP sowie AnimatedListView und AnimatedListBox für WPF, die alle aus dem Namespace XamlFlair.Controls verfügbar sind:

UWP- und UNO -Namespace:

xmlns:xfc="using:XamlFlair.Controls"

WPF -Namespace:

xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"

Die Animation von Elementen in Listen unterscheidet sich geringfügig von der Animation eines typischen UI -Elements. Der Hauptgrund für diesen Unterschied ist, dass der Event auf den entsprechenden AnimationSettings nicht gegenüber seinem Standardwert geändert werden kann. Daher ist das Folgende ungültig :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />

Listen Sie standardmäßige Animationen an, die auf der Grundlage des Loaded Ereignisses jedes sichtbaren Elements und basierend auf einer Aktualisierung der ItemsSource -Eigenschaft der Listensteuerung animieren. Um diese Standardverhalten zu deaktivieren, können die folgenden zwei Eigenschaften unabhängig verwendet werden:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      ... />

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnItemsSourceChange= " False "
                      ... />

Standardmäßig haben Elementanimationen eine Verzögerung von 25 Millisekunden zwischen jedem Element. Dieser Wert kann unter Verwendung der InterElementDelay -Eigenschaft geändert werden:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.InterElementDelay= " 50 "
                      ... />

Genau wie bei PrimaryBinding und SecondaryBinding können Elementanimationen durch eine Bindung unter Verwendung der ItemsBinding -Eigenschaft ausgelöst werden:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />

Warnung ( nur UWP ) : Beachten Sie, dass sie gelöscht werden, wenn Sie auf der AnimatedListView oder ItemContainerTransitions auf der AnimatedListView oder AnimatedGridView festgelegt sind. Dies geschieht, um widersprüchliche Elementanimationen zu vermeiden.

Hinweis ( nur UNO ) : Um Flicker bei Elementanimationen zu vermeiden, gibt es derzeit eine Einschränkung: Items Animation muss eine FadeFrom enthalten.