首頁>編程相關>其他源碼
下載

Xamlflair

Xamlflair庫的目的是簡化常見動畫的實現，並允許開發人員輕鬆地添加只有幾行XAML的單個或組合的動畫集。

示例應用程序

展示櫃

Sekuence益智遊戲
Sekuence

支持我

如果您想用一些咖啡來支持我的工作，可以在這裡做：給我買咖啡。您的幫助使我能夠繼續花時間在此項目上，並在可能的情況下繼續使用新功能進行維護和更新。提前致謝！

內容

  • 從Nuget安裝

  • 功能概述

  • 基本概念

  • 用法

  • 基本動畫類型

  • 彩色動畫（僅WPF和UNO ）

  • 覆蓋全局默認值

  • 對基礎設置使用ResourceDictionary

  • 默認動畫（僅WPF ）

  • TransformOn屬性（僅WPF ）

  • 透視旋轉（僅限UWP ）

  • 組合動畫

  • 覆蓋值

  • X和Y軸上的相對翻譯

  • 複合動畫

  • 重複動畫

  • 事件

  • 綁定

  • 初級和次要完成命令

  • 使用StartWith屬性

  • 使用AllowOpacityReset屬性（僅WPF ）

  • 使用ClipToBounds屬性（僅UWP和UNO ）

  • 調試動畫

  • 記錄動畫

  • ListViewBase （ UWP和UNO ）和ListBox -BATE -BATE -BASING（ WPF ）動畫

從Nuget安裝

平台包裹nuget
UWP xamlflair.uwp
WPF xamlflair.wpf
UNO xamlflair.uno

要安裝Xamlflair ，請在軟件包管理器控制台中運行以下命令：

UWP： 

 Install-Package XamlFlair.UWP

您的應用必須針對Windows 10版本1809（構建17763）的目標

WPF： 

 Install-Package XamlFlair.WPF

UNO： 

 Install-Package XamlFlair.Uno

您的UWP應用程序必須針對Windows 10版本1809（構建18362）的目標

功能概述

特徵UWP WPF UWP（UNO） ios（uno） Android（UNO） WASM（UNO）實驗
動畫系統作品故事板故事板故事板故事板故事板
變換類型N/A。變換組COMPOSITETRANSFORM COMPOSITETRANSFORM COMPOSITETRANSFORM COMPOSITETRANSFORM
defaultanimations.xaml - ✔ - - - -
TransformOn - ✔ - - - -
複合動畫✔ ✔ ✔ ✔ ✔ ✔
相對翻譯✔ ✔ ✔ ✔ ✔ ✔
重複動畫✔ ✔ ✔ ✔ ✔ ✔
事件和綁定✔ ✔ ✔ ✔ ✔ ✔
主要/次級完成命令✔ ✔ ✔ ✔ ✔ ✔
StartWith ✔ ✔ ✔ ✔ ✔ ✔
AllowOpacityReset - ✔ - - - -
ClipToBounds ✔ N/A。 ✔ ✔ ✔ ✔
動畫列表✔ ✔ ✔ ✔ ✔ ✔
模糊效果✔ ✔ - - - -
飽和效應✔ - - - - -
色調效果✔ - - - - -
彩色動畫 - ✔ ✔ ✔ ✔ ✔
透視旋轉（旋轉） ✔ - - - - -
調試動畫✔ ✔ ✔ ✔ ✔ -

基本概念

Xamlflair的基本概念是基於被歸類為中和到的動畫。任何由Animation組成的UI元素都將以一個或多個任意值開始，並使用相應屬性的默認值完成。任何由動畫組成的UI元素都將以當前狀態開始，並將一個或多個任意值動畫。

來自動畫的示例（一個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是參考全局通用動畫，這將在下一部分中進行討論。

基本動畫類型

褪色

淡入動畫

警告：對FadeTo進行動畫動畫時要小心，因為如果Visibility Visible ，則元素保留在視覺樹中。可能在某些情況下，您需要手動管理IsHitTestVisible ，以允許用戶點擊元素。

翻譯

翻譯動畫

規模

比例動畫

旋轉

旋轉動畫

模糊（僅UWP和WPF ）

模糊動畫

飽和（僅UWP ）

飽和動畫

色調（僅限UWP ）

色調動畫

顏色（僅WPF和UNO ）

彩色動畫

注意：要注意使用Animation a對顏色進行動畫作用時，顏色將從指定值到其當前狀態而不是默認值進行動畫。

旋轉（僅UWP ）

旋轉動畫

注意：閱讀截面透視旋轉（僅限UWP ）以獲取更多詳細信息。

以下列出了與Xamlflair一起工作時的一些顯著默認值：

  • 善良：fadeto
  • 持續時間（毫秒）：500
  • 放鬆：立方
  • 寬鬆模式：輕鬆
  • 變換式點：（0.5，0.5）
  • 事件：加載
  • InterlementDelay （毫秒）：25（僅列表控件）
  • transformon ：渲染（僅WPF ）
  • 飽和：0.5（僅UWP ）
  • 色彩：透明（僅UWP ）

彩色動畫（僅WPF和UNO ）

