詳解WPF如何在基礎控件上顯示Loading等待動畫

更新時間：2023年04月13日 11:42:38 作者：WPF開發(fā)者

這篇文章主要為大家詳細介紹了WPF如何在基礎控件上顯示Loading等待動畫的效果，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以參考一下

WPF 如何在基礎控件上顯示 Loading 等待動畫

框架使用.NET4 至 .NET6；
Visual Studio 2022;
使用方式需引入命名空間后設置控件的附加屬性 wd:Loading.IsShow="true"，即可顯示默認等待動畫效果如下：

如需自定義 Loading 一定要 先設置 wd:Loading.Child 在設置 IsShow="true" 。
顯示不同 Loading 內容需 wd:Loading.Child ={x:Static wd:NormalLoading.Default} 進行復賦值顯示 NormalLoading 效果如下：

實現(xiàn)代碼

1）創(chuàng)建 BasicControlsExample.xaml 代碼如下:

<UserControl?x:Class="WPFDevelopers.Samples.ExampleViews.BasicControlsExample"
?????????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
?????????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
?????????????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"?
?????????????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"?
?????????????xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
?????????????xmlns:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers"
?????????????xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
?????????????mc:Ignorable="d"??Background="{DynamicResource?BackgroundSolidColorBrush}"
?????????????d:DesignHeight="450"?d:DesignWidth="800"?Name="MyBasicControls">
<TextBlock?Text="Loading"?FontSize="20"?Margin="0,20,0,0"/>
????????????????????<WrapPanel?Margin="0,10">
????????????????????????<Button?Content="Loading"?Click="Loading_Click"?
????????????????????????????Style="{DynamicResource?PrimaryButton}"/>
????????????????????????<Button?Name="btnLoadingTask"?Content="LoadingTask"?Click="LoadingTask_Click"?
????????????????????????????????Style="{DynamicResource?SuccessPrimaryButton}"?Margin="10,0"/>
????????????????????????<Button?Name="btnLoading"?Click="BtnLoading_Click"?Content="AddLoading"
????????????????????????????????wpfdev:Loading.Child="{x:Static?wpfdev:NormalLoading.Default}"
????????????????????????????????Style="{DynamicResource?WarningPrimaryButton}"/>
????????????????????????<Button?Name="btnOffTask"?Click="BtnOffTask_Click"?
????????????????????????????????Margin="10,0"?Content="Off?Task"
????????????????????????????????Style="{DynamicResource?DangerPrimaryButton}"/>
????????????????????</WrapPanel>
??</UserControl>

2）邏輯 BasicControlsExample.xaml.cs 代碼如下:

對控件進行等待動畫。

??private?void?Loading_Click(object?sender,?RoutedEventArgs?e)
??????{
??????????var?task?=?new?Task(()?=>?{?Thread.Sleep(5000);?});
??????????task.ContinueWith(previousTask?=>?
??????????{
??????????????Loading.SetIsShow(MyBasicControls,?false);
??????????},?
??????????TaskScheduler.FromCurrentSynchronizationContext());
??????????Loading.SetIsShow(MyBasicControls,?true);
??????????task.Start();
??????}

基礎控件上添加等待動畫。

private?void?BtnLoading_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????var?task?=?new?Task(()?=>?{?Thread.Sleep(5000);?});
????????????task.ContinueWith(previousTask?=>?{?Loading.SetIsShow(btnLoading,?false);?},?TaskScheduler.FromCurrentSynchronizationContext());
????????????Loading.SetIsShow(btnLoading,?true);
????????????task.Start();
????????}

關閉基礎控件的等待動畫。

?private?void?BtnOffTask_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????if?(tokenSource?==?null)?return;
????????????tokenSource.Cancel();
????????????Loading.SetIsShow(btnLoadingTask,?false);
????????}
????????private?CancellationTokenSource?tokenSource;

????????private?void?LoadingTask_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????tokenSource?=?new?CancellationTokenSource();
????????????var?cancellationToken?=?tokenSource.Token;

????????????var?task?=?new?Task(()?=>
????????????{
????????????????for?(int?i?=?0;?i?<?10;?i++)
????????????????{
????????????????????//這里做自己的事情
????????????????????if?(tokenSource.IsCancellationRequested)
????????????????????????return;
????????????????????Thread.Sleep(1000);
????????????????}
????????????},?cancellationToken);
????????????task.ContinueWith(previousTask?=>
????????????{
????????????????if?(tokenSource.IsCancellationRequested)
????????????????????return;
????????????????Loading.SetIsShow(btnLoadingTask,?false);
????????????},?TaskScheduler.FromCurrentSynchronizationContext());
????????????Loading.SetIsShow(btnLoadingTask,?true);
????????????task.Start();
????????}

效果圖