可能是迄今為止最好用的WPF載入動畫功能(沒有之一)

趋时软件發表於2024-03-28
動畫

前言

　　當我們在開發應用程式時，使用者體驗往往是至關重要的一環。在應用程式載入大量資料或執行復雜操作時，為使用者提供一個良好的載入體驗變得至關重要。載入動畫是其中一個有效的方式，它不僅能夠告知使用者應用程式正在進行工作，還能夠緩解使用者在等待過程中的焦慮感。

一.需求分析

開發一個載入動畫比較常見的做法一般有以下兩種。

一種是直接在控制元件的上層新增一層半透明遮罩，在遮罩上面顯示載入動畫，需要顯示載入效果的時候將這個遮罩顯示出來，載入完成以後隱藏這個遮罩，這種方式雖然也能實現需求，但是缺點也很明顯，每次要使用載入效果的時候都需要單獨新增遮罩程式碼，單獨寫控制顯示和隱藏的程式碼，一個專案頁面那麼多，每次都這樣整，那不得把人整崩潰了。

還有一種實現方式是開發一個控制元件，在這個控制元件當中實現遮罩的效果，然後用這個控制元件把頁面內容包起來，這樣直接控制這個控制元件的屬性就能實現遮罩效果，這也是很多第三方控制元件庫的實現方式。這種方式在易用性上雖然有所提升，但是還是有上面的問題，每個要用的地方都得Copy一次程式碼。

今天我們這裡使用第三種方式，那就是使用裝飾器來實現這個功能，它的優點就是對原始碼侵入很小，不用每次使用都Copy大段程式碼，並且可擴充套件性非常強。

二.基本用法

以下為示例程式碼，當ViewModel中的IsLoading屬性值為True時，就會觸發Loading動畫。

View程式碼：

<Window
    x:Class="LoadingDemo.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:extensions="clr-namespace:LoadingDemo.Extensions"
    xmlns:prism="http://prismlibrary.com/"
    Title="Loading測試"
    Width="1366"
    Height="768"
    prism:ViewModelLocator.AutoWireViewModel="True"
    FontSize="22"
    WindowStartupLocation="CenterScreen">
    <Grid extensions:FrameworkElementExtension.IsLoading="{Binding IsLoading}">
        
    </Grid>
</Window>

ViewModel程式碼：

namespace LoadingDemo.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private bool _isLoading = false;
        public bool IsLoading
        {
            get { return _isLoading; }
            set { this.SetProperty(ref _isLoading, value); }
        }
    }
}

執行效果：

三、高級用法

2.1 FrameworkElementExtension.IsLoading只能在Grid上使用嗎？

答：No，幾乎所有控制元件都可以使用，Window、Page、UserControl、Panel、Button、Rectangle、Path、TextBox等等，都沒問題，只需要將IsLoading設定為True，就會出現Loading效果。

2.2 我覺得載入動畫不好看，有沒有辦法換成其它的？

答：當然可以，除了預設載入效果以外，還可以新增任意你喜歡的效果，不管它是文字、動畫、影片、gif圖片還是其它的東西，通通都可以，並且操作非常簡單，一共有兩種方式。

  • 方式一：統一新增的方式

只需在Resources中新增一個名為MaskContent的資源，在觸發載入遮罩顯示的時候就會自動讀取該資源作為動畫元素，如果放在App.Resources中，整個專案所有載入效果都使用該資源，如果放在Window.Resources中，Window中的所有載入效果都使用該資源，以此類推。以下都是合法的程式碼。

新增自定義動畫效果（使用者控制元件）

<Window.Resources>
    <controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
</Window.Resources>

新增文字

<Window.Resources>
    <TextBlock x:Key="MaskContent" Text="載入中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
</Window.Resources>

新增進度條控制元件

<Window.Resources>
    <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
</Window.Resources>

  • 方式二：單獨新增的方式

<Grid extensions:FrameworkElementExtension.IsLoading="{Binding IsLoading}">
    <extensions:FrameworkElementExtension.MaskContent>
        <TextBlock Text="載入中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White"/>
    </extensions:FrameworkElementExtension.MaskContent>
</Grid>

四.綜合案例

如需以上程式碼，請到群(661224882)共享檔案中下載

技術交流群

聯絡方式

相關文章