WPF 实现一个酷酷的Loading

WPF开发者QQ群： 340500857 | 微信群 -> 进入公众号主页 加入组织

由于微信群人数太多入群请添加小编微信号

（yanjinhuawechat）或（W_Feng_aiQ）邀请入群

（需备注WPF开发者）

PS：有更好的方式欢迎推荐。

—

代码如下

一、创建 RingLoading.cs 继承 Control代码如下。

using System.Windows;
using System.Windows.Controls;namespace WPFDevelopers.Controls
{public class RingLoading : Control{static RingLoading(){DefaultStyleKeyProperty.OverrideMetadata(typeof(RingLoading), new FrameworkPropertyMetadata(typeof(RingLoading)));}public bool IsStart{get { return (bool)GetValue(IsStartProperty); }set { SetValue(IsStartProperty, value); }}public static readonly DependencyProperty IsStartProperty =DependencyProperty.Register("IsStart", typeof(bool), typeof(RingLoading), new PropertyMetadata(default));public double Progress{get { return (double)GetValue(ProgressProperty); }set { SetValue(ProgressProperty, value); }}public static readonly DependencyProperty ProgressProperty =DependencyProperty.Register("Progress", typeof(double), typeof(RingLoading), new PropertyMetadata(default));public double Maximum{get { return (double)GetValue(MaximumProperty); }set { SetValue(MaximumProperty, value); }}public static readonly DependencyProperty MaximumProperty =DependencyProperty.Register("Maximum", typeof(double), typeof(RingLoading), new PropertyMetadata(1d));public string Description{get { return (string)GetValue(DescriptionProperty); }set { SetValue(DescriptionProperty, value); }}public static readonly DependencyProperty DescriptionProperty =DependencyProperty.Register("Description", typeof(string), typeof(RingLoading), new PropertyMetadata(default));}
}

二、RingLoading.xaml 代码如下

<Style TargetType="controls:RingLoading" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="controls:RingLoading"><ControlTemplate.Resources><Storyboard x:Key="PART_Resource_Storyboard" RepeatBehavior="Forever"><DoubleAnimation To="-495" Duration="0:0:1.5" Storyboard.TargetName="PART_Ring1"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"/><DoubleAnimation To="585" Duration="0:0:1.5" Storyboard.TargetName="PART_Ring2"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"/><DoubleAnimation To="-315" Duration="0:0:1.5" Storyboard.TargetName="PART_Ring3"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"/></Storyboard></ControlTemplate.Resources><Grid><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Viewbox HorizontalAlignment="Center" VerticalAlignment="Center" ><Border Padding="10" Width="100" Height="100" ><Grid><Grid x:Name="PART_Ring1" Width="60" Height="60" HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"><Grid.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform Angle="-135"/><TranslateTransform/></TransformGroup></Grid.RenderTransform><Ellipse Stroke="Red" StrokeThickness="2" StrokeDashArray="23 100" RenderTransformOrigin="0.5,0.5"/><Border Width="10" Height="10" CornerRadius="10" Background="Red" HorizontalAlignment="Right" Margin="0,0,-4,0"><Border.Effect><DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="Red"/></Border.Effect></Border></Grid><Grid x:Name="PART_Ring2" Width="60" Height="60" HorizontalAlignment="Left" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5"><Grid.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform Angle="225"/><TranslateTransform/></TransformGroup></Grid.RenderTransform><Ellipse Stroke="Purple" StrokeThickness="2" StrokeDashArray="23 100"/><Border Width="10" Height="10" CornerRadius="10" Background="Purple" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,-4"><Border.Effect><DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="Purple"/></Border.Effect></Border></Grid><Grid x:Name="PART_Ring3" Width="60" Height="60" HorizontalAlignment="Right" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5"><Grid.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform Angle="45"/><TranslateTransform/></TransformGroup></Grid.RenderTransform><Ellipse Stroke="#0fb8b2" StrokeThickness="2" StrokeDashArray="23 100"/><Border Width="10" Height="10" CornerRadius="10" Background="#0fb8b2" HorizontalAlignment="Right" Margin="0,0,-4,0"><Border.Effect><DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="#0fb8b2"/></Border.Effect></Border></Grid></Grid></Border></Viewbox><StackPanel Grid.Row="1" Grid.ColumnSpan="2" Margin="10"><TextBlock HorizontalAlignment="Center" Text="Loading..." Margin="0,0,0,15"/><TextBlock HorizontalAlignment="Center" Text="{TemplateBinding Description}" Margin="0,0,0,15"/><TextBlock HorizontalAlignment="Center" Text="{TemplateBinding Progress}" FontSize="{StaticResource TitleFontSize}" FontWeight="Bold"/></StackPanel></Grid><ControlTemplate.Triggers><Trigger Property="IsStart" Value="True"><Trigger.EnterActions><BeginStoryboard Storyboard="{StaticResource PART_Resource_Storyboard}" x:Name="PART_BeginStoryboard"/></Trigger.EnterActions><Trigger.ExitActions><StopStoryboard BeginStoryboardName="PART_BeginStoryboard"/></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

—

效果预览

鸣谢素材提供者 - 吴锋

源码地址如下

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者出处 https://github.com/yanjinhuagood