項目中用到不少后臺數據請求需要前端等待，添加加載動畫改善用戶體驗

一、動畫界面制作

添加一個自定義控件

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:CustomCtrlLib"><Storyboard x:Key="StoryLeftToRight" RepeatBehavior="Forever" Duration="00:00:01.50"><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C0"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="1.0" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C1"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.9" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C2"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.8" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C3"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.7" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C4"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.6" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C5"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.5" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C6"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.4" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C7"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.3" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C8"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.2" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="C9"Storyboard.TargetProperty="(FrameworkElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.1" /><SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="1.0" /><SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0.9" /><SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0.8" /><SplineDoubleKeyFrame KeyTime="00:00:00.60" Value="0.7" /><SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="0.6" /><SplineDoubleKeyFrame KeyTime="00:00:00.90" Value="0.5" /><SplineDoubleKeyFrame KeyTime="00:00:01.05" Value="0.4" /><SplineDoubleKeyFrame KeyTime="00:00:01.20" Value="0.3" /><SplineDoubleKeyFrame KeyTime="00:00:01.35" Value="0.2" /><SplineDoubleKeyFrame KeyTime="00:00:01.50" Value="0.1" /></DoubleAnimationUsingKeyFrames></Storyboard><Style TargetType="{x:Type local:LoadingView}"><Setter Property="Template"><Setter.Value><!--控件模板--><ControlTemplate TargetType="{x:Type local:LoadingView}"><StackPanel VerticalAlignment="Center"><Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="120"><Canvas.Triggers><EventTrigger RoutedEvent="FrameworkElement.Loaded"><BeginStoryboard Storyboard="{StaticResource StoryLeftToRight}" /></EventTrigger></Canvas.Triggers><Ellipse x:Name="C0" Width="20" Height="20" Canvas.Left="50" Canvas.Top="0" Stretch="Fill" Fill="#D8C5A5" Opacity="1.0"/><Ellipse x:Name="C1" Width="20" Height="20" Canvas.Left="20.61073738537635" Canvas.Top="9.54915028125263" Stretch="Fill" Fill="#D8C5A5" Opacity="0.9"/><Ellipse x:Name="C2" Width="20" Height="20" Canvas.Left="2.447174185242325" Canvas.Top="34.549150281252622" Stretch="Fill" Fill="#D8C5A5" Opacity="0.8"/><Ellipse x:Name="C3" Width="20" Height="20" Canvas.Left="2.4471741852423179" Canvas.Top="65.450849718747364" Stretch="Fill" Fill="#D8C5A5" Opacity="0.7"/><Ellipse x:Name="C4" Width="20" Height="20" Canvas.Left="20.610737385376332" Canvas.Top="90.450849718747364" Stretch="Fill" Fill="#D8C5A5" Opacity="0.6"/><Ellipse x:Name="C5" Width="20" Height="20" Canvas.Left="50" Canvas.Top="100" Stretch="Fill" Fill="#D8C5A5" Opacity="0.5"/><Ellipse x:Name="C6" Width="20" Height="20" Canvas.Left="79.389262614623647" Canvas.Top="90.450849718747378" Stretch="Fill" Fill="#D8C5A5" Opacity="0.4"/><Ellipse x:Name="C7" Width="20" Height="20" Canvas.Left="97.552825814757682" Canvas.Top="65.450849718747392" Stretch="Fill" Fill="#D8C5A5" Opacity="0.3"/><Ellipse x:Name="C8" Width="20" Height="20" Canvas.Left="97.552825814757682" Canvas.Top="34.549150281252643" Stretch="Fill" Fill="#D8C5A5" Opacity="0.2"/><Ellipse x:Name="C9" Width="20" Height="20" Canvas.Left="79.389262614623675" Canvas.Top="9.5491502812526363" Stretch="Fill" Fill="#D8C5A5" Opacity="0.1"/><Canvas.RenderTransform><RotateTransform x:Name="SpinnerRotate" Angle="0" /></Canvas.RenderTransform></Canvas><TextBlock Text="{TemplateBinding Message}" HorizontalAlignment="Center" FontSize="30" Foreground="#D8C5A5" Margin="0,10,0,0"></TextBlock></StackPanel></ControlTemplate></Setter.Value></Setter></Style> </ResourceDictionary>

對應類定義，添加了一個依賴屬性，可讓用戶自定義加載時顯示的文本

using System.Windows; using System.Windows.Controls;namespace CustomCtrlLib {/// <summary>/// Follow steps 1a or 1b and then 2 to use this custom control in a XAML file.////// Step 1a) Using this custom control in a XAML file that exists in the current project./// Add this XmlNamespace attribute to the root element of the markup file where it is /// to be used:////// xmlns:MyNamespace="clr-namespace:CustomCtrlLib"///////// Step 1b) Using this custom control in a XAML file that exists in a different project./// Add this XmlNamespace attribute to the root element of the markup file where it is /// to be used:////// xmlns:MyNamespace="clr-namespace:CustomCtrlLib;assembly=CustomCtrlLib"////// You will also need to add a project reference from the project where the XAML file lives/// to this project and Rebuild to avoid compilation errors:////// Right click on the target project in the Solution Explorer and/// "Add Reference"->"Projects"->[Select this project]///////// Step 2)/// Go ahead and use your control in the XAML file.////// <MyNamespace:CustomControl1/>////// </summary>public class LoadingView : Control{static LoadingView(){DefaultStyleKeyProperty.OverrideMetadata(typeof(LoadingView), new FrameworkPropertyMetadata(typeof(LoadingView)));}public static readonly DependencyProperty MessageProperty = DependencyProperty.Register("Message", typeof(string), typeof(LoadingView));/// <summary>/// 默認文本/// </summary>public string Message{get { return (string)GetValue(MessageProperty); }set { SetValue(MessageProperty, value); }}} }

二、使用時可以在最外層加個遮罩，在后臺設置Loading的值來控制動畫是否顯示

<!--Loading Mask--><Border Grid.RowSpan="2" Visibility="{Binding Path=Loading, Mode=TwoWay}" HorizontalAlignment="Stretch" Background="#004B64" Opacity="0.3" IsEnabled="False"VerticalAlignment="Stretch"><CustomLib:LoadingView Message="Loading"></CustomLib:LoadingView></Border>

三、prism中module間通信

項目中是一個主窗口里開tab頁方式，如果是tab中界面加載時，動畫是要遮住整個主窗口的，這樣遮罩定義只能放在主窗口中，就需要在tab界面中將是否顯示傳遞給主窗口。項目使用的是prism框架，在這使用Event Aggregation事件聚合實現。

添加一個事件供發布訂閱，參數是bool類型

public class LoadingSentEvent : PubSubEvent<bool>{}

在主窗口訂閱事件

private Visibility _loading = Visibility.Collapsed;public Visibility Loading{get { return _loading; }set { SetProperty(ref _loading, value); }}IEventAggregator _eventAggregator;public MainWindowViewModel(IEventAggregator eventAggregator){_eventAggregator = eventAggregator;_eventAggregator.GetEvent<LoadingSentEvent>().Subscribe(LoadingReceived);}private void LoadingReceived(bool flag){if (flag)Loading = Visibility.Visible;elseLoading = Visibility.Collapsed;}

在需要的頁面發布事件

readonly IEventAggregator _eventAggregator; _eventAggregator.GetEvent<LoadingSentEvent>().Publish(true); //顯示加載界面 _eventAggregator.GetEvent<LoadingSentEvent>().Publish(false); //隱藏加載界面

總結

以上是生活随笔為你收集整理的WPF添加加载动画遮罩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。