WPF 实现一个酷酷的Loading

最新推荐文章于 2023-12-27 15:05:43 发布

dotNET跨平台

最新推荐文章于 2023-12-27 15:05:43 发布

阅读量507

点赞数

文章标签： github python javascript html css3

原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654086872&idx=3&sn=182cdd35561930ca638e7dcb34a9e8c6&chksm=80d8028db7af8b9b67bf9ec767cfb0a24d7e4a0dca992b4e928d475c9a9ba73e3a20eb98a474&scene=126&&sessionid=0

版权

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