WPF 实现Loading自定义控件

已于 2024-09-06 09:02:52 修改
阅读量393 收藏 1
点赞数 1
分类专栏： .NET WPF 文章标签： wpf microsoft c#
于 2022-01-12 15:42:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rotion135/article/details/122455030
版权
.NET 同时被 2 个专栏收录
26 篇文章 0 订阅
订阅专栏
WPF
5 篇文章 0 订阅
订阅专栏

先上效果图

其实就是用动画实现的，然后滑动的速度用时间差来控制，

上源码吧，看不懂的评论区提问：

<UserControl
    x:Class="MyControl.UC_Loading"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MyControl"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Width="110"
    Height="30"
    mc:Ignorable="d">
    <Grid>

        <Path
            x:Name="three"
            Width="24"
            Height="14"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Data="M264 235c-110.5 0-200 89.5-200 200v354h696c110.5 0 200-89.5 200-200V235H264z"
            Fill="#238b83"
            Opacity="0.6"
            Stretch="Fill" />
        <Path
            x:Name="two"
            Width="24"
            Height="14"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Data="M264 235c-110.5 0-200 89.5-200 200v354h696c110.5 0 200-89.5 200-200V235H264z"
            Fill="#238b83"
            Opacity="0.7"
            Stretch="Fill" />
        <Path
            x:Name="one"
            Width="26"
            Height="18"
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Data="M264 235c-110.5 0-200 89.5-200 200v354h696c110.5 0 200-89.5 200-200V235H264z"
            Fill="#238b83"
            Opacity="1"
            Stretch="Fill" />
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <ThicknessAnimation
                            AutoReverse="False"
                            BeginTime="0:0:0.00000"
                            Storyboard.TargetName="one"
                            Storyboard.TargetProperty="Margin"
                            To="84,0,0,0"
                            Duration="0:0:0.8" />
                        <ThicknessAnimation
                            AutoReverse="False"
                            BeginTime="0:0:0.26"
                            Storyboard.TargetName="two"
                            Storyboard.TargetProperty="Margin"
                            To="86,0,0,0"
                            Duration="0:0:0.8" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:0.6"
                            Storyboard.TargetName="two"
                            Storyboard.TargetProperty="Opacity"
                            To="0.3"
                            Duration="0:0:0.6" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:1.5"
                            Storyboard.TargetName="two"
                            Storyboard.TargetProperty="Opacity"
                            To="0.9"
                            Duration="0:0:0.001" />
                        <ThicknessAnimation
                            AutoReverse="False"
                            BeginTime="0:0:0.5"
                            Storyboard.TargetName="three"
                            Storyboard.TargetProperty="Margin"
                            To="86,0,0,0"
                            Duration="0:0:1" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:0.7"
                            Storyboard.TargetName="three"
                            Storyboard.TargetProperty="Opacity"
                            To="0.3"
                            Duration="0:0:0.7" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:1.5"
                            Storyboard.TargetName="three"
                            Storyboard.TargetProperty="Opacity"
                            To="0.9"
                            Duration="0:0:0.001" />

                        <ThicknessAnimation
                            AutoReverse="False"
                            BeginTime="0:0:1.8"
                            Storyboard.TargetName="one"
                            Storyboard.TargetProperty="Margin"
                            To="0,0,0,0"
                            Duration="0:0:0.8" />
                        <ThicknessAnimation
                            AutoReverse="False"
                            BeginTime="0:0:2.07"
                            Storyboard.TargetName="two"
                            Storyboard.TargetProperty="Margin"
                            To="0,0,0,0"
                            Duration="0:0:0.8" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:2.46"
                            Storyboard.TargetName="two"
                            Storyboard.TargetProperty="Opacity"
                            To="0.3"
                            Duration="0:0:0.4" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:2.7"
                            Storyboard.TargetName="two"
                            Storyboard.TargetProperty="Opacity"
                            To="0.9"
                            Duration="0:0:0.001" />
                        <ThicknessAnimation
                            AutoReverse="False"
                            BeginTime="0:0:2.3"
                            Storyboard.TargetName="three"
                            Storyboard.TargetProperty="Margin"
                            To="0,0,0,0"
                            Duration="0:0:1" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:2.6"
                            Storyboard.TargetName="three"
                            Storyboard.TargetProperty="Opacity"
                            To="0.3"
                            Duration="0:0:0.3" />
                        <DoubleAnimation
                            AutoReverse="False"
                            BeginTime="0:0:3.3"
                            Storyboard.TargetName="three"
                            Storyboard.TargetProperty="Opacity"
                            To="0.9"
                            Duration="0:0:0.001" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>
