前言
當我們在開發(fā)應用程序時，用戶體驗往往是至關重要的一環(huán)。在應用程序加載大量數(shù)據(jù)或執(zhí)行復雜操作時，為用戶提供一個良好的加載體驗變得至關重要。加載動畫是其中一個有效的方式，它不僅能夠告知用戶應用程序正在進行工作，還能夠緩解用戶在等待過程中的焦慮感。
一.需求分析
? ? 開發(fā)一個加載動畫比較常見的做法一般有以下兩種。
????一種是直接在控件的上層添加一層半透明遮罩，在遮罩上面顯示加載動畫，需要顯示加載效果的時候?qū)⑦@個遮罩顯示出來，加載完成以后隱藏這個遮罩，這種方式雖然也能實現(xiàn)需求，但是缺點也很明顯，每次要使用加載效果的時候都需要單獨添加遮罩代碼，單獨寫控制顯示和隱藏的代碼，一個項目頁面那么多，每次都這樣整，那不得把人整崩潰了。
????還有一種實現(xiàn)方式是開發(fā)一個控件，在這個控件當中實現(xiàn)遮罩的效果，然后用這個控件把頁面內(nèi)容包起來，這樣直接控制這個控件的屬性就能實現(xiàn)遮罩效果，這也是很多第三方控件庫的實現(xiàn)方式。這種方式在易用性上雖然有所提升，但是還是有上面的問題，每個要用的地方都得Copy一次代碼。
????今天我們這里使用第三種方式，那就是使用裝飾器來實現(xiàn)這個功能，它的優(yōu)點就是對源代碼侵入很小，不用每次使用都Copy大段代碼，并且可擴展性非常強。
二.基本用法
以下為示例代碼，當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); } } } }
運行效果：
三、高級用法
2.1 FrameworkElementExtension.IsLoading只能在Grid上使用嗎？
答：No，幾乎所有控件都可以使用，Window、Page、UserControl、Panel、Button、Rectangle、Path、TextBox等等，都沒問題，只需要將IsLoading設置為True，就會出現(xiàn)Loading效果。
?
2.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>
?四.綜合案例
文章來源：http://www.zghlxwxcb.cn/news/detail-844097.html
如需以上代碼，請到群(661224882)共享文件中下載文章來源地址http://www.zghlxwxcb.cn/news/detail-844097.html
到了這里，關于可能是迄今為止最好用的WPF加載動畫功能(沒有之一)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
