可能是迄今为止最好用的WPF加载动画功能(没有之一)

可能是迄今为止最好用的WPF加载动画功能(没有之一)已关闭评论
67 次浏览

A+

所属分类：.NET技术

摘要

前言　　当我们在开发应用程序时，用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时，为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式，它不仅能够告知用户应用程序正在进行工作，还能够缓解用户在等待过程中的焦虑感。

便宜好用的国外VPS推荐

前言

　　当我们在开发应用程序时，用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时，为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式，它不仅能够告知用户应用程序正在进行工作，还能够缓解用户在等待过程中的焦虑感。

一.需求分析

开发一个加载动画比较常见的做法一般有以下两种。

一种是直接在控件的上层添加一层半透明遮罩，在遮罩上面显示加载动画，需要显示加载效果的时候将这个遮罩显示出来，加载完成以后隐藏这个遮罩，这种方式虽然也能实现需求，但是缺点也很明显，每次要使用加载效果的时候都需要单独添加遮罩代码，单独写控制显示和隐藏的代码，一个项目页面那么多，每次都这样整，那不得把人整崩溃了。

还有一种实现方式是开发一个控件，在这个控件当中实现遮罩的效果，然后用这个控件把页面内容包起来，这样直接控制这个控件的属性就能实现遮罩效果，这也是很多第三方控件库的实现方式。这种方式在易用性上虽然有所提升，但是还是有上面的问题，每个要用的地方都得Copy一次代码。

今天我们这里使用第三种方式，那就是使用装饰器来实现这个功能，它的优点就是对源代码侵入很小，不用每次使用都Copy大段代码，并且可扩展性非常强。

二.基本用法

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

运行效果：

可能是迄今为止最好用的WPF加载动画功能(没有之一)

三、高级用法

2.1 FrameworkElementExtension.IsLoading只能在Grid上使用吗？

答：No，几乎所有控件都可以使用，Window、Page、UserControl、Panel、Button、Rectangle、Path、TextBox等等，都没问题，只需要将IsLoading设置为True，就会出现Loading效果。

2.2 我觉得加载动画不好看，有没有办法换成其它的？

答：当然可以，除了默认加载效果以外，还可以添加任意你喜欢的效果，不管它是文字、动画、视频、gif图片还是其它的东西，通通都可以，并且操作非常简单，一共有两种方式。

方式一：统一添加的方式

只需在Resources中添加一个名为MaskContent的资源，在触发加载遮罩显示的时候就会自动读取该资源作为动画元素，如果放在App.Resources中，整个项目所有加载效果都使用该资源，如果放在Window.Resources中，Window中的所有加载效果都使用该资源，以此类推。以下都是合法的代码。

添加自定义动画效果（用户控件）

<Window.Resources>     <controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" /> </Window.Resources>

可能是迄今为止最好用的WPF加载动画功能(没有之一)

添加文字

<Window.Resources>     <TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" /> </Window.Resources>

可能是迄今为止最好用的WPF加载动画功能(没有之一)

添加进度条控件

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

可能是迄今为止最好用的WPF加载动画功能(没有之一)

方式二：单独添加的方式

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