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相关推荐

  1. 一个超酷的横向多列响应式布局效果

    日期:2013-1-26  来源:GBin1.com 在线演示 还记得上周介绍的一个超酷的星际争霸2视差滚动效果吧,如果你希望生成一个类似ipad效果的漂亮横向多列响应式滚动效果的话,那么你可以考虑使 ...

  2. Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面

    本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面 我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面,所以不用多说,让我们开始吧.在本课程 ...

  3. 一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单

    高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...

  4. java比较炫的登录界面_教你写一个炫酷的Material Design 风格的登录和注册页面

    每个人都会喜欢漂亮的登录界面,一个App 给人们的第一印象是非常重要的. 这篇文章将教你使用谷歌材料设计规范(Material design spec )和谷歌的新的设计支持库( design sup ...

  5. 一个炫酷的二维码生成项目附源码

    前阵子打算换一个炫酷的公众号二维码,无奈市面上很多的二维码修改器都不尽人意. 草料二维码也挺炫酷的,但是也没有满意的效果. 于是又去万能的github逛了一下,终于找到了一款开源的二维码修改器. 这个 ...

  6. 如何做一个炫酷的动画网站-css实现图片上下浮动效果

    目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...

  7. 用python写跑酷游戏脚本,用Python写一个天天酷跑

    感觉上次写的植物大战僵尸与俄罗斯方块的反应还不错,这次这个文章就更有动力了 这次就写一个天天酷跑吧 写出来的效果图就是这样了 下面就更新一下全部的代码吧 还是老样子先定义`import pygame, ...

  8. 使用Python写一个天天酷跑

    感觉上次写的植物大战僵尸与俄罗斯方块的反应还不错,这次这个文章就更有动力了 这次就写一个天天酷跑吧 写出来的效果图就是这样了 下面就更新一下全部的代码吧 还是老样子先定义 import pygame, ...

  9. 用Python写一个天天酷跑

    感觉上次写的植物大战僵尸与俄罗斯方块的反应还不错,这次这个文章就更有动力了 这次就写一个天天酷跑吧 Python源码.问题解答学习交流群:773162165 写出来的效果图就是这样了 下面就更新一下全 ...

  10. python实现动态壁纸_流弊了!竟然用Python做一个炫酷的小姐姐动态壁纸

    原标题:流弊了!竟然用Python做一个炫酷的小姐姐动态壁纸 公众号关注 " 菜鸟学Python" 设为 "星标",每天带你玩转Python! (女神IU,图片 ...

最新文章

  1. RANet : 分辨率自适应网络效果和性能的best trade-off | CVPR 2020
  2. ACCESS的Ole对象读取
  3. 组合恒等式3 母函数与形式幂级数的运算
  4. linux 下去掉^M
  5. 【机器学习基础】机器学习和深度学习的练习数据
  6. 前端工程师面试题JavaScript部分(第二季)
  7. Android之判断是否有网封装类
  8. Spring MVC教程
  9. [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第13篇]概述投影点表达的用途的优点
  10. UI培训之零基础如何自学UI设计?
  11. C#学习笔记_14_接口命名空间
  12. python的单元测试unittest模块
  13. 利用Fiddler作为网络代理
  14. 黑苹果USB外置声卡无法使用
  15. 《嵌入式 - 嵌入式大杂烩》详解ROM和RAM
  16. Mac Workbench建数据库关系图
  17. Arm电脑出现【GLFWError】WGL: The driver does not appear to support OpenGL问题解决
  18. html基本标签斜体,请选择产生斜体字的HTML标签:
  19. 【开源】我和 JAP(JA Plus) 的故事
  20. VUE 项目实现大屏展示的响应式

热门文章

  1. Django学习笔记(4)
  2. mysql忘记密码,怎么办?
  3. wpa_supplicant 无线网络配置
  4. linux limit
  5. 【转载】 quartus中调用modelsim仿真的方法
  6. PHP检测远端文件是否存在
  7. Java 打飞机(小游戏)[版权非本人 本人制作收藏整理]
  8. h5 端图片上传-模拟多张上传
  9. Java线程与Linux内核线程的映射关系
  10. ReactNative--React简介