快捷導(dǎo)航

使用WPF實(shí)現(xiàn)加載動(dòng)畫效果

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

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

前言

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

一、需求分析

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

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

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

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

二、基本用法

以下為示例代碼，當(dāng)ViewModel中的IsLoading屬性值為True時(shí)，就會(huì)觸發(fā)Loading動(dòng)畫。

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測(cè)試"
    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); }
        }
    }
}

運(yùn)行效果：

三、高級(jí)用法

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

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

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

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

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

只需在Resources中添加一個(gè)名為MaskContent的資源，在觸發(fā)加載遮罩顯示的時(shí)候就會(huì)自動(dòng)讀取該資源作為動(dòng)畫元素，如果放在App.Resources中，整個(gè)項(xiàng)目所有加載效果都使用該資源，如果放在Window.Resources中，Window中的所有加載效果都使用該資源，以此類推。以下都是合法的代碼。

添加自定義動(dòng)畫效果（用戶控件）

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

添加進(jìn)度條控件

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

方式二：單獨(dú)添加的方式

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