WPF的一个Loading动画

原创 已于 2024-11-19 11:34:14 修改 · 756 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
WPF

当前文章被收录于：

WPF
7 篇文章 0 人学习
订阅专栏 查看详情
于 2024-08-09 15:32:59 首次发布

凑合用吧，wpf的loading动画挺多的，好不容易自己写了点得记下来。

记在别的地方还容易找不到，就记在这里吧。。

先放几个图，gif弄起来太麻烦了，我直接截图吧，1-》2-》3-》1-》2-》3这样看，眨眼补帧就好。

xaml：

    <Style TargetType="{x:Type cc:Loading}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type cc:Loading}">
                    <Border>
                        <Border.Resources>
                            <Storyboard x:Key="BaseEllipseAnimation" RepeatBehavior="Forever">
                                <!-- 透明度动画 -->
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.8" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" />
                                </DoubleAnimationUsingKeyFrames>

                                <!-- 宽度动画 -->
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0" Value="{Binding Diameter,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:1" Value="5" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:2" Value="{Binding Diameter,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                </DoubleAnimationUsingKeyFrames>

                                <!-- 高度动画 -->
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0" Value="{Binding Diameter,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:1" Value="5" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:2" Value="{Binding Diameter,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation1" BeginTime="0:0:0.0">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation2" BeginTime="0:0:0.25">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation3" BeginTime="0:0:0.5">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation4" BeginTime="0:0:0.75">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation5" BeginTime="0:0:1.0">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation6" BeginTime="0:0:1.25">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation7" BeginTime="0:0:1.50">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                            <Storyboard x:Key="EllipseAnimation8" BeginTime="0:0:1.75">
                                <StaticResource ResourceKey="BaseEllipseAnimation"/>
                            </Storyboard>
                        </Border.Resources>
                        <Border.Background>
                            <SolidColorBrush Color="Black" Opacity=".8" />
                        </Border.Background>
                        <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                            <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                                <cc:CirclePanel HorizontalAlignment="Center">
                                    <cc:CirclePanel.Resources>
                                        <Style TargetType="{x:Type Border}">
                                            <Setter Property="Width" Value="{Binding Size, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                            <Setter Property="Height" Value="{Binding Size, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                        </Style>
                                        <Style TargetType="{x:Type Ellipse}">
                                            <Setter Property="Margin" Value="0" />
                                            <Setter Property="Width" Value="{Binding Diameter,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                            <Setter Property="Height" Value="{Binding Diameter,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                            <Setter Property="Fill" Value="{Binding FillBrush,RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                        </Style>
                                    </cc:CirclePanel.Resources>
                                    <Border>
                                        <Ellipse Name="e1" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation1}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e2">
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation2}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e3" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation3}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e4" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation4}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e5" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation5}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e6" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation6}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e7" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation7}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                    <Border>
                                        <Ellipse Name="e8" >
                                            <Ellipse.Triggers>
                                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                                    <BeginStoryboard Storyboard="{StaticResource EllipseAnimation8}"/>
                                                </EventTrigger>
                                            </Ellipse.Triggers>
                                        </Ellipse>
                                    </Border>
                                </cc:CirclePanel>

                                <TextBlock Foreground="White" Text="{Binding Text, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="0,30,0,5" />
                            </StackPanel>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

cs:

internal class Loading : UserControl
{
    public static readonly DependencyProperty SizeProperty =
        DependencyProperty.Register(nameof(Size), typeof(double), typeof(Loading), new PropertyMetadata(5.0, OnSizePropertyChanged));

    private static void OnSizePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Loading loading)
        {
            loading.Diameter = (double)e.NewValue / 2d;
        }
    }

    public double Size
    {
        get { return (double)GetValue(SizeProperty); }
        set { SetCurrentValue(SizeProperty, value); }
    }

    public double Diameter { get; set; }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register(nameof(Text), typeof(string), typeof(Loading), new PropertyMetadata(null, OnTextPropertyChanged));

    private static void OnTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Loading loading)
        {
            loading.Text = e.NewValue as string;
        }
    }

    public string Text
    {
        get { return (string)GetValue(SizeProperty); }
        set { SetCurrentValue(TextProperty, value); }
    }


    public static readonly DependencyProperty FillBrushProperty =
        DependencyProperty.Register(nameof(FillBrush), typeof(System.Windows.Media.Brush), typeof(Loading), new PropertyMetadata(Brushes.Blue));

    public System.Windows.Media.Brush FillBrush
    {
        get { return (System.Windows.Media.Brush)GetValue(FillBrushProperty); }
        set { SetCurrentValue(FillBrushProperty, value); }
    }

    static Loading()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(Loading), new FrameworkPropertyMetadata(typeof(Loading)));
    }

}

