WPF 实现一个酷酷的Loading
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WPF 实现一个酷酷的Loading相关的知识，希望对你有一定的参考价值。
WPF开发者QQ群： 340500857 | 微信群 -> 进入公众号主页 加入组织
由于微信群人数太多入群请添加小编微信号
（yanjinhuawechat）或（W_Feng_aiQ）邀请入群
（需备注WPF开发者）
PS：有更好的方式欢迎推荐。
01
—
代码如下
一、创建 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>02
—
效果预览
鸣谢素材提供者 - 吴锋
源码地址如下
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
扫一扫关注我们，
更多知识早知道！
点击阅读原文可跳转至源代码
以上是关于WPF 实现一个酷酷的Loading的主要内容，如果未能解决你的问题，请参考以下文章