版权声明：我不生产代码，我只是代码的搬运工。 https://blog.csdn.net/qq_43307934/article/details/86523882
效果：
新增一个用户控件
1、前台
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Canvas x:Name="root"
Grid.Row="0"
Height="6">
<Ellipse x:Name="e1"
Width="6"
Height="6"
Fill="Yellow"
Canvas.Left="-6"></Ellipse>
<Ellipse x:Name="e2"
Width="6"
Height="6"
Fill="Yellow"
Canvas.Left="-6"></Ellipse>
<Ellipse x:Name="e3"
Width="6"
Height="6"
Fill="Yellow"
Canvas.Left="-6"></Ellipse>
<Ellipse x:Name="e4"
Width="6"
Height="6"
Fill="Yellow"
Canvas.Left="-6"></Ellipse>
<Ellipse x:Name="e5"
Width="6"
Height="6"
Fill="Yellow"
Canvas.Left="-6"></Ellipse>
<Ellipse x:Name="e6"
Width="6"
Height="6"
Fill="Yellow"
Canvas.Left="-6"></Ellipse>
</Canvas>
<TextBlock Grid.Row="1"
Text="正 在 加 载..."
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"></TextBlock>
</Grid>2、后台
public partial class PointProgressBar : UserControl
{
public PointProgressBar()
{
InitializeComponent();
this.Loaded += PointProgressBar_Loaded;
}
private Storyboard sb = null;
private double value2 = 200;//中间距离
void PointProgressBar_Loaded(object sender, RoutedEventArgs e)
{
if (sb == null)
{
sb = new Storyboard();
}
double value3 = this.root.ActualWidth;//获取容器呈现宽度
double value1 = (value3 - value2) / 2;//计算第一段移动距离
sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0), e1));
sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.2), e2));
sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.4), e3));
sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.6), e4));
sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.8), e5));
sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(1.0), e6));
sb.RepeatBehavior = RepeatBehavior.Forever;
sb.Begin();
}
/// <summary>
///
/// </summary>
/// <param name="value1">第一阶段移动距离</param>
/// <param name="value2">第二阶段移动距离</param>
/// <param name="value3">第三阶段移动距离</param>
/// <param name="startTime">动画开始时间</param>
/// <param name="element">目标元素</param>
/// <returns>DoubleAnimationUsingKeyFrames</returns>
private DoubleAnimationUsingKeyFrames EllipseAnimation(double value1, double value2, double value3, TimeSpan startTime, UIElement element)
{
DoubleAnimationUsingKeyFrames doubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();
doubleAnimationUsingKeyFrames.BeginTime = startTime;
EasingDoubleKeyFrame easingDoubleKeyFrame1 = new EasingDoubleKeyFrame();
easingDoubleKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5));
easingDoubleKeyFrame1.Value = value1;
EasingDoubleKeyFrame easingDoubleKeyFrame2 = new EasingDoubleKeyFrame();
easingDoubleKeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.1));
easingDoubleKeyFrame2.Value = value2;
EasingDoubleKeyFrame easingDoubleKeyFrame3 = new EasingDoubleKeyFrame();
easingDoubleKeyFrame3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.6));
easingDoubleKeyFrame3.Value = value3;
doubleAnimationUsingKeyFrames.KeyFrames.Add(easingDoubleKeyFrame1);
doubleAnimationUsingKeyFrames.KeyFrames.Add(easingDoubleKeyFrame2);
doubleAnimationUsingKeyFrames.KeyFrames.Add(easingDoubleKeyFrame3);
Storyboard.SetTarget(doubleAnimationUsingKeyFrames, element);
Storyboard.SetTargetProperty(doubleAnimationUsingKeyFrames, new PropertyPath("(Canvas.Left)"));
return doubleAnimationUsingKeyFrames;
}
}3、调用
PointProgressBar pon = new PointProgressBar();
pon.Width = 300;
pon.Height = 30;
pon.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
xamlgrid.Children.Add(pon);4、另一种加载样式
效果：
代码：
<Viewbox>
<Grid Height="800"
Width="800">
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<!--Rect1-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect1"
Duration="0:0:1"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<!--Rect2-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect2"
Duration="0:0:0.125"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.125"
Storyboard.TargetName="Rect2"
Duration="0:0:0.875"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#20FFFFFF" />
<!--Rect3-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect3"
Duration="0:0:0.250"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.250"
Storyboard.TargetName="Rect3"
Duration="0:0:0.750"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#40FFFFFF" />
<!--Rect4-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect4"
Duration="0:0:0.375"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.375"
Storyboard.TargetName="Rect4"
Duration="0:0:0.625"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#60FFFFFF" />
<!--Rect5-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect5"
Duration="0:0:0.500"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.500"
Storyboard.TargetName="Rect5"
Duration="0:0:0.500"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#80FFFFFF" />
<!--Rect6-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect6"
Duration="0:0:0.625"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.625"
Storyboard.TargetName="Rect6"
Duration="0:0:0.375"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#A0FFFFFF" />
<!--Rect7-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect7"
Duration="0:0:0.750"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.750"
Storyboard.TargetName="Rect7"
Duration="0:0:0.250"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#C0FFFFFF" />
<!--Rect8-->
<ColorAnimation BeginTime="0:0:0.0"
Storyboard.TargetName="Rect8"
Duration="0:0:0.875"
Storyboard.TargetProperty="Fill.Color"
To="#00FFFFFF" />
<ColorAnimation BeginTime="0:0:0.875"
Storyboard.TargetName="Rect8"
Duration="0:0:0.125"
Storyboard.TargetProperty="Fill.Color"
From="#FFFFFFFF"
To="#E0FFFFFF" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Rectangle x:Name="Rect1"
Height="200"
Width="120"
Fill="#FFFFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:IsLocked="True" />
<Rectangle x:Name="Rect2"
Height="200"
Width="120"
Fill="#20FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="45" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Rect3"
Height="200"
Width="120"
Fill="#40FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="90" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Rect4"
Height="200"
Width="120"
Fill="#60FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="135" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Rect5"
Height="200"
Width="120"
Fill="#80FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="180" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Rect6"
Height="200"
Width="120"
Fill="#A0FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="225" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Rect7"
Height="200"
Width="120"
Fill="#C0FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="270" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Rect8"
Height="200"
Width="120"
Fill="#E0FFFFFF"
RadiusY="60"
RadiusX="60"
VerticalAlignment="Top"
d:LayoutOverrides="Width"
RenderTransformOrigin="0.5,2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="315" />
<TranslateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Viewbox>5、还有一种样式
效果：
<Grid x:Name="loading"
Visibility="Visible"
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>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.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>
<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>对应的后台
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);
}
}