最好用的WPF加载动画功能_C#

前言

当开发应用程序时，提供良好的用户体验（ux）是至关重要的。尤其是在处理大量数据或执行复杂操作期间，确保用户有一个流畅的加载体验不仅可以提高用户的满意度，还能有效减少等待过程中的焦虑感。

加载动画作为一种有效的沟通工具，它不仅能告知用户系统正在工作，还能够通过视觉上的吸引力来增强整体用户体验。

需求分析

在实现加载动画时，开发者通常会遇到两种主要方法，但它们都存在一定的局限性：

直接添加遮罩层：此方法涉及在控件之上叠加一个半透明的遮罩层，并在此层上展示加载动画。尽管这种方法能满足基本需求，但它要求为每次使用单独编写和管理显示/隐藏逻辑，这不仅增加了代码量，也容易导致代码库膨胀和维护困难。

封装成独立控件：另一种常见的做法是创建一个专门用于显示遮罩效果的控件，并将其应用于页面内容周围。虽然这种方式提高了二.基本用法

以下为示例代码，当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); }
        }
    }
}

运行效果

高级用法

1、frameworkelementextension.isloading只能在grid上使用吗？

答：no，几乎所有控件都可以使用，window、page、usercontrol、panel、button、rectangle、path、textbox等等，都没问题，只需要将isloading设置为true，就会出现loading效果。

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>