</UserControl>

Rotion_深
关注
专栏目录
[WPF] 圆形等待效果
记忆碎片
11-22 1万+
<!-- body, p, pre, span {font-family:Consolas,'Microsoft Yahei'; font-size:14px} p {line-height:150%} --> 自己做着玩儿的，留着以后用，效果类似下面的 GIF 动画。
WPF自定义控件
LPPTREE的专栏
09-11 432
using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace ZJWMSUI.Controls { public class DazzleButton : Button { public static readonly DependencyPro
WPF 用户控件 Loading 效果
01-24
WPF 用户控件 Loading 效果
WPF 实现的Loading组件
05-19
WPF 实现的Loading组件
超炫酷的WPF实现Loading控件效果
09-03
主要介绍了超炫酷的WPF实现Loading控件效果，感兴趣的小伙伴们可以参考一下
WPF 实现一个酷酷的Loading
dotNET跨平台
11-24 533
WPF开发者QQ群：340500857 | 微信群 -> 进入公众号主页加入组织 由于微信群人数太多入群请添加小编微信号（yanjinhuawechat）或（W_Fe...
WPF自定义控件(教程含源码)-loading 等待控件
lhyriver的博客
11-07 1061
loading 加载等待提示控件
wpf 自定义控件
m0_46533764的博客
02-04 631
UserControl ContentControl Control
WPF自定义loading加载控件
08-25
在Windows Presentation Foundation (WPF) 中，自定义控件是一种扩展框架功能，允许开发者创建具有独特外观和行为的用户界面元素。"WPF自定义loading加载控件"的主题旨在教你如何构建一个显示忙碌状态或加载过程的...
wpf加载等待动画（loading）
03-17
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）应用程序中实现一个加载等待动画，也就是我们常说的“Loading”效果。WPF是.NET框架的一部分，它为开发富客户端应用提供了强大的图形用户界面...
WPF loading源码合集（汇集好几种loading效果）
08-12
几种很好的loading效果，代码编译无误放心使用。
wpf加载中控件
01-15
.....................wpf加载中控件。。。。。。。。。。。。。
WPF 实现的袋进度通知的Loading组件
05-19
用WPF实现的Load遮罩功能,Xaml来自博客园,后台功能为原创,实现带进度通知(百分比)
wpf loading DEMO
05-04
wpf 旋转等待 等待对话框,实用.
LoadingMask（WPF加载数据loading遮罩）
09-23
LoadingMask（WPF加载数据loading遮罩） 博客地址http://blog.csdn.net/lhx527099095/article/details/8005095
WPF中自定义Loading图
小书童的博客
08-03 2361
纯前端方式，通过动画实现Loading样式
WPF 自定义控件之Loading 加载
灰太澜的博客
06-17 1539
Loading 加载 加载数据时显示动效。 在任何控件中皆可显示。 使用方式 <Button Margin="5" Width="100" Height="32" Content="按钮" lib:LoadingAssists.Loading="True" lib:LoadingAssists.Text="加载中"></Button> 源码地址：https://github.com/Super0Lan/ControlDesign ...
WPF 加载中Loading，自定义控件
qq_42707143的博客
12-27 663
用Ellipse画一个圆点利用ContentControl的RenderTransform实现旋转RenderTransformOrigin=“0.5,0.5” 是为了设置旋转中心。
wpf实现自定义控件
最新发布
09-12
在WPF中实现自定义控件，可以通过继承现有的控件或者直接从Control类派生来创建完全自定义的控件。以下是实现自定义控件的基本步骤： 1. 创建一个新的类，继承自System.Windows.Controls.UserControl或者Control。如果是UserControl，则包含一个用户控件的XAML文件，可以在其中定义界面布局；如果是Control，则需要完全从零开始编写控件的模板和行为。 2. 在XAML中定义自定义控件的外观和结构。如果继承的是UserControl，这一步将在这个用户控件的XAML文件中完成。如果继承的是Control，则需要创建一个ControlTemplate来定义控件的外观和模板。 3. 在代码后台中，为自定义控件添加逻辑和功能。这包括处理事件、数据绑定以及可能的命令绑定。 4. 在需要使用自定义控件的地方，将其引入并使用。如果是UserControl，可以直接在XAML中引用；如果是Control，可能需要在资源字典中声明并使用。 5. 如果需要，可以为自定义控件创建样式和模板。这样可以更方便地为控件提供不同的外观和风格。 6. 测试自定义控件，确保其功能和表现符合预期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rotion_深

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值