XamlFlair
1.0.0
L'objectif de la bibliothèque XAMLFLAIR est de soulager la mise en œuvre d'animations communes et de permettre à un développeur d'ajouter facilement un ensemble unique ou combiné d'animations avec seulement quelques lignes de XAML.
| Jeu de puzzle de Sekuence |
|---|
 |
Si vous souhaitez soutenir mon travail avec quelques cafés, vous pouvez le faire ici: achetez-moi un café. Votre aide me permet de continuer à passer du temps sur ce projet et de continuer à le maintenir et à le mettre à jour avec de nouvelles fonctionnalités lorsque cela est possible. Merci d'avance!
Installer depuis Nuget
Présentation des fonctionnalités
Concepts de base
Usage
Types d'animation de base
Animations de couleur ( WPF et UNO uniquement )
Remplir les valeurs par défaut globales
Utilisation d'un ResourceDictionary pour les paramètres de base
Animations par défaut ( WPF uniquement )
Propriété TransformOn ( WPF uniquement )
Rotations de perspective ( UWP uniquement )
Combiner les animations
Valeurs primordiales
Traductions relatives sur les axes x et y
Animations composées
Répéter les animations
Événements
Reliures
Commandes d'achèvement primaire et secondaire
En utilisant la propriété StartWith
Utilisation de la propriété AllowOpacityReset ( WPF uniquement )
Utilisation de la propriété ClipToBounds ( UWP et UNO uniquement )
Animations de débogage
Animations de journalisation
Animations basées sur ListViewBase ( UWP et UNO ) et ListBox ( WPF )
| Plate-forme | Emballer | Nuget |
|---|---|---|
| UWP | Xamlflair.uwp | |
| WPF | Xamlflair.wpf | |
| Uno | Xamlflair.uno |
Pour installer xamlflair , exécutez la commande suivante dans la console du gestionnaire de packages :
UWP:
Install-Package XamlFlair.UWP
Votre application doit cibler un minimum de Windows 10 version 1809 (Build 17763)
WPF:
Install-Package XamlFlair.WPF
Uno:
Install-Package XamlFlair.Uno
Votre application UWP doit cibler un minimum de Windows 10 version 1809 (build 18362)
| Fonctionnalité | UWP | WPF | UWP (uno) | iOS (uno) | Android (uno) | WASM (UNO) expérimental |
|---|---|---|---|---|---|---|
| Système d'animation | Composition | Storyboards | Storyboards | Storyboards | Storyboards | Storyboards |
| Type de transformation | N / A | Groupe de transformation | CompositeTransform | CompositeTransform | CompositeTransform | CompositeTransform |
| Defaultanimations.xaml | - | ✔ | - | - | - | - |
TransformOn | - | ✔ | - | - | - | - |
| Animations composées | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Traductions relatives | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Répéter les animations | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Événements et reliures | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Commandes d'achèvement primaire / secondaire | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
StartWith | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
AllowOpacityReset | - | ✔ | - | - | - | - |
ClipToBounds | ✔ | N / A | ✔ | ✔ | ✔ | ✔ |
| Listes animées | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Effet flou | ✔ | ✔ | - | - | - | - |
| Effet de saturation | ✔ | - | - | - | - | - |
| Effet de teinte | ✔ | - | - | - | - | - |
| Animations de couleur | - | ✔ | ✔ | ✔ | ✔ | ✔ |
| Rotations de perspective (pivot) | ✔ | - | - | - | - | - |
| Animations de débogage | ✔ | ✔ | ✔ | ✔ | ✔ | - |
Le concept de base de xamlflair est basé sur des animations qui sont classées comme à partir et à . Tout élément d'interface utilisateur qui se compose d'une animation commencera par une ou plusieurs valeurs arbitraires et complètera en utilisant la valeur par défaut de la propriété correspondante . Tout élément d'interface utilisateur qui consiste en A TO Animation commencera dans son état actuel et animera une ou plusieurs valeurs arbitraires .
Exemple de A de l' animation (un élément d'interface utilisateur traduit par la valeur par défaut d'une traduction (0)):
Exemple d' une animation (un élément d'interface utilisateur s'éloignant de son état actuel):
Remarque : Il est important de noter qu'il existe une exception à cette règle pour les animations de couleur, qui est expliquée dans la section des types d'animation de base.
Pour commencer, vous devez avoir la référence d'espace de noms XAML suivant:
UWP et Uno:
xmlns:xf="using:XamlFlair"WPF:
xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF" À partir de maintenant, il s'agit d'une question simple de définir une propriété ci-jointe à tout FrameworkElement qui a besoin d'une animation:
< Border xf:Animations.Primary= " {StaticResource FadeIn} " />Remarque : Si votre
FrameworkElementdéfinit unCompositeTransformdans votre XAML, il sera modifié pendant le processus d'animation.
Remarque : L'utilisation de
StaticResourceest de référencer les animations communes globales, qui est discutée dans la section suivante.
AVERTISSEMENT : Soyez prudent lors de l'animation
FadeTocar l'élément reste dans l'arbre visuel si laVisibilityestVisible. Il peut y avoir des cas où vous devrez gérer manuellementIsHitTestVisiblepour permettre à l'utilisateur de puiser dans l'élément.
Remarque : il est important de noter lors de l'animation d'une couleur à l'aide d' une animation, la couleur animera d'une valeur spécifiée à son état actuel au lieu d'une valeur par défaut.
Remarque : Lisez les rotations de perspective de la section ( UWP uniquement ) pour plus de détails.
Le suivant répertorie certaines valeurs par défaut notables lorsque vous travaillez avec xamlflair:
Les animations de couleur nécessitent une certaine attention car elles sont légèrement différentes des autres animations de type de base. Lorsque vous utilisez l'une ou l'autre ColorTo et ColorFrom , ce qui suit doit être effectué:
Border.Background les propriétés Control.BorderBrush Shape.Fill Control.Background Shape.Stroke Control.Foreground , Border.BorderBrush TextBlock.ForegroundColorOn L'exemple suivant animera le Fill du rectangle de RoyalBlue à DarkGreen:
< xf : AnimationSettings x : Key = " SampleColorAnimation "
Kind = " ColorTo "
Color = " DarkGreen "
ColorOn = " Fill " />
< Rectangle Fill = " RoyalBlue "
xf:Animations.Primary= " {StaticResource SampleColorAnimation} " /> Si vous avez le besoin de modifier à l'échelle mondiale l'une des valeurs d'animation par défaut (par exemple, ayant une Duration par défaut de 750 au lieu de 500), vous pouvez appeler la fonction de OverrideDefaultSettings dans le code d'initialisation de votre application. L'exemple suivant modifie les valeurs par défaut pour Duration et Easing :
XamlFlair . Animations . OverrideDefaultSettings (
duration : 750 ,
easing : EasingType . Quadratic ) ;Par conséquent, avec l'exemple de code ci-dessus, chaque animation fonctionnera sur 750 ms avec un assouplissement quadratique.
ResourceDictionary pour les paramètres de base Toutes les animations communes doivent être placées dans un ResourceDictionary mondial (ex: Animations.xaml ) et utilisées si nécessaire dans l'application. L'objectif est de consolider toutes les animations en un seul fichier avec des noms significatifs afin que tout développeur puisse comprendre exactement quelle animation est appliquée à un FrameworkElement . Voici un petit exemple de ce à quoi il ressemble:
< 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 > Pour configurer cet ensemble d' AnimationSettings préconfigurées déjà disponibles dans votre application, effectuez les étapes suivantes:
Animations.xamlApp.xaml , ajoutez ce qui suit: < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " Animations.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>Animations.xaml , copiez et collez le contenu des liens correspondants ci-dessous:Paramètres d'animation pour UWP
Paramètres d'animation pour WPF
Paramètres d'animation pour l'UNO
Votre application dispose désormais d'un ensemble global d'animations communes prêtes à l'emploi.
Alternativement à la création de votre propre ResourceDictionary contenant vos AnimationSettings personnalisées, XAMLFLAIR fournit des animations par défaut .
Pour référencer ces animations par défaut dans votre application, effectuez les étapes suivantes dans votre App.xaml :
XamlFlair.WPF en haut: xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF" < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< xf : XamlFlairResources />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>Votre application dispose désormais d'un ensemble global d'animations par défaut prêtes à l'emploi.
Si Visual Studio Intellisense ne fonctionne pas lorsque vous utilisez <xf:XamlFlairResources /> , vous voudrez peut-être essayer ce qui suit à la place:
< Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>TransformOn ( WPF uniquement ) En utilisant la propriété TransformOn , vous pouvez cibler le type de RenderTransform à appliquer à votre animation. Les options disponibles sont Render et Layout . Lorsque rien n'est spécifié, le Vale par défaut est Render . Voici un exemple des deux:
Remarque : Très important pour noter que
LayoutTransformde WPF ne prend en charge aucuneTranslateTransform, donc les animations ne fonctionneront jamais. Vous pouvez en savoir plus à ce sujet dans la section Remarques ici.
Il est important de noter que pour appliquer une rotation de perspective (également appelée Swivel ) à un élément cible, il est nécessaire qu'il soit enveloppé dans un conteneur avec les propriétés de mise en page appliquées à l'élément de conteneur. Par conséquent, considérez la rotation de perspective simple suivante:
< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
Kind = " SwivelYFrom "
SwivelY = " -45 " />Au lieu d'animer l'élément en tant que tel:
< Rectangle Fill = " RoyalBlue "
Width = " 200 "
Height = " 200 "
HorizontalAlignment = " Center "
VerticalAlignment = " Center "
xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />L'élément doit être placé dans un conteneur pour que l'animation fonctionne correctement:
< Border Width = " 200 "
Height = " 200 "
HorizontalAlignment = " Center "
VerticalAlignment = " Center " >
< Rectangle Fill = " RoyalBlue "
xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border > Les animations peuvent être combinées et, comme mentionné précédemment, toutes ces animations combinées qui sont couramment utilisées doivent être placées dans le Global ResourceDictionary (Ex: Animations.xaml ):
< 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 > Cela démontre une animation combinée d'un FadeFrom et TranslateFrom :
Cela démontre une animation combinée d'un FadeFrom , TranslateFrom et ScaleFrom :
Les animations peuvent avoir leurs paramètres remplacés directement sur le FrameworkElement . Ceci est généralement fait pour modifier les valeurs de retard et de durée afin que nous ne surevaluons pas le fichier Animations.xaml avec des ressources répétées. Pour réaliser un remplacement, utilisez l'extension de balisage Animate associée à la propriété BasedOn :
< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " /> Étant donné que les valeurs codées dures pour OffsetX et OffsetY peuvent être limitantes (comme dans les cas lorsqu'ils traitent avec des fenêtres redonnables), OffsetX et OffsetY prennent en charge les valeurs basées sur les étoiles:
< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />Une valeur basée sur l'étoile calculera le décalage en fonction de la
ActualWidthactuelle et / ou de la valeurActualHeightde la ou desFrameworkElement, il est donc important que l'élément ait exécuté son événementLoaded. SiActualWidthet / ouActualHeightne sont pas encore calculées, la valeur de décalage essaiera d'être basée surWidthet / ouHeight.
Une animation composée est simplement une animation en plusieurs étapes utilisant la classe CompoundSettings . Chaque animation intérieure s'exécute une fois la précédente terminée, donc ce sont des animations séquentielles:
< 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 >Remarque :
CompoundSettingsprend en charge la propriétéEvent, qui est discutée dans une section ultérieure.
Une animation peut être répétée en utilisant les propriétés IterationBehavior et IterationCount (valeurs par défaut du Count et 1 respectivement).
Ce qui suit montre comment exécuter une animation seulement 5 fois:
< Border xf:Animations.Primary= " {StaticResource FadeIn} "
xf:Animations.IterationCount= " 5 " />Ce qui suit montre comment exécuter une animation indéfiniment:
< Border xf:Animations.Primary= " {StaticResource FadeIn} "
xf:Animations.IterationBehavior= " Forever " />Notez également qu'il est également possible de répéter une animation composée. Par exemple, en utilisant l'animation composée ( Progress nommé) de la section précédente:
< Border xf:Animations.Primary= " {StaticResource Progress} "
xf:Animations.IterationCount= " 5 " />AVERTISSEMENT : Lorsque vous utilisez des animations répétitives, vous ne pouvez pas définir une animation
Secondarysur l'élément.
Il est important de noter que toutes les animations xamlflair sont des animations "coup d'envoi" , en d'autres termes, ils commencent et ne s'arrêtent que lorsqu'ils se terminent (ou lorsque l'élément associé décharge), sauf répéter les animations. Une animation répétée peut être arrêtée lors de la fourniture d'une false valeur à la propriété PrimaryBinding (les liaisons sont couvertes dans la section suivante):
< CheckBox x : Name = " SampleCheckBox "
IsChecked = " False " />
< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " /> Lorsqu'un false est défini sur la liaison, l'itération actuelle de l'animation s'exécutera jusqu'à ce qu'elle se termine, puis l'animation répétée s'arrêtera.
Par défaut, toutes les animations s'exécutent lorsque l'élément animé tire son événement Loaded . Ce comportement peut être remplacé en définissant la propriété Event . Event peut être tout événement exposé de l'élément animé. Par exemple, pour exécuter une animation sur un bouton lors de son clic, l'événement Click peut être utilisé:
< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />Quelques exemples d'événements communs qui peuvent être utilisés:
Il y a des cas particuliers à noter. Le premier cas spécial est l'événement DataContextChanged . Lorsque vous utilisez l'événement DataContextChanged , il se déclenchera lorsque la valeur DataContext change, à l'exception des cas où une valeur null est définie, null est filtré et ne déclencherait pas d'animation.
Un autre cas particulier est Visibility . Bien qu'aucune VisibilityChanged d'événement ne existe sur un FrameworkElement , la propriété Visibility a été traitée comme un événement lorsque la valeur change car il peut être utile d'animer un élément lorsqu'il devient visible sur l'interface utilisateur. Si une animation est déclenchée avec Event=Visibility , elle ne sera déclenchée que chaque fois qu'une valeur de Visibile est définie.
L'une des valeurs les plus importantes de Event est None , qui est une valeur utilisée pour annuler tout déclencheur d'animation basé sur des événements. Lorsque vous ne spécifiez None , vous devrez déclencher manuellement vos animations à l'aide des propriétés PrimaryBinding ou SecondaryBinding . Ces propriétés sont de type bool et attendent une valeur de True pour exécuter l'animation correspondante. Ce qui suit est un exemple de déclenchement d'une animation basée sur l' IsChecked du contrôle de la case à cocher:
< CheckBox x : Name = " SampleCheckBox "
IsChecked = " False " />
< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " /> L'animation ci-dessus ne s'exécutera que lorsque le IsChecked est True . Si None n'a été spécifié pour Event , l'animation s'exécuterait alors sur Loaded et sur la liaison.
Lorsque vous travaillez avec PrimaryBinding et SecondaryBinding ensemble (en fonction de la même valeur booléenne), il peut être plus propre et plus simple à CombinedBinding . CombinedBinding agit simplement à la fois comme PrimaryBinding et SecondaryBinding . Au lieu de ce qui suit:
< 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} " />Vous l'utiliseriez comme tel:
< 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} " /> En utilisant CombinedBinding de cette manière, il économise pour utiliser un convertisseur pour la valeur booléenne inverse, qui est gérée en interne.
Il peut y avoir des scénarios où vous voudrez peut-être exécuter un ICommand à la fin d'une animation. Dans un tel cas, il existe deux propriétés: PrimaryCompletionCommand et SecondaryCompletionCommand .
Dans l'exemple suivant, la commande nommée MyCustomCommand exécutera une fois l'animation principale terminée:
< TextBlock Text = " Example of a completion command "
xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />StartWith Il y aura des cas où vous aurez besoin de votre élément d'interface utilisateur pour commencer dans un état spécifique, par exemple, l'élément doit être rétréci avant l'exécution de son animation. Ceci est réalisé en utilisant la propriété StartWith :
< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " /> Dans l'exemple ci-dessus, puisque l'élément évolue par le bas, mais avec un retard, nous devons commencer dans la position à l'échelle , nous utilisons donc la propriété StartWith pour définir son état initial. Ce que StartWith fait essentiellement est de configurer les valeurs initiales de l'élément dès qu'il a chargé.
AllowOpacityReset ( WPF uniquement )La documentation .NET indique ce qui suit:
Dans certains cas, il peut sembler que vous ne pouvez pas modifier la valeur d'une propriété une fois qu'elle a été animée. ... Vous devez empêcher l'animation d'influencer la propriété.
Il peut y avoir des cas où vous animez l'opacité, dans laquelle l'animation d'opacité réinitialise soudainement sa valeur au lieu de l'animation, ou ne se comporte pas comme vous l'intendez. Dans les cas, vous devrez peut-être définir AllowOpacityReset = False ( la valeur par défaut de AllowOpacityReset est True ) pour réaliser le comportement prévu:
< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
xf:Animations.AllowOpacityReset= " False "
Source = " /Assets/... " />ClipToBounds ( UWP et UNO uniquement ) Une propriété utile qui existe dans WPF, ClipToBounds est une propriété utile qui existe dans WPF, mais malheureusement pas dans UWP. Par conséquent, il a été ajouté dans XAMLFLAIR en raison de sa facilité d'utilisation et de sa main-d'œuvre. Pour couper le contenu des enfants aux limites de l'élément contenant, définissez simplement ClipToBounds sur True sur l'élément contenant:
< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border > Afin de déboguer une animation et d'intervenir dans le code, utilisez la propriété EnableDebugging . Le débogage est possible en raison de l'inclusion de la bibliothèque Sourcelink. Assurez-vous de faire ce qui suit:
< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
xf:Animations.Primary= " {StaticResource SlideFromLeft} " />Les tableaux suivants expliquent les valeurs d'énumération:
| Valeur d'énumération | Description |
|---|---|
None | Valeur par défaut. Aucun débogage ne se produira. |
InitializeElement | Brise le débogueur dans la fonction InitializeElement de Xamlflair. |
RunAnimation | Brise le débogueur dans la fonction RunAnimation de xamlflair. |
La bibliothèque XAMLFLAIR résume sa journalisation à l'aide de Microsoft.Extensions.Logging.Abstractions . Vous trouverez ci-dessous un exemple de journalisation utilisant le Serilog dans une application UWP:
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 ( ) ) ;
} Pour produire les valeurs d'une ou plusieurs animations, définissez simplement Debug sur la propriété EnableLogging sur le FrameworkElement cible:
< Rectangle xf:Animations.EnableLogging= " Debug "
xf:Animations.Primary= " {StaticResource SlideFromLeft} " />Cela vous fournira la sortie de console similaire suivante (diffère légèrement pour 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
Au fur et à mesure que chaque storyboard s'exécute, il est conservé dans une liste interne jusqu'à ce qu'il se termine (ou s'arrête). Pour produire cette liste interne, ajoutez temporairement ce qui suit dans le code de démarrage de votre application:
Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;Cela vous fournira la sortie de console similaire suivante:
---------- 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!
------------------------------------
Actuellement, toute la journalisation de xamlflair mentionnée ci-dessus est enregistrée sur
LogLevel.Debug
ListViewBase ( UWP et UNO ) et ListBox ( WPF ) 
Afin d'implémenter correctement les animations d'élément sur les éléments de liste, il ne suffit pas de créer simplement des propriétés jointes par rapport aux contrôles ListViewBase (UWP) et Listbox (WPF). Au lieu de cela, des contrôles héréditaires ont été créés: AnimatedListView et AnimatedGridView pour UWP, et AnimatedListView et AnimatedListBox pour WPF, tous disponibles à partir de l'espace de noms XamlFlair.Controls :
Espace de noms UWP et UNO:
xmlns:xfc="using:XamlFlair.Controls"Espace de noms WPF:
xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF" L'animation des éléments dans les listes est légèrement différente de l'animation d'un élément d'interface utilisateur typique. La raison principale de cette différence est que la valeur Event sur les AnimationSettings correspondants ne peut pas être modifié par rapport à sa valeur par défaut. Par conséquent, ce qui suit n'est pas valide :
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " /> Liste des animations d'élément, par défaut , animer en fonction de l'événement Loaded de chaque élément visible , et également basé sur une mise à jour de la propriété ItemsSource du contrôle de la liste. Afin de désactiver ces comportements par défaut, les deux propriétés suivantes peuvent être utilisées indépendamment:
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.AnimateOnLoad= " False "
... />
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.AnimateOnItemsSourceChange= " False "
... /> Par défaut, les animations d'élément ont un délai de 25 millisecondes entre chaque élément. Cette valeur peut être modifiée à l'aide de la propriété InterElementDelay :
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.InterElementDelay= " 50 "
... /> Tout comme PrimaryBinding et SecondaryBinding , les animations d'élément peuvent être déclenchées par une liaison avec l'utilisation de la propriété ItemsBinding :
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.AnimateOnLoad= " False "
xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />AVERTISSEMENT ( UWP UNIQUEMENT ) : Sachez que si vous avez un
ItemContainerTransitionsdéfinie sur laAnimatedListViewouAnimatedGridView, ils seront effacés. Ceci est fait pour éviter les animations d'objets contradictoires.
Remarque ( UNO uniquement ) : Pour éviter tout scintillement sur les animations d'articles, il y a actuellement une contrainte en place: L'animation
Itemsdoit contenir unFadeFrom.
