WPF UI开发教程自定义loading等待控件

最新推荐文章于 2024-06-05 23:35:32 发布
最新推荐文章于 2024-06-05 23:35:32 发布
阅读量562 收藏 1
点赞数
分类专栏： MVVM UI设计 c# WPF 文章标签： c# wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaohaiyin/article/details/119735000
版权
MVVM 同时被 3 个专栏收录
92 篇文章 18 订阅
订阅专栏
UI设计
92 篇文章 9 订阅
订阅专栏
c# WPF
92 篇文章 24 订阅
订阅专栏

在项目开发过程中总会遇到一个需求：Loading...正在加载中，这样一个需求作为加载的过渡效果。

控件主要原理以半径X,Y轴进行旋转，按照时钟原理画12个点，这里的RenderTransformOrigin="0.5,0.5"表示以图片的圆心为指定变换原点，每个点旋转角度从0到360度，每次以30度递增。

在控件加载事件中取透明值依赖属性进行时间段递增显示。

先显示loading等待控件效果

WPF UI开发教程自定义loading等待控件

控件样式代码：

<Style TargetType="{x:Type local:LoadingBox}">
        <!--<Setter Property="Height" Value="64"/>
        <Setter Property="Width" Value="64"/>-->
        <Setter Property="RadiusX" Value="4"/>
        <Setter Property="RadiusY" Value="4"/>
        <Setter Property="Foreground" Value="{DynamicResource Nb.Loading.Foreground}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid Name ="loading" Visibility="Visible" Height="{TemplateBinding Height}" Width ="{TemplateBinding Width}" VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                        <Grid.Resources>
                            <DrawingBrush x:Key="brush" Stretch="None" AlignmentX ="Center" AlignmentY="Top">
                                <DrawingBrush.Drawing>
                                    <GeometryDrawing Brush ="{Binding RelativeSource={RelativeSource AncestorType=nb:LoadingBox},Path=Foreground}">
                                        <GeometryDrawing.Geometry>
                                            <EllipseGeometry RadiusX ="{Binding RelativeSource={RelativeSource AncestorType=nb:LoadingBox},Path=RadiusX}" 
                                                             RadiusY="{Binding RelativeSource={RelativeSource AncestorType=nb:LoadingBox},Path=RadiusY}"/>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Grid.Resources>

                        <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="0"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="30"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="60"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="90"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="120"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="150"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="180"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="210"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="240"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="270"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="300"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity ="{TemplateBinding Opacity}" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform Angle ="330"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>

                        <Grid.Triggers>
                            <EventTrigger RoutedEvent ="Grid.Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior ="Forever">
                                        <DoubleAnimation Storyboard.TargetName ="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.00000" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.08333" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.16666" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.24999" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.33332" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.41665" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.49998" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.58331" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.66664" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.74997" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.83330" To="0"/>
                                        <DoubleAnimation Storyboard.TargetName ="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime ="0:0:0.91663" To="0"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Grid.Triggers>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

默认半径RadiusX，RadiusY是4

<Grid.Resources>
                            <DrawingBrush x:Key="brush" Stretch="None" AlignmentX ="Center" AlignmentY="Top">
                                <DrawingBrush.Drawing>
                                    <GeometryDrawing Brush ="{Binding RelativeSource={RelativeSource AncestorType=nb:LoadingBox},Path=Foreground}">
                                        <GeometryDrawing.Geometry>
                                            <EllipseGeometry RadiusX ="{Binding RelativeSource={RelativeSource AncestorType=nb:LoadingBox},Path=RadiusX}" 
                                                             RadiusY="{Binding RelativeSource={RelativeSource AncestorType=nb:LoadingBox},Path=RadiusY}"/>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Grid.Resources>

重写Grid资源样式，用DrawingBrush来绘制区域，EllipseGeometry 以半径RadiusX，RadiusY矢量图型绘制圆型。

public class LoadingBox : Control
    {

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

        public double RadiusX
        {
            get { return (double)GetValue(RadiusXProperty); }
            set { SetValue(RadiusXProperty, value); }
        }

        // Using a DependencyProperty as the backing store for RadiusX.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RadiusXProperty =
            DependencyProperty.Register("RadiusX", typeof(double), typeof(LoadingBox), new PropertyMetadata(3d));



        public double RadiusY
        {
            get { return (double)GetValue(RadiusYProperty); }
            set { SetValue(RadiusYProperty, value); }
        }

        // Using a DependencyProperty as the backing store for RadiusY.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RadiusYProperty =
            DependencyProperty.Register("RadiusY", typeof(double), typeof(LoadingBox), new PropertyMetadata(3d));

    }

依赖属性定义RadiusX，RadiusY半径坐标。

下面是实例调用代码：

<local:LoadingBox Grid.Column="0" Width="40" Height="40" RadiusX="3" RadiusY="3" Foreground="#000000"/>

有技巧搬砖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF实战项目十七（客户端）：数据等待加载弹框动画
yigu4011的博客
11-23 1767
1、在Common文件夹下新建文件夹Events，新建扩展类UpdateLoadingEvent。2、新建一个静态扩展类DialogExtensions来编写注册和推送等待消息弹框方法。3、在ViewModel中添加实现类NavigationViewModel。5、在View文件夹下新建用户控件ProgressView.xmal。4、在主窗体MainView.xmal中给弹窗界面命名。6、在MainView.xmal.cs中注册消息。
推荐开源项目：LoadingIndicators.WPF —— 精美的WPF加载指示器库
gitblog_00091的博客
05-18 251
推荐开源项目：LoadingIndicators.WPF —— 精美的WPF加载指示器库 项目地址:https://gitcode.com/zeluisping/LoadingIndicators.WPF 1、项目介绍 在开发用户界面时，加载指示器是必不可少的元素，它们为用户提供反馈，表示应用程序正在处理数据或执行操作。LoadingIndicators.WPF 是一个专为Windows Pres...
WPF：Loading等待动画、加载动画
pandawangyt的博客
08-21 1万+
类型1 效果 思路： 1、用8个浅灰色的圆当背景 2、4个渐变深灰色的圆，一直改变其旋转角度，表示Loading的过程 首先，定位下图圆的位置（红色线为辅助线），剩余的直接旋转角度就行。 画布长宽为100 <Canvas Width="100" Height="100"> 圆的半径是25，设计其基础的样式。因为剩余的圆是通过该圆旋转得到的，旋转的中心是上图中几条红色直线相交的那个点，不难算出RenderTransformOrigin为0.5,2，这个很关键。 <Style x:K
WPF-UI HandyControl 控件简单实战+IconPacks矢量图导入
qq_44695769的博客
12-16 3083
因为HandyControl 的功能非常的丰富，我打算完整的了解一下HandyControl 整个控件的基本使用，而且我的网易云WPF项目也打算用UserControl 进行重构HandyControl非常的好用，而且能进行自定义拓展，这里就不展开了。尤其是有了导入其它Icon的Geometry的能力之后，基本所有的图标都可以轻松拿下。
WPF开发教程
热门推荐
DavidLiu的博客
07-02 2万+
------WPF开发教程 目录 WPF基础入门.... 3 1. WPF基础之体系结构... 3 2. WPF基础之XAML. 9 3. WPF基础之基元素... 23 4. WPF基础之属性系统... 26 5. WPF基础之路由事件... 33 6. WPF基础之布局系统... 46 7. WPF基础之样式设置和模板化... ...
超炫酷的WPF实现Loading控件效果
ht_zhaoliubin的专栏
12-25 5390
这篇文章主要介绍了超炫酷的WPF实现Loading控件效果，感兴趣的小伙伴们可以参考一下 Win8系统的Loading效果还是很不错的，网上也有人用CSS3等技术实现，研究了一下，并打算用WPF自定义一个Loading控件实现类似的效果，并可以让用户对Loading的颗粒（Particle）背景颜色进行自定义，话不多说，直接上代码： 1、用VS2012新建一个WPF的用户控
WPF基础控件
最新发布
代码改变世界
06-05 1400
在这篇博客中，我们将探讨 WPF 中一些常用的控件，包括 TextBlock、Label、ListBox、DataGrid、ListView、ToggleButton 等。我们将介绍每个控件的作用、常用属性和事件，并提供示例代码来演示它们的用法。无论您是初学者还是有经验的 WPF 开发者，本文都将为您提供有价值的信息，帮助您更好地理解和使用这些控件。
WPF 不阻塞UI线程更新UI的方式
flysh05的专栏
09-17 4645
WPF App中经常因为更新UI导致界面假死，无法操作的情况，下面我就更新UI不阻塞UI线程的方式，从2个方面测试。 方式1， 使用System.Windows.Forms.Application.DoEvents() 方法 倒计时，UI从60，59 显示直到0. private int Num = 60; private void btnCount_Click(object sender, RoutedEventArgs e) { ...
WPF 添加一个不受UI线程影响的Loading
log103628的博客
06-08 164
在加载时间长的页面中一般会有Loading，但是如果加载时间中有一部分占用UI线程(一般都要处理把耗时的逻辑放在工作线程，最后赋值的地方在UI线程)，Loading就会出现卡顿的效果。 所以使用了后台线程加载Loading，占用UI线程时并不会影响Loading，示例如下： <Window x:Class="BackGroundLoading.MainWindow" xm...
WPF 多线程 UI：设计一个异步加载 UI 的容器
walterlv - 吕毅
09-26 1543
你做 .NET 开发的时候，一定用过 DllImport 这个特性吧，这货是用于 P/Invoke (Platform Invoke, 平台调用) 的。这种 DllImport 标记的方法都带有一个 extern 关键字。 那么有没有可能我们自己写一个自己的 extern 方法呢？答案是可以的。本文就写一个这样的例子。 本文内容DllImport自定义的 extern让自定义的 extern 工...
wpf加载等待动画（loading）
03-17
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）应用程序中实现一个加载等待动画，也就是我们常说的“Loading”效果。WPF是.NET框架的一部分，它为开发富客户端应用提供了强大的图形用户界面...
WPF 用户控件 Loading 效果
01-24
在Windows Presentation Foundation (WPF) 中，用户控件(UserControl)是一种自定义UI元素的方式，它允许开发者将多个基本控件组合成一个更复杂的组件。当我们需要在应用程序中实现加载效果，比如显示一个正在处理...
WPF制作滚动圈圈等待控件效果
01-08
1. **设计等待控件**：你可以选择使用现有的动画库，如Microsoft Blend SDK，或者自定义绘制一个旋转的圈圈。通常，这个圈圈是由多个圆环组成，通过改变它们的透明度或位置来模拟旋转效果。在XAML中，可以使用`...
wpf进度条，wpf等待条，wpf loading
07-27
在实际开发中，为了使用这个库，开发者需要将`LoadingIndicators.WPF` 文件夹添加为项目的引用，然后在XAML文件中引入相应的命名空间，并选择合适的等待条或进度条控件。通过设置控件的属性（如颜色、大小、速度等）...
WPF UI框架界面开发教程（一）
liaohaiyin的专栏
07-26 8447
采用WPF MVVM框架 开发漂亮的登录界面，运行效果 在项目引用Fody开源控件自动触发属性值 接下来封装ViewModel基类实现INotifyPropertyChanged 系统自动窗体标题不容易扩展也不美观，所以用WindowChrome实现标题拖动等功能 由于窗体，控件等需要设置颜色，创建颜色资源文件方便后面调用 自定义重写主窗体样式 最后绑定命令实现最大化，最小化，关闭功能，先定义命令基类 ...
使用OxyPlot绘制曲线
liaohaiyin的专栏
03-30 7312
OxyPlot 是一个用于 .NET 的 2D 绘图库，自 2010 年以来一直在积极开发。OxyPlot 获得 MIT 许可，并具有用于大量现代平台（WinForms、WPF、UWP、Xamarin、XWT）和一些旧平台（Silveright）的组件和 Windows 系统）。WinForms 控件 (PlotView.cs) 使用 System.Drawing 进行渲染，但也存在使用 SkiaSharp 和 ImageSharp 的渲染系统。创建 OxyPlot 是为了绘制 2D 数据，这就是它名称中包
开源 WPF控件库 Newbeecoder.UI推荐
liaohaiyin的专栏
07-05 6656
WPF开发桌面软件具有天然优势，能快速漂亮的界面程序。 Newbeecoder是一款简单易用漂亮的WPF UI开源库，融合多个开源框架组件，为个人定制的UI提供支持，QQ：6726256 Newbeecoder控件库开发部份作品展示 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值