XamlFlair
1.0.0
XAMLFLAIRライブラリの目標は、共通のアニメーションの実装を容易にし、開発者がXAMLの数行で単一または結合されたアニメーションを簡単に追加できるようにすることです。
| Sekuence Puzzleゲーム |
|---|
 |
いくつかのコーヒーで私の作品をサポートしたい場合は、ここでそれをすることができます：私にコーヒーを買ってください。あなたの助けにより、私はこのプロジェクトに時間を費やし続け、可能であれば新しい機能を維持し、更新し続けることができます。前もって感謝します！
Nugetからインストールします
機能の概要
基本概念
使用法
ベースアニメーションタイプ
カラーアニメーション（ WPFとUNOのみ）
グローバルデフォルト値をオーバーライドします
基本設定にResourceDictionaryを使用します
デフォルトのアニメーション（ WPFのみ）
TransformOnプロパティ（ WPFのみ）
パースペクティブローテーション（ UWPのみ）
アニメーションを組み合わせます
過剰な値
xおよびy軸の相対翻訳
複合アニメーション
繰り返しアニメーション
イベント
バインディング
プライマリおよびセカンダリ完了コマンド
StartWithプロパティを使用します
AllowOpacityResetプロパティを使用する（ WPFのみ）
ClipToBoundsプロパティを使用（ UWPおよびUNOのみ）
アニメーションのデバッグ
ロギングアニメーション
ListViewBase （ UWPおよびUNO ）およびListBoxベース（ WPF ）アニメーション
| プラットフォーム | パッケージ | ヌゲット |
|---|---|---|
| UWP | xamlflair.uwp | |
| WPF | xamlflair.wpf | |
| uno | xamlflair.uno |
Xamlflairをインストールするには、パッケージマネージャーコンソールで次のコマンドを実行します。
UWP：
Install-Package XamlFlair.UWP
アプリは最小限のWindows10バージョン1809（ビルド17763）をターゲットにする必要があります
WPF：
Install-Package XamlFlair.WPF
UNO：
Install-Package XamlFlair.Uno
UWPアプリは、最小限のWindows10バージョン1809（ビルド18362）をターゲットにする必要があります
| 特徴 | UWP | WPF | UWP（UNO） | iOS（uno） | Android（UNO） | WASM（UNO）実験 |
|---|---|---|---|---|---|---|
| アニメーションシステム | 構成 | ストーリーボード | ストーリーボード | ストーリーボード | ストーリーボード | ストーリーボード |
| 変換タイプ | n/a | TransformGroup | compositeTransform | compositeTransform | compositeTransform | compositeTransform |
| defaultAnimations.xaml | - | ✔ | - | - | - | - |
TransformOn | - | ✔ | - | - | - | - |
| 複合アニメーション | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 相対翻訳 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 繰り返しアニメーション | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| イベントとバインディング | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| プライマリ/セカンダリ完了コマンド | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
StartWith | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
AllowOpacityReset | - | ✔ | - | - | - | - |
ClipToBounds | ✔ | n/a | ✔ | ✔ | ✔ | ✔ |
| アニメーションリスト | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| ぼかし効果 | ✔ | ✔ | - | - | - | - |
| 飽和効果 | ✔ | - | - | - | - | - |
| 色合いの効果 | ✔ | - | - | - | - | - |
| カラーアニメーション | - | ✔ | ✔ | ✔ | ✔ | ✔ |
| パースペクティブローテーション（スイベル） | ✔ | - | - | - | - | - |
| アニメーションのデバッグ | ✔ | ✔ | ✔ | ✔ | ✔ | - |
Xamlflairの基本概念は、 andに分類されるアニメーションに基づいています。アニメーションから構成されるUI要素は、1つ以上の任意の値から始まり、対応するプロパティのデフォルト値を使用して完了します。アニメーションからアニメーションで構成されるUI要素は、現在の状態で始まり、1つ以上の任意の値にアニメーション化されます。
Animationの例（翻訳のデフォルト値に変換されるUI要素（0））：
アニメーションの例（現在の状態から滑り落ちるUI要素）：
注：カラーアニメーションのこのルールには例外があることに注意することが重要です。これは、ベースアニメーションタイプのセクションで説明されています。
開始するには、次のXAMLネームスペースリファレンスが必要です。
UWPとUNO：
xmlns:xf="using:XamlFlair"WPF：
xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"これからは、アニメーションが必要なFrameworkElementに添付のプロパティを設定するという単純な問題です。
< Border xf:Animations.Primary= " {StaticResource FadeIn} " />注：
FrameworkElementがXAMLのCompositeTransformを定義する場合、アニメーションプロセス中に変更されます。
注：
StaticResourceの使用は、次のセクションで説明するグローバルな共通アニメーションを参照することです。
警告：
VisibilityがVisibleいる場合は、要素が視覚ツリーに残っているため、FadeToをアニメーション化するときは注意してください。ユーザーが要素をタップできるようにするために、IsHitTestVisible手動で管理する必要がある場合があります。
注： from Animationを使用して色をアニメーション化する場合、色はデフォルト値ではなく、指定された値から現在の状態にアニメーション化されます。
注：詳細については、セクションの視点回転（ UWPのみ）をお読みください。
Xamlflairを使用した場合、次の顕著なデフォルト値をリストします。
カラーアニメーションは、他のベースタイプのアニメーションとわずかに異なるため、ある程度の注意が必要です。 ColorToとColorFromいずれかを使用する場合、次のことを行う必要があります。
Control.Background 、 Control.Foreground 、 Control.BorderBrush 、 Border.Background 、 Border.BorderBrush 、 TextBlock.Foreground 、 Shape.Fill 、 Shape.StrokeColorOnを使用してターゲットプロパティを指定する必要があります次の例では、ロイヤルブルーからダークグリーンまでの長方形のFillをアニメーション化します。
< xf : AnimationSettings x : Key = " SampleColorAnimation "
Kind = " ColorTo "
Color = " DarkGreen "
ColorOn = " Fill " />
< Rectangle Fill = " RoyalBlue "
xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />デフォルトのアニメーション値のいずれかをグローバルに変更する必要がある場合（たとえば、500ではなく750のデフォルトのDurationがある）、アプリの初期化コードでOverrideDefaultSettings関数を呼び出すことができます。次の例では、 Duration中にデフォルト値を変更し、 Easing 。
XamlFlair . Animations . OverrideDefaultSettings (
duration : 750 ,
easing : EasingType . Quadratic ) ;したがって、上記のサンプルコードを使用すると、すべてのアニメーションが2次緩和で750msで実行されます。
ResourceDictionaryを使用しますすべての一般的なアニメーションは、グローバルResourceDictionary （例： Animations.xaml ）に配置し、アプリ全体で必要に応じて使用する必要があります。目標は、すべてのアニメーションを意味のある名前の1つのファイルに統合して、開発者がFrameworkElementに適用されるアニメーションを正確に理解できるようにすることです。これがそれがどのように見えるかの小さな例です：
< 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 >アプリですでに利用可能なこの事前に構成されたAnimationSettingsのセットをセットアップするには、次の手順を実行します。
Animations.xamlという名前を付けますApp.xamlで、次を追加します。 < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " Animations.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>Animations.xamlで、以下の対応するリンクからコンテンツをコピーして貼り付けます。UWPのアニメーション設定
WPFのアニメーション設定
UNOのアニメーション設定
アプリには、使用できる一般的なアニメーションのグローバルセットがあります。
カスタムAnimationSettingsを含む独自のResourceDictionaryを作成することも、XamlFlairにデフォルトのアニメーションを提供します。
アプリケーションでこれらのデフォルトのアニメーションを参照するには、 App.xamlで次の手順を実行します。
XamlFlair.WPF名前空間を定義します。 xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF" < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< xf : XamlFlairResources />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>アプリケーションには、使用できるデフォルトアニメーションのグローバルセットがあります。
Visual Studio Intellisenseが<xf:XamlFlairResources />を使用するときに機能しない場合、代わりに次のことを試してみることができます。
< Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>TransformOnプロパティ（ WPFのみ） TransformOnプロパティを使用して、どのタイプのRenderTransformターゲットにしてアニメーションに適用できます。利用可能なオプションは、 RenderとLayoutです。何も指定されていない場合、デフォルトの谷はRenderます。これが2つの例です：
注：WPFの
LayoutTransformTranslateTransformをサポートしていないため、Animationsが機能しないことに注意することが非常に重要です。詳細については、こちらの備考セクションをご覧ください。
ターゲット要素にパースペクティブ回転（ Swivelとも呼ばれる）を適用するには、コンテナ要素に適用されたレイアウトプロパティを備えたコンテナに包む必要があることに注意することが重要です。したがって、次の単純な視点の回転を検討してください。
< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
Kind = " SwivelYFrom "
SwivelY = " -45 " />そのような要素をアニメーション化する代わりに：
< Rectangle Fill = " RoyalBlue "
Width = " 200 "
Height = " 200 "
HorizontalAlignment = " Center "
VerticalAlignment = " Center "
xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />要素は、アニメーションが正しく動作するようにコンテナに配置する必要があります。
< Border Width = " 200 "
Height = " 200 "
HorizontalAlignment = " Center "
VerticalAlignment = " Center " >
< Rectangle Fill = " RoyalBlue "
xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >アニメーションを組み合わせることができ、前述のように、一般的に使用されるこれらの組み合わせアニメーションは、グローバルResourceDictionary （例： 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 >これは、 FadeFromとTranslateFromのアニメーションの組み合わせを示しています。
これは、 FadeFrom 、 TranslateFrom 、およびScaleFromの組み合わせのアニメーションを示しています。
アニメーションは、設定をFrameworkElementで直接オーバーライドすることができます。これは、一般的に遅延と期間の値を変更するために行われ、 Animations.xamlファイルを繰り返しリソースで過度に入力しないようにします。オーバーライドを達成するには、 BasedOnプロパティと組み合わせたAnimateマークアップ拡張機能を使用します。
< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />OffsetXおよびOffsetYのハードコーディング値は制限される可能性があるため（リサイズ可能なウィンドウを扱う場合など）、 OffsetXとOffsetY両方のスターベースの値をサポートします。
< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />STARベースの値は、
FrameworkElementの現在のActualWidthおよび/またはActualHeight値に基づいてオフセットを計算するため、要素がLoadedイベントを実行したことが重要です。ActualWidthおよび/またはActualHeightがまだ計算されていない場合、オフセット値はWidthおよび/またはHeightに基づいてしようとします。
コンパウンドアニメーションは、 CompoundSettingsクラスを使用した単なるマルチステップアニメーションです。各内部アニメーションは、前のアニメーションが完了すると実行されるため、シーケンシャルなアニメーションです。
< 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 >注：
CompoundSettings、Eventプロパティをサポートしています。これについては、後のセクションで説明します。
アニメーションは、 IterationBehaviorおよびIterationCountプロパティ（それぞれCountと1デフォルト値）を使用して繰り返すことができます。
以下は、アニメーションを5回だけ実行する方法を示しています。
< Border xf:Animations.Primary= " {StaticResource FadeIn} "
xf:Animations.IterationCount= " 5 " />以下は、アニメーションを無期限に実行する方法を示しています。
< Border xf:Animations.Primary= " {StaticResource FadeIn} "
xf:Animations.IterationBehavior= " Forever " />また、複合アニメーションを繰り返すことも可能であることに注意してください。たとえば、前のセクションから複合アニメーション（名前付きProgress ）を使用してください。
< Border xf:Animations.Primary= " {StaticResource Progress} "
xf:Animations.IterationCount= " 5 " />警告：繰り返しアニメーションを使用する場合、要素に
Secondaryアニメーションを設定することはできません。
すべてのXamlflairアニメーションは「キックオフ」アニメーションであることに注意することが重要です。つまり、アニメーションを繰り返すことを除いて、完了したときに（または関連する要素が降ろされたときに）開始して停止することに注意することが重要です。 PrimaryBindingプロパティにfalse値を提供するときに繰り返しアニメーションを停止できます（次のセクションでは、バインディングがカバーされています）：
< CheckBox x : Name = " SampleCheckBox "
IsChecked = " False " />
< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />バインディングにfalseが設定されると、アニメーションの現在の反復が終了するまで実行され、繰り返しアニメーションが停止します。
デフォルトでは、すべてのアニメーションがLoadedイベントを発射するときにすべてのアニメーションを実行します。この動作は、 Eventプロパティを設定することでオーバーライドできます。 Eventアニメーション化されている要素から公開されるすべてのイベントにすることができます。たとえば、ボタンがクリックされたときにアニメーションを実行するには、 Clickイベントを使用できます。
< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />使用できる一般的なイベントの例：
注意すべき特別なケースがいくつかあります。最初の特別なケースは、 DataContextChangedイベントです。 DataContextChangedイベントを使用する場合、 null値が設定されている場合を除き、 nullが除外され、アニメーションがトリガーされない場合を除き、 DataContext値が変更されると発射されます。
別の特別なケースはVisibilityです。 FrameworkElementにはVisibilityChanged存在するイベントはありませんが、 Visibilityプロパティは、UIで表示された要素をアニメーション化するのに役立つため、値が変化するときにイベントのように扱われています。 Event=Visibilityでアニメーションがトリガーされる場合、 Visibileの値が設定されるたびにトリガーされます。
Eventの最も重要な値の1つはNoneであり、これはあらゆるイベントベースのアニメーショントリガーをキャンセルするために使用される値です。 None指定する場合、 PrimaryBindingまたはSecondaryBinding特性を使用してアニメーションを手動でトリガーする必要があります。これらのプロパティはタイプのboolであり、対応するアニメーションを実行するためにTrueの値を期待します。以下は、チェックボックスコントロールのIsCheckedに基づいてアニメーションをトリガーする例です。
< CheckBox x : Name = " SampleCheckBox "
IsChecked = " False " />
< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />上記のアニメーションは、 IsCheckedがTrue場合にのみ実行されます。 EventにNone指定されていない場合、アニメーションはLoadedとバインディングで実行されます。
PrimaryBindingとSecondaryBinding両方を一緒に（同じブール値に基づいて）作業する場合、 CombinedBinding使用する方がクリーンで簡単になる場合があります。 CombinedBinding 、単にPrimaryBindingとSecondaryBindingの両方として機能します。以下の代わりに：
< 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} " />あなたはそれをそのように使用するでしょう：
< 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} " />この方法でCombinedBinding使用することにより、内部で処理される逆ブール値にコンバーターを使用する必要があります。
アニメーションが完了したときにICommandを実行したいシナリオがある場合があります。このような場合、2つのプロパティが存在します： PrimaryCompletionCommandとSecondaryCompletionCommand 。
次の例では、 MyCustomCommandという名前のコマンドは、主要なアニメーションが完了すると実行されます。
< TextBlock Text = " Example of a completion command "
xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />StartWithプロパティを使用します特定の状態で開始するためにUI要素が必要になる場合、たとえば、アニメーションが実行される前に要素を縮小する必要があります。これは、 StartWithプロパティを使用して達成されます。
< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />上記の例では、要素は下部からスケーリングされているため、遅延があるため、スケーリングされた位置で開始する必要があるため、 StartWithプロパティを使用して初期状態を設定します。本質的にStartWithのは、ロードが再びロードされるとすぐに、要素の初期値をセットアップすることです。
AllowOpacityResetプロパティを使用する（ WPFのみ）.NETドキュメントには、次のように記載されています。
場合によっては、アニメーション化された後、プロパティの価値を変更できないように見えるかもしれません。 ...アニメーションがプロパティに影響を与えるのを止める必要があります。
不透明度をアニメーション化する場合、不透明なアニメーションがアニメーション化するのではなく、その価値を突然リセットする場合、または意図したとおりに動作しない場合があります。場合には、目的の動作を実現するには、 AllowOpacityReset = False （ AllowOpacityResetのデフォルト値がTrue ）を設定する必要がある場合があります。
< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
xf:Animations.AllowOpacityReset= " False "
Source = " /Assets/... " />ClipToBoundsプロパティを使用（ UWPおよびUNOのみ） WPFに存在する有用なプロパティであるClipToBounds 、WPFに存在する有用なプロパティですが、残念ながらUWPには存在しません。したがって、使いやすさと便利さのためにXamlflairに追加されました。子のコンテンツを含む要素の境界にクリップするには、 ClipToBounds含む要素でTrueに設定するだけです。
< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >アニメーションをデバッグしてコードに足を踏み入れるには、 EnableDebuggingプロパティを使用します。 Sourcelinkライブラリが含まれているため、デバッグが可能です。必ず次のことをしてください。
< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
xf:Animations.Primary= " {StaticResource SlideFromLeft} " />次の表には、列挙値が説明されています。
| 列挙値 | 説明 |
|---|---|
None | デフォルト値。デバッグは発生しません。 |
InitializeElement | XamlflairのInitializeElement関数でデバッガーを破ります。 |
RunAnimation | XamlflairのRunAnimation関数でデバッガーを破ります。 |
Xamlflairライブラリは、 Microsoft.Extensions.Logging.Abstractionsを使用してロギングを抽象化します。以下は、UWPアプリでSerilogを使用したログの例です。
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 ( ) ) ;
} 1つ以上のアニメーションの値を出力するには、ターゲットFrameworkElementのEnableLoggingプロパティにDebugを設定するだけです。
< Rectangle xf:Animations.EnableLogging= " Debug "
xf:Animations.Primary= " {StaticResource SlideFromLeft} " />そうすることで、次の類似のコンソール出力が提供されます（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
各ストーリーボードが実行されると、完了（または停止する）まで内部リストに保持されます。この内部リストを出力するには、アプリの起動コードに次のものを一時的に追加します。
Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;そうすることで、次の同様のコンソール出力が提供されます。
---------- 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!
------------------------------------
現在、上記のxamlflairのすべてのログは、
LogLevel.Debugに記録されています
ListViewBase （ UWPおよびUNO ）およびListBoxベース（ WPF ）アニメーション
リストアイテムにアイテムアニメーションを適切に実装するために、ListViewBase（UWP）およびListBox（WPF）コントロールに対して添付のプロパティを単純に作成するだけでは不十分でした。代わりに、継承されたコントロールが作成されました。UWPのAnimatedListViewとAnimatedGridView 、およびWPFのAnimatedListViewとAnimatedListBoxはすべてXamlFlair.Controls namespaceから入手可能です。
UWPおよびUNOネームスペース：
xmlns:xfc="using:XamlFlair.Controls"WPFネームスペース：
xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"リストでアイテムをアニメーション化することは、典型的なUI要素をアニメーション化することとわずかに異なります。この違いの主な理由は、対応するAnimationSettingsのEvent値をデフォルト値から変更できないことです。したがって、以下は無効です。
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />リストアイテムのアニメーションは、デフォルトでは、各表示可能なアイテムのLoadedイベントに基づいてアニメーション化し、リストコントロールのItemsSourceプロパティの更新に基づいています。これらのデフォルトの動作を無効にするために、次の2つのプロパティを個別に使用できます。
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.AnimateOnLoad= " False "
... />
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.AnimateOnItemsSourceChange= " False "
... />デフォルトでは、アイテムアニメーションの各アイテム間で25ミリ秒の遅延があります。この値は、 InterElementDelayプロパティを使用して変更できます。
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.InterElementDelay= " 50 "
... />一PrimaryBindingやSecondaryBindingと同様に、アイテムのアニメーションは、 ItemsBindingプロパティを使用してバインディングすることでトリガーできます。
< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
xf:Animations.AnimateOnLoad= " False "
xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />警告（ UWPのみ） ：
AnimatedListViewまたはAnimatedGridViewにItemContainerTransitionsが設定されている場合、それらがクリアされることに注意してください。これは、競合するアイテムのアニメーションを避けるために行われます。
注（ unoのみ） ：アイテムアニメーションのフリッカーを避けるために、現在制約があります。
ItemsアニメーションにはFadeFromが含まれている必要があります。
