最好用的WPF加載動畫功能

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

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

前言

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

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

需求分析

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

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

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

以下為示例代碼，當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); }
        }
    }
}

運行效果

高級用法

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

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

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>