顏色動畫需要一些關注，因為它們與其他基本類型動畫略有不同。使用ColorTo和ColorFrom時，必須完成以下操作：

  • 您只能Shape.Stroke以下屬性進行動畫操作： Control.Background ， Control.Foreground ， Control.BorderBrush ， Border.BorderBrush ， TextBlock.Foreground ， Shape.Fill Border.Background
  • 確保在您打算動畫的相應屬性上設置刷子
  • 您還必須使用ColorOn指定目標屬性

下面的示例將使矩形從皇家藍調到darkgreen的Fill進行動畫： 

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

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

覆蓋全局默認值

如果您需要在全球更改默認動畫值之一（例如，默認Duration為750而不是500），則可以在應用程序初始化代碼中調用OverrideDefaultSettings函數。以下示例更改了Duration和Easing默認值： 

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

因此，使用上面的示例代碼，每個動畫都將在二次寬鬆的情況下運行750ms。

對基礎設置使用ResourceDictionary

所有常見的動畫都應放置在全球ResourceDictionary （例如： Animations.xaml ）中，並在整個應用程序中使用的地方使用。目的是將所有動畫合併到一個具有有意義名稱的文件中，以便任何開發人員都可以準確地了解哪些動畫應用於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 ，請執行以下步驟：

  1. 右鍵單擊您的項目，然後單擊添加>新項目...
  2. 選擇資源詞典和命名Animations.xaml
  3. 在您的App.xaml中，添加以下內容： 
    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>
  1. 在Animations.xaml中，從下面的相應鏈接中復制並粘貼內容：

  • UWP的動畫設置

  • WPF的動畫設置

  • UNO的動畫設置

您的應用程序現在有一組全局的通用動畫，可以使用。

默認動畫（僅WPF ）

或者，Xamlflair可以創建包含您自定義AnimationSettings ResourceDictionary ，提供了一些默認的動畫。

要在您的應用程序中引用這些默認動畫，請在App.xaml中執行以下步驟：

  1. 在頂部定義XamlFlair.WPF名稱空間： 
    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"
  1. 更新您的應用程序資源： 
    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

您的應用程序現在有一組全局的默認動畫，可以使用。

如果使用<xf:XamlFlairResources />時，Visual Studio Intellisense不起作用，則可能需要嘗試以下內容： 

    < 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 。這是兩個例子：

transformon動畫

注意：非常重要的是要注意，WPF的LayoutTransform不支持​​任何TranslateTransform ，因此翻譯動畫將永遠無法使用。您可以在此處的“評論”部分中閱讀有關它的更多信息。

透視旋轉（僅限UWP ）

重要的是要注意，將透視旋轉（也稱為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 （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 >

這表明了從FadeFrom和TranslateFrom的淡出的組合動畫：

淡入和翻譯動畫

這表明了FadeFrom ， TranslateFrom和ScaleFrom的淡入淡出的動畫：

淡出，翻譯和尺度遇到

覆蓋值

動畫可以將其設置直接在FrameworkElement上覆蓋。這通常是為了改變延遲和持續時間的值，以使我們不會過分填充Animations.xaml文件，並使用重複的資源。要實現覆蓋，請使用與BasedOn屬性配對的Animate標記擴展： 

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

X和Y軸上的相對翻譯

由於OffsetX和OffsetY的硬編碼值可能是限制的（例如，在處理可解析的窗口時），因此OffsetX和OffsetY支持Star的值： 

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

基於恆星的值將根據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 " />

另請注意，也可以重複複合動畫。例如，使用上一節中的化合物動畫（命名進度）： 

< 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（值不為null時觸發）
  • Pointerover
  • Pointerexit
  • gotfocus
  • 失落的焦點

有一些特殊情況需要注意。第一個特殊情況是DataContextChanged事件。當使用DataContextChanged事件時，當DataContext值更改時，它將觸發，除非設置了null值，否則將null濾出並不會觸發動畫。

另一個特殊情況是Visibility 。儘管在FrameworkElement中不存在事件VisibilityChanged ，但是當值變化時， Visibility屬性被視為事件，因為當元素在UI上可見時可以使其對元素進行動畫作用。如果通過Event=Visibility觸發動畫，則只有在設置Visibile值時才會觸發它。

綁定

Event的最重要值之一是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時才會執行。如果None針對Event指定，則動畫將在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 。在這種情況下，存在兩個屬性： 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 ）

ClipToBounds是WPF中存在的有用屬性，是WPF中存在的有用屬性，但不幸的是不在UWP中。因此，由於易於使用和易用，它已在Xamlflair中添加。要將兒童內容夾在包含元素的邊界上，只需將ClipToBounds設置為True on contaging元素： 

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

調試動畫

為了調試動畫並介入代碼，請使用EnableDebugging屬性。由於包含Sourcelink庫，可以進行調試。請確保執行以下操作：

Sourcelink1Sourcelink2

< 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 ( ) ) ;
}

要輸出一個或多個動畫的值，只需將Debug設置為目標FrameworkElement上的EnableLogging屬性： 

< 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 -BATE -BATE -BASING（ WPF ）動畫

ListView項目動畫

為了在列表項目上正確實現項目動畫，僅僅針對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屬性的更新。為了禁用這些默認行為，可以獨立使用以下兩個屬性： 

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

展開
附加信息
相關應用
爲您推薦
相關資訊 全部