使用WPF實現(xiàn)加載動畫效果

更新時間：2024年03月29日 09:57:22 作者：趨時軟件

在應用程序加載大量數(shù)據(jù)或執(zhí)行復雜操作時,為用戶提供一個良好的加載體驗變得至關重要,加載動畫是其中一個有效的方式,下面我們就來看看如何使用WPF實現(xiàn)簡單的加載動畫效果吧

前言

當我們在開發(fā)應用程序時，用戶體驗往往是至關重要的一環(huán)。在應用程序加載大量數(shù)據(jù)或執(zhí)行復雜操作時，為用戶提供一個良好的加載體驗變得至關重要。加載動畫是其中一個有效的方式，它不僅能夠告知用戶應用程序正在進行工作，還能夠緩解用戶在等待過程中的焦慮感。

一、需求分析

開發(fā)一個加載動畫比較常見的做法一般有以下兩種。

一種是直接在控件的上層添加一層半透明遮罩，在遮罩上面顯示加載動畫，需要顯示加載效果的時候將這個遮罩顯示出來，加載完成以后隱藏這個遮罩，這種方式雖然也能實現(xiàn)需求，但是缺點也很明顯，每次要使用加載效果的時候都需要單獨添加遮罩代碼，單獨寫控制顯示和隱藏的代碼，一個項目頁面那么多，每次都這樣整，那不得把人整崩潰了。

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

今天我們這里使用第三種方式，那就是使用裝飾器來實現(xiàn)這個功能，它的優(yōu)點就是對源代碼侵入很小，不用每次使用都Copy大段代碼，并且可擴展性非常強。

二、基本用法

以下為示例代碼，當ViewModel中的IsLoading屬性值為True時，就會觸發(fā)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); }
        }
    }
}

運行效果：

三、高級用法

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

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

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

答：當然可以，除了默認加載效果以外，還可以添加任意你喜歡的效果，不管它是文字、動畫、視頻、gif圖片還是其它的東西，通通都可以，并且操作非常簡單，一共有兩種方式。

方式一：統(tǒng)一添加的方式

只需在Resources中添加一個名為MaskContent的資源，在觸發(fā)加載遮罩顯示的時候就會自動讀取該資源作為動畫元素，如果放在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>