WPF 加载中Loading，自定义控件

已于 2023-12-27 16:34:43 修改
阅读量522 收藏 6
点赞数 8
文章标签： wpf
于 2023-12-27 15:05:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42707143/article/details/135245760
版权

模仿Win10-加载中Loading：

loading

用Ellipse画一个圆点

 <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>

利用ContentControl的RenderTransform实现旋转

<ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item1">
    <ContentControl.RenderTransform>
        <RotateTransform Angle="0"/>
    </ContentControl.RenderTransform>
    <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
</ContentControl>

RenderTransformOrigin=“0.5,0.5” 是为了设置旋转中心。

总共画五个点，如下：

<Grid Width="100" Height="100" Margin="0 50 0 0">
    <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item1">
        <ContentControl.RenderTransform>
            <RotateTransform Angle="0"/>
        </ContentControl.RenderTransform>
        <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
    </ContentControl>
    <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item2">
        <ContentControl.RenderTransform>
            <RotateTransform Angle="0"/>
        </ContentControl.RenderTransform>
        <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
    </ContentControl>
    <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item3">
        <ContentControl.RenderTransform>
            <RotateTransform Angle="0"/>
        </ContentControl.RenderTransform>
        <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
    </ContentControl>
    <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item4">
        <ContentControl.RenderTransform>
            <RotateTransform Angle="0"/>
        </ContentControl.RenderTransform>
        <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
    </ContentControl>
</Grid>

旋转代码：

 <BeginStoryboard>
     <Storyboard>
         <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
                                        Storyboard.TargetName="item1" Storyboard.TargetProperty="RenderTransform.Angle">
             <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
             <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
             <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
         </DoubleAnimationUsingKeyFrames>
         <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.2"
                                        Storyboard.TargetName="item2" Storyboard.TargetProperty="RenderTransform.Angle">
             <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
             <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
             <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
         </DoubleAnimationUsingKeyFrames>
         <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"  BeginTime="0:0:0.4"
                                        Storyboard.TargetName="item3" Storyboard.TargetProperty="RenderTransform.Angle">
             <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
             <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
             <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
         </DoubleAnimationUsingKeyFrames>
         <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.6"
                                        Storyboard.TargetName="item4" Storyboard.TargetProperty="RenderTransform.Angle">
             <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
             <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
             <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
         </DoubleAnimationUsingKeyFrames>
     </Storyboard>
 </BeginStoryboard>

全部代码：

 <Grid>
     <StackPanel Margin="50">
         <Button Content="开始" Width="120" Height="30">
             <Button.Triggers>
                 <EventTrigger RoutedEvent="Button.Click">
                     <BeginStoryboard>
                         <Storyboard>
                             <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
                                                            Storyboard.TargetName="item1" Storyboard.TargetProperty="RenderTransform.Angle">
                                 <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                                 <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
                                 <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
                             </DoubleAnimationUsingKeyFrames>
                             <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.2"
                                                            Storyboard.TargetName="item2" Storyboard.TargetProperty="RenderTransform.Angle">
                                 <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                                 <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
                                 <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
                             </DoubleAnimationUsingKeyFrames>
                             <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"  BeginTime="0:0:0.4"
                                                            Storyboard.TargetName="item3" Storyboard.TargetProperty="RenderTransform.Angle">
                                 <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                                 <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
                                 <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
                             </DoubleAnimationUsingKeyFrames>
                             <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.6"
                                                            Storyboard.TargetName="item4" Storyboard.TargetProperty="RenderTransform.Angle">
                                 <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                                 <SplineDoubleKeyFrame Value="360" KeyTime="0:0:2" KeySpline="0.07,0.39,0.92,0.59"/>
                                 <SplineDoubleKeyFrame Value="720" KeyTime="0:0:4" KeySpline="0.07,0.39,0.92,0.59"/>
                             </DoubleAnimationUsingKeyFrames>
                         </Storyboard>
                     </BeginStoryboard>
                 </EventTrigger>
             </Button.Triggers>
         </Button>
         <Grid Width="100" Height="100" Margin="0 50 0 0">
             <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item1">
                 <ContentControl.RenderTransform>
                     <RotateTransform Angle="0"/>
                 </ContentControl.RenderTransform>
                 <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
             </ContentControl>
             <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item2">
                 <ContentControl.RenderTransform>
                     <RotateTransform Angle="0"/>
                 </ContentControl.RenderTransform>
                 <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
             </ContentControl>
             <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item3">
                 <ContentControl.RenderTransform>
                     <RotateTransform Angle="0"/>
                 </ContentControl.RenderTransform>
                 <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
             </ContentControl>
             <ContentControl RenderTransformOrigin="0.5,0.5" x:Name="item4">
                 <ContentControl.RenderTransform>
                     <RotateTransform Angle="0"/>
                 </ContentControl.RenderTransform>
                 <Ellipse Fill="Blue" Width="10" Height="10" VerticalAlignment="Bottom"/>
             </ContentControl>
         </Grid>
     </StackPanel>
 </Grid>

不想自己写代码的，可以在Nuget中下载XiaFControl来使用Loading控件。
XiaFControl使用教程链接：
Github：https://github.com/LiuliuMao/XiaFControl
Gitee：https://gitee.com/lm961031/xia-fcontrol
更多WPF知识分享Q群：371769310

刘夏菡
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF实战项目十七（客户端）：数据等待加载弹框动画
yigu4011的博客
11-23 1673
1、在Common文件夹下新建文件夹Events，新建扩展类UpdateLoadingEvent。2、新建一个静态扩展类DialogExtensions来编写注册和推送等待消息弹框方法。3、在ViewModel中添加实现类NavigationViewModel。5、在View文件夹下新建用户控件ProgressView.xmal。4、在主窗体MainView.xmal中给弹窗界面命名。6、在MainView.xmal.cs中注册消息。
wpf加载中控件
01-15
.....................wpf加载中控件。。。。。。。。。。。。。
WPF 用户控件Loading（加载）样式
03-09 1124
WPF 用户控件Loading（加载）样式 首先添加一个用户控件：usercontrol。WPF 用户控件Loading（加载）样式。
推荐开源项目：LoadingIndicators.WPF —— 精美的WPF加载指示器库
最新发布
gitblog_00091的博客
05-18 235
推荐开源项目：LoadingIndicators.WPF —— 精美的WPF加载指示器库 项目地址:https://gitcode.com/zeluisping/LoadingIndicators.WPF 1、项目介绍 在开发用户界面时，加载指示器是必不可少的元素，它们为用户提供反馈，表示应用程序正在处理数据或执行操作。LoadingIndicators.WPF 是一个专为Windows Pres...
WPF 自定义控件之Loading 加载
灰太澜的博客
06-17 1445
Loading 加载 加载数据时显示动效。 在任何控件中皆可显示。 使用方式 <Button Margin="5" Width="100" Height="32" Content="按钮" lib:LoadingAssists.Loading="True" lib:LoadingAssists.Text="加载中"></Button> 源码地址：https://github.com/Super0Lan/ControlDesign ...
WPF防止界面卡死并显示加载中效果
weixin_34397291的博客
02-06 953
网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: &lt;Window x:Class="WpfApplication1.Loading" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micr...
iOS开发 -- 懒加载
拾光Blog
10-23 396
1.懒加载基本懒加载——也称为延迟加载，即在需要的时候才加载（效率低，占用内存小）。所谓懒加载，写的是其get方法.注意：如果是懒加载的话则一定要注意先判断是否已经有了，如果没有那么再去进行实例化2.使用懒加载的好处：（1）不必将创建对象的代码全部写在viewDidLoad方法中，代码的可读性更强 （2）每个控件的getter方法中分别负责各自的实例化处理，代码彼此之间的独立性强，松耦合
wpf 正在加载中提示功能图标制作
03-27
wpf 正在加载中提示功能图标，直接下载后就能看到效果。
#使用技巧#WPF Adorner 装饰器实现“加载中“
u011067892的博客
02-26 2114
通过点击或拖动这些调节尺寸的把柄，用户可以改变其中控件的大小。Decorator 可被用于添加简单的视觉装饰，例如边界(Border)，或者更复杂的行为，例如 ViewBox，AdornerDecorator，或是 InkPresenter。Measure 方法自顶而下，递归调用各子控件的 Measure 方法，Measure 方法会把该控件所需的大小控件存在 desired size 属性中，控件根据各子控件的 desired size 属性确定自身空间大小，并返回自己的 desired size；
WPF自定义loading加载控件
08-25
WPF自定义loading加载控件
WPF 自定义控件库 常用控件封装&常用控件样式重写
03-26
WPF 自定义控件库 常用控件封装&常用控件样式重写
wpf加载等待动画（loading）
03-17
用wpf程序实现Loadingwait动画等待效果，在canvas里放9个Ellipse，，然后再用用定时器，一直改变每个Ellipse的位置，从而实现loading 效果。
WPF，C#圆形加载进度条。
01-25
基于WPF的一种圆形进度条，带百分比显示。使用arc控件。
wpf之loading加载动画
09-29
wpf之loading加载动画
Wpf 图片加载动画
12-07
WPF加载图片，图片加载完成之前显示正在加载中。
WPF的ListView控件自定义布局用法实例
09-02
主要介绍了WPF的ListView控件自定义布局的方法,结合实例形式分析了WPF中ListView控件的布局方法,需要的朋友可以参考下
WPF 自定义虚拟键盘控件
12-28
WPF .net Framework 4.6.2 虚拟键盘自定义控件；适合新手借鉴、程序应急使用；直接上源码，可自行修改； 虚拟键盘(支持英文，数字输入，及部分特殊字符(特殊字符都为英文字符)) 1.0版本；后续慢慢增加其他功能及其他...
WPF 用户控件 Loading 效果
01-24
WPF 用户控件 Loading 效果
wpf-转载-以绘制gif的方式提示用户程序正在加载
陆沙的博客
09-13 206
参考：https://www.cnblogs.com/miketwais/articles/WPF_Loading.html 效果是一个gif 用户控件LoadingWait LoadingWait.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using Sy
wpf mvvm动态添加自定义控件
08-18
在WPF MVVM模式中，可以通过在ViewModel中使用ObservableCollection来动态添加自定义控件。ObservableCollection是.NET Framework提供的一个集合类，它能够在集合元素发生变化时自动通知界面进行更新。 首先，在ViewModel中声明一个ObservableCollection属性，用于存储自定义控件的集合。然后，在需要添加自定义控件的地方，通过操作ObservableCollection来添加新的控件。ViewModel会自动通知界面进行更新。 接下来，界面需要绑定这个ObservableCollection属性，并使用数据模板来定义如何渲染每个自定义控件。在XAML中，可以使用ItemsControl或者ListBox等控件来展示这个集合，并通过绑定将集合和数据模板关联起来。 在这个过程中，可以根据需要使用拖放、缩放、旋转等功能。可以参考中的示例代码，了解如何实现这些功能。 最后，通过实例化ViewModel，并将其赋值给界面的DataContext属性，从而建立ViewModel和View之间的关联。可以参考中的代码。 总结起来，实现在WPF MVVM模式中动态添加自定义控件的步骤为： 1. 在ViewModel中声明一个ObservableCollection属性，用于存储自定义控件的集合； 2. 在需要添加自定义控件的地方，通过操作ObservableCollection来添加新的控件； 3. 在界面中，绑定这个ObservableCollection属性，并使用数据模板来定义如何渲染每个自定义控件； 4. 根据需要使用拖放、缩放、旋转等功能； 5. 实例化ViewModel，并将其赋值给界面的DataContext属性，建立ViewModel和View之间的关联。 希望这个实现思路对你有帮助，如果需要更详细的代码示例，可以参考中的文章。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [用WPF mvvm如何动态添加自定义控件问题](https://blog.csdn.net/netyou/article/details/104371498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [WPF Prism MVVM【动态添加控件并可用鼠标、拖动、缩放、旋转】](https://blog.csdn.net/redfox6843/article/details/126117819)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值