发现少了个CirclePanel.cs;补一下：
 


    public class CirclePanel : Panel
    {
        public static readonly DependencyProperty RadiusProperty = DependencyProperty.Register("Radius", typeof(double), typeof(CirclePanel), new PropertyMetadata(0.0, new PropertyChangedCallback(OnValueChanged)));
        public double Radius
        {
            get => Convert.ToDouble(GetValue(RadiusProperty));
            set => SetValue(RadiusProperty, value);
        }


        private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as CirclePanel).Radius = Convert.ToDouble(e.NewValue);
            (d as CirclePanel).InvalidateArrange();
        }

        protected override Size MeasureOverride(Size availableSize)
        {
            double MaxElementWidth = 0;
            foreach (UIElement item in Children)
            {
                //给定子控件的可用空间
                item.Measure(availableSize);
                MaxElementWidth = Math.Max(item.DesiredSize.Width, MaxElementWidth);
            }
            double PanelWidth = 2 * this.Radius + 2 * MaxElementWidth;
            double width = Math.Min(PanelWidth, availableSize.Width);
            double height = Math.Min(PanelWidth, availableSize.Height);
            return new Size(width, height);
        }
        protected override Size ArrangeOverride(Size finalSize)
        {
            double Degree = 0;
            double DegreeSrep = (double)360 / this.Children.Count;
            double X = this.DesiredSize.Width / 2;
            double Y = this.DesiredSize.Height / 2;
            foreach (UIElement Item in Children)
            {
                //角度转弧度
                double angle = Math.PI * Degree / 180.0;
                //转换为直角坐标系 r*cos
                double x = Math.Cos(angle) * this.Radius;
                //转换为直角坐标系 r*sin
                double y = Math.Sin(angle) * this.Radius;
                RotateTransform rotate = new RotateTransform();
                rotate.Angle = Degree;
                rotate.CenterX = 0;
                rotate.CenterY = 0;
                Item.RenderTransform = rotate;
                //决定子控件的位置和大小
                Item.Arrange(new Rect(X + x, Y + y, Item.DesiredSize.Width, this.DesiredSize.Height));
                Degree += DegreeSrep;
            }
            return finalSize;
        }

    }

标签
#wpf
WPF 加载中Loading，自定义控件
qq_42707143的博客
12-27 1060
用Ellipse画一个圆点利用ContentControl的RenderTransform实现旋转RenderTransformOrigin=“0.5,0.5” 是为了设置旋转中心。
WPF圆形环绕的Loading动画
LisenYang的专栏
01-13 9410
WPF圆形环绕的Loading动画。
wpf加载等待动画（loading）
03-17
用wpf程序实现Loadingwait动画等待效果，在canvas里放9个Ellipse，，然后再用用定时器，一直改变每个Ellipse的位置，从而实现loading 效果。
WPF+MVVM案例实战与特效（三十一）- 封装一个加载动画的自定义控件
最新发布
lingshuangcanxue
12-02 796
我们创建了一个灵活的加载控件，它可以根据窗体的大小自动调整Image的宽度和高度，并且CenterX和CenterY会自动绑定到窗体宽度和高度的一半。此外，Border和TextBlock的样式可以通过依赖属性进行自定义，未设定的属性将采用默认值。这种设计使得控件非常易于使用和扩展，适用于各种WPF应用程序中的加载场景
WPF自定义控件(教程含源码)-loading 等待控件
lhyriver的博客
11-07 1315
loading 加载等待提示控件
wpf 三种 loading 样式
今天也是个小白
07-28 1407
wpf loading 样式
WPF 实现一个吃豆豆的Loading加载动画
weixin_41543156的博客
09-15 281
运行的效果如下 先引入一下我们需要的库 在nuget上面搜一下"expression.Drawing",安装一下这个包 我们再创建一个Window,引入一下这个包的命名空间 我们设置一下这个加载动画呈现的窗体的样式 xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" mc:...
WPF中自定义Loading图
小书童的博客
08-03 2501
纯前端方式，通过动画实现Loading样式
wpf loading 遮罩层效果（可以用在数据加载时使用）
annle1018的博客
01-04 1264
一直想做个wpf的loading遮罩效果 闲来无事网上看看别人做的 拔下来一个效果 共享给大家 如果有更好的可以告诉我下 先上个效果图 基本效果就是这样 实现起来也是只有xaml的动画 代码如下 <UserControl x:Class="Test.LoadingMask" xmlns="http://schemas.microsoft.com/winfx/...
WPF 圆形Loading
weixin_33800463的博客
10-21 182
原文:WPF 圆形Loading 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a771948524/article/details/9271933 &lt;Grid Width="35" Height="35"&gt; &lt;Grid.Resources&gt; &lt;DrawingBrush x:Key...
C# WPF 基础等待动画Loading...动态转圈 Storyboard ContentControl
qq_20758141的博客
12-06 2240
C# WPF 等待 动画 Loading 转圈 Storyboard ContentControl Interaction InvokeCommandAction
WPF loading遮罩层 LoadingMask
weixin_30507481的博客
04-03 360
先上张效果图看看 如果不如您的法眼 可以移步了 或者有更好的效果 可以留言给我 废话不多说 直接贴代码 一个usercontrol <UserControl x:Class="LoadingMask_Demo.LoadingWait" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/...
可能是迄今为止最好用的WPF加载动画功能(没有之一)
u013319633的博客
01-01 6455
当我们在开发应用程序时，用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时，为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式，它不仅能够告知用户应用程序正在进行工作，还能够缓解用户在等待过程中的焦虑感。
WPF编程，等待动画的几中实现形式
君一席
06-23 3316
WPF界面加载动画
WPF prism框架下的等待加载动画 （IEventAggregator INavigationAware）
m0_57642075的博客
08-21 1724
通过构造注入IEventAggregator，并通过IEventAggregator的GetEvent获取定义的消息，再通过Subscribe方法注册；转载：EventAggregator 是基于事件聚合器服务，允许发布者和订阅者之间通过事件进行通讯，且彼此之间没有直接引用。//MaterialDesignThemes下的样式，需在包管理器下安装。PubSubEvent：维护订阅者列表并向订阅者发送事件。继承PubSubEvent类，并传入一个对象泛型。///数据导入代码（省略）{//更新指定的模型实例。
WPF 用户控件Loading（加载）样式
03-09 1843
WPF 用户控件Loading（加载）样式 首先添加一个用户控件：usercontrol。WPF 用户控件Loading（加载）样式。
WPF实现Loading加载文字水波纹动画效果
dnazhd的博客
06-24 1697
实现效果如下： 思路：基本原理同博文WPF实现聚光灯动画效果一致，难点在与正弦曲线的绘制和动态效果。 步骤： 1、自定义控件UserControl的封装 添加自定义Value属性： public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(MyLoadingControl), new PropertyMet
WPF 如何在控件上显示 Loading 等待动画
dotNET跨平台
03-26 1127
WPF 如何在控件上显示 Loading 等待动画控件名：Loading作 者：WPFDevelopersOrg - 驚鏵原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40；Visual Studio 2022;使用方式需引入命名空间后设置控件的附加属性 wd:Loading.IsShow="true"，即...
WPF实战项目十七（客户端）：数据等待加载弹框动画
yigu4011的博客
11-23 2323
1、在Common文件夹下新建文件夹Events，新建扩展类UpdateLoadingEvent。2、新建一个静态扩展类DialogExtensions来编写注册和推送等待消息弹框方法。3、在ViewModel中添加实现类NavigationViewModel。5、在View文件夹下新建用户控件ProgressView.xmal。4、在主窗体MainView.xmal中给弹窗界面命名。6、在MainView.xmal.cs中注册消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值