当前位置：网站首页>老板加薪！看我做的WPF Loading！！！
老板加薪！看我做的WPF Loading！！！
2022-08-10 14:31:00 【yanjinhua】
老板加薪！看我做的WPF Loading！！！
控件名：RingLoading
作者：WPFDevelopersOrg
原文链接： https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal
框架使用 大于等于 .NET40；Visual Studio 2022;项目使用 MIT 开源许可协议； 最外层使用 Viewbox为父控件内部嵌套创建三组 Grid -> Ellipse 、 Border分别给它们指定不同的 Angle从左侧开始-135 225 54，做永久 Angle 动画；如何绘制；
对 Ellipse的 StrokeDashArray进行设置 23 100就能达到效果；
1）RingLoading.cs代码如下；
using System.Windows;
using System.Windows.Controls;
namespace WPFDevelopers.Controls
{
public class RingLoading : Control
{
// Using a DependencyProperty as the backing store for IsStart. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsStartProperty =
DependencyProperty.Register("IsStart", typeof(bool), typeof(RingLoading), new PropertyMetadata(default));
// Using a DependencyProperty as the backing store for ProgressValue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ProgressValueProperty =
DependencyProperty.Register("ProgressValue", typeof(double), typeof(RingLoading),
new PropertyMetadata(0d, OnProgressValueChangedCallBack));
// Using a DependencyProperty as the backing store for Progress. This enables animation, styling, binding, etc...
internal static readonly DependencyProperty ProgressProperty =
DependencyProperty.Register("Progress", typeof(string), typeof(RingLoading), new PropertyMetadata(default));
// Using a DependencyProperty as the backing store for Maximum. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MaximumProperty =
DependencyProperty.Register("Maximum", typeof(double), typeof(RingLoading),
new PropertyMetadata(100d, OnMaximumPropertyChangedCallBack));
// Using a DependencyProperty as the backing store for Description. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DescriptionProperty =
DependencyProperty.Register("Description", typeof(string), typeof(RingLoading),
new PropertyMetadata(default));
static RingLoading()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(RingLoading),
new FrameworkPropertyMetadata(typeof(RingLoading)));
}
public bool IsStart
{
get => (bool)GetValue(IsStartProperty);
set => SetValue(IsStartProperty, value);
}
public double ProgressValue
{
get => (double)GetValue(ProgressValueProperty);
set => SetValue(ProgressValueProperty, value);
}
internal string Progress
{
get => (string)GetValue(ProgressProperty);
set => SetValue(ProgressProperty, value);
}
public double Maximum
{
get => (double)GetValue(MaximumProperty);
set => SetValue(MaximumProperty, value);
}
public string Description
{
get => (string)GetValue(DescriptionProperty);
set => SetValue(DescriptionProperty, value);
}
private static void OnProgressValueChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (!(d is RingLoading control))
return;
if (!double.TryParse(e.NewValue?.ToString(), out var value))
return;
var progress = value / control.Maximum;
control.SetCurrentValue(ProgressProperty, progress.ToString("P0"));
}
private static void OnMaximumPropertyChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (!(d is RingLoading control))
return;
if (!double.TryParse(e.NewValue?.ToString(), out var maxValue))
return;
if (maxValue <= 0)
return;
var progress = control.ProgressValue / maxValue;
control.SetCurrentValue(ProgressProperty, progress.ToString("P0"));
}
}
}
2）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>
3）RingLoadingExample.xaml代码如下；
<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.RingLoadingExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers"
xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<wpfdev:RingLoading IsStart="true"
Width="400" Height="400"
Description="WPFDevelopers" Foreground="Black" ProgressValue="50"/>
</Grid>
</UserControl>
RingLoading|Github[1]
RingLoading|码云[2]
RingLoading.xaml|Github[3]
RingLoading.xaml|码云[4]
参考资料
ThemeControl|Github: https://github.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers/Controls/Loadings/RingLoading.cs
[2]ThemeControl|码云: https://gitee.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers/Controls/Loadings/RingLoading.cs
[3]Styles.ThemeControl.xaml|Github: https://github.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers/Themes/LoadingGroup.xaml
[4]Styles.ThemeControl.xaml|码云: https://gitee.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers/Themes/LoadingGroup.xaml
边栏推荐
- 统信 UOS V20 专业版（1050update2）发布：文件共享、全局搜索等优化
- 文件系统设计
- CSP-J1 CSP-S1 初赛 第1轮（2022.08.09）
- 1004 (tree array + offline operation + discretization)
- 图式图例规范尺寸
- 1004（树状数组+离线操作+离散化）
- 2022-08-10 Daily: Swin Transformer author Cao Yue joins Zhiyuan to carry out research on basic vision models
- 注意力模型---Attention Model
- vue 怎么清除tab 切换缓存问题 ？
- MQTT服务器搭建
猜你喜欢
这一次，话筒给你：向自由软件之父斯托曼 提问啦！
使用决策树对鸢尾花进行分类
Flask框架——MongoEngine使用MongoDB数据库
2022年中国软饮料市场洞察
DB2查询2个时间段之间的所有月份,DB2查询2个时间段之间的所有日期
系统架构系列文章三--解决传统企业核心系统的性能问题
机器学习总结（一）
Error: Rule can only have one resource source (provided resource and test + include + exclude)
易观分析联合中小银行联盟发布海南数字经济指数，敬请期待！
PyTorch multi-machine multi-card training: DDP combat and skills
随机推荐
Open source SPL wipes out tens of thousands of database intermediate tables
MySQL advanced (thirty-three) MySQL data table adding fields
BFT机器人带你走进智慧生活 ——探索遨博机器人i系列的多种应用
$‘\r‘: command not found
leetcode 739. Daily Temperatures 每日温度(中等)
C＃实现访问OPC UA服务器
【MinIO】Using tools
systemui状态栏添加新图标
中学数学建模书籍及相关的视频等（2022.08.09）
How does vue clear the tab switching cache problem?
Error: Rule can only have one resource source (provided resource and test + include + exclude)
高薪程序员＆面试题精讲系列135之你对分布式是怎么理解的？CAP理论你知道吗？
借数据智能，亚马逊云科技助力企业打造品牌内生增长力
PyTorch multi-machine multi-card training: DDP combat and skills
1W字详解线程本地存储 ThreadLocal
2022-08-10 Daily: Swin Transformer author Cao Yue joins Zhiyuan to carry out research on basic vision models
快速了解大端模式和小端模式
2011年下半年 系统架构设计师 下午试卷 II
【Gazebo入门教程】第三讲 SDF文件的静/动态编程建模
自定义picker滚动选择器样式