快捷導(dǎo)航

最好用的WPF加載動畫功能

更新時(shí)間：2025年01月09日 08:45:13 作者：小碼編匠

當(dāng)開發(fā)應(yīng)用程序時(shí),提供良好的用戶體驗(yàn)（UX）是至關(guān)重要的,加載動畫作為一種有效的溝通工具,它不僅能告知用戶系統(tǒng)正在工作,還能夠通過視覺上的吸引力來增強(qiáng)整體用戶體驗(yàn),本文給大家介紹了最好用的WPF加載動畫功能,需要的朋友可以參考下

前言

當(dāng)開發(fā)應(yīng)用程序時(shí)，提供良好的用戶體驗(yàn)（UX）是至關(guān)重要的。尤其是在處理大量數(shù)據(jù)或執(zhí)行復(fù)雜操作期間，確保用戶有一個(gè)流暢的加載體驗(yàn)不僅可以提高用戶的滿意度，還能有效減少等待過程中的焦慮感。

加載動畫作為一種有效的溝通工具，它不僅能告知用戶系統(tǒng)正在工作，還能夠通過視覺上的吸引力來增強(qiáng)整體用戶體驗(yàn)。

需求分析

在實(shí)現(xiàn)加載動畫時(shí)，開發(fā)者通常會遇到兩種主要方法，但它們都存在一定的局限性：

直接添加遮罩層：此方法涉及在控件之上疊加一個(gè)半透明的遮罩層，并在此層上展示加載動畫。盡管這種方法能滿足基本需求，但它要求為每次使用單獨(dú)編寫和管理顯示/隱藏邏輯，這不僅增加了代碼量，也容易導(dǎo)致代碼庫膨脹和維護(hù)困難。

封裝成獨(dú)立控件：另一種常見的做法是創(chuàng)建一個(gè)專門用于顯示遮罩效果的控件，并將其應(yīng)用于頁面內(nèi)容周圍。雖然這種方式提高了二.基本用法

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

運(yùn)行效果

高級用法

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

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

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

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

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

只需在Resources中添加一個(gè)名為MaskContent的資源，在觸發(fā)加載遮罩顯示的時(shí)候就會自動讀取該資源作為動畫元素，如果放在App.Resources中，整個(gè)項(xiàng)目所有加載效果都使用該資源，如果放在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>

添加進(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>