参考自：
https://blog.csdn.net/zhumingyan/article/details/50294905
后台代码：
BackgroundWorker bgMeet; private void button1_Click(object sender, RoutedEventArgs e) { bgMeet = new BackgroundWorker(); //能否报告进度更新 bgMeet.WorkerReportsProgress = true; //要执行的后台任务 bgMeet.DoWork += new DoWorkEventHandler(bgMeet_DoWork); //进度报告方法 bgMeet.ProgressChanged += new ProgressChangedEventHandler(bgMeet_ProgressChanged); //后台任务执行完成时调用的方法 bgMeet.RunWorkerCompleted += new RunWorkerCompletedEventHandler(bgMeet_RunWorkerCompleted); bgMeet.RunWorkerAsync(); //任务启动 } //执行任务 void bgMeet_DoWork(object sender, DoWorkEventArgs e) { //开始播放等待动画 this.Dispatcher.Invoke(new Action(() => { loading.Visibility = System.Windows.Visibility.Visible; })); //开始后台任务 GetData(); } //报告任务进度 void bgMeet_ProgressChanged(object sender, ProgressChangedEventArgs e) { this.Dispatcher.Invoke(new Action(() => { this.lab_pro.Content = e.ProgressPercentage + "%"; })); } //任务执行完成后更新状态 void bgMeet_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) { loading.Visibility = System.Windows.Visibility.Collapsed; this.Dispatcher.Invoke(new Action(() => { this.lab_pro.Content = "完成"; })); } //模拟耗时任务 public void GetData() { for (int i = 0; i < 6; i++) { bgMeet.ReportProgress(20 * i); System.Threading.Thread.Sleep(400); } }
前端代码：
<Window x:Class="loading.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:loading" mc:Ignorable="d" Title="后台忙" Height="94.635" Width="197.361"> <!--<Grid> <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="41,20,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" /> <DataGrid AutoGenerateColumns="False" Height="99" HorizontalAlignment="Left" Margin="40,70,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="441" /> <Canvas Name="loading" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="120" Margin="187,76,241,85"> <Ellipse Width="15" Height="15" Canvas.Left="55" Canvas.Top="31" Stretch="Fill" Fill="#FFD1D1F7" Opacity="1.0"/> <Ellipse Width="15" Height="15" Canvas.Left="38" Canvas.Top="39" Stretch="Fill" Fill="Blue" Opacity="0.8"/> <Ellipse Width="15" Height="15" Canvas.Left="36" Canvas.Top="58" Stretch="Fill" Fill="#FF0000FE" Opacity="0.7"/> <Ellipse Width="15" Height="15" Canvas.Left="52" Canvas.Top="67" Stretch="Fill" Fill="Blue" Opacity="0.6"/> <Ellipse Width="15" Height="15" Canvas.Left="68" Canvas.Top="61" Stretch="Fill" Fill="#FF2E2EFF" Opacity="0.5"/> <Ellipse Width="15" Height="15" Canvas.Left="69" Canvas.Top="42" Stretch="Fill" Fill="#FF6F6FFF" Opacity="0.4"/> <Canvas.RenderTransform> <RotateTransform x:Name="SpinnerRotate" Angle="0" /> </Canvas.RenderTransform> <Canvas.Triggers> <EventTrigger RoutedEvent="ContentControl.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="SpinnerRotate" Storyboard.TargetProperty="(RotateTransform.Angle)" From="0" To="360" Duration="0:0:0.8" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> </Canvas> <Label Name="lab_pro" Content="Label" Height="28" Margin="140,14,315,239" /> </Grid>--> <Grid > <Button Content ="开始" HorizontalAlignment="Left" Margin="10,10,0,0" Name ="button1" VerticalAlignment="Top" Click="button1_Click" Width ="48" /> <Label Name ="lab_pro" Content="" Height="25" VerticalAlignment ="Top" HorizontalAlignment="Left" Margin="80,20,0,0" /> <!--动画代码，只要填写name属性即可--> <Grid Name ="loading" Visibility="Collapsed" Height="41" Grid.Row ="0" VerticalAlignment="Top" Margin="126,10,0,0" HorizontalAlignment="Left" Width ="42"> <Grid.Resources> <DrawingBrush x:Key="brush" Stretch="None" AlignmentX ="Center" AlignmentY="Top"> <DrawingBrush.Drawing> <GeometryDrawing Brush ="Black"> <GeometryDrawing.Geometry> <EllipseGeometry RadiusX ="2" RadiusY="5"/> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Grid.Resources> <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="0"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="30"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="60"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="90"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="120"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="150"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="180"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="210"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="240"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="270"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="300"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity ="0.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle ="330"/> </Rectangle.RenderTransform> </Rectangle> <Grid.Triggers> <EventTrigger RoutedEvent ="Grid.Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior ="Forever"> <DoubleAnimation Storyboard.TargetName ="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.00000" To="0"/> <DoubleAnimation Storyboard.TargetName ="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.08333" To="0"/> <DoubleAnimation Storyboard.TargetName ="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.16666" To="0"/> <DoubleAnimation Storyboard.TargetName ="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.24999" To="0"/> <DoubleAnimation Storyboard.TargetName ="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.33332" To="0"/> <DoubleAnimation Storyboard.TargetName ="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.41665" To="0"/> <DoubleAnimation Storyboard.TargetName ="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.49998" To="0"/> <DoubleAnimation Storyboard.TargetName ="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.58331" To="0"/> <DoubleAnimation Storyboard.TargetName ="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.66664" To="0"/> <DoubleAnimation Storyboard.TargetName ="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.74997" To="0"/> <DoubleAnimation Storyboard.TargetName ="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.83330" To="0"/> <DoubleAnimation Storyboard.TargetName ="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.91663" To="0"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Grid.Triggers> </Grid> </Grid > </Window>