WPF 蒙罩层 LoadingPage

WPF 蒙罩层 LoadingPage
原文:WPF 蒙罩层 LoadingPage

WPF 蒙罩层 LoadingPage

 

前言

  无论是在PC客户端,移动端,网站,在遇到长时间处理的时候都会需要用到蒙罩层,让用户有更好的体现。今天上网逛了一下各位前辈网友的蒙罩层的实现方式,觉得有很多都搞复杂了(利用前台代码+后台代码+数学计算),无疑增加了维护的难度。然而,本人参考了各位前辈的实现以后,自己实现了一个可重用LoadingPage控件,欢迎各位下载使用。

 

需求

  需求先行是必须的,我的目标是做成怎样一个效果呢?

    1.是一个控件,可以在.NET各环境中得以重用。

    2.可配置,例如颜色,大小,提醒字符串等等的属性,用户可以自定义,以满足用户所在情况的需求。

    3.大小比例自适应,不同大小的窗口载体,能自动改变自身大小比例。

    4.效果全部xaml实现,全部集中于xaml可控制难度不会大,维护起来方便,用户拷贝xaml也方便。

 

解决方法

    1.新建WPF用户控件库进行开发。

    2.使用依赖项属性,然后前台xaml使用属性绑定来实现。

    3.使用ViewBox控件(该控件能够自动缩放内容)。

    4.在xaml中的写动画代码。

结果展示

  

 

制作过程

  一:新建一个"WPF用户控件库"工程,新建一个WPF控件。(这步不解释)

  二:为了实现蒙罩效果,我们把控件的背景弄成黑色背景,并且透明度为0.2。

<UserControl.Background><SolidColorBrush Color="Black" Opacity="0.2" ></SolidColorBrush>
</UserControl.Background>

  三:然后就是先利用Canvas作为背景,在其上画一个由小圆圈构成的大圈,使用控件Ellipse。

<Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center"  x:Name="loadCancas"VerticalAlignment="Center" Width="120"  Height="120" ><Canvas.Resources><Style TargetType="Ellipse"><Setter Property="Width" Value="10" ></Setter><Setter Property="Height" Value="10" ></Setter><Setter Property="Canvas.Left" Value="30"></Setter><Setter Property="Canvas.Top" Value="30"></Setter><Setter Property="Stretch" Value="Fill"></Setter><Setter Property="Fill" Value="Blue"></Setter><Setter Property="RenderTransformOrigin" Value="3,3"></Setter></Style></Canvas.Resources><Ellipse ></Ellipse><Ellipse Opacity="0.9"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="36"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.8"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="72"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.7"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="108"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.6"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="144"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.5"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="180"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.4"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="216"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.3"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="252"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.2"><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="288"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Ellipse Opacity="0.1" ><Ellipse.RenderTransform><TransformGroup><RotateTransform Angle="324"/></TransformGroup></Ellipse.RenderTransform></Ellipse><Canvas.RenderTransform><TransformGroup><RotateTransform x:Name="SpinnerRotate"  Angle="0" /></TransformGroup></Canvas.RenderTransform></Canvas></Grid>

  这样就形成了一个圈,然后为了实现目标3(内容能自动改变大小),使用一个viewBox作为容器,包住这个Canvas。(不贴代码了)

 

四:旋转动画编写。

  因为我在Canvas画了一个圈,然而我只需无限旋转Canvas便可实现像小圆圈在动一样。下面看一下Canvas的触发器,在触发器中实现动画的编写。

<Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard Name="loadAnimation"><Storyboard>
        <DoubleAnimation Storyboard.TargetName="loadCancas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" From="360" To="0" RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="Unloaded"><StopStoryboard BeginStoryboardName="loadAnimation"></StopStoryboard></EventTrigger> </Canvas.Triggers>

 

五:属性可配置,使用依赖属性,并且在xaml中写绑定,下面先看后台代码中的依赖项属性的定义,然后前台绑定就补贴了,统一在附件中可以看到。

public partial class LoadingPage : UserControl{public LoadingPage(){InitializeComponent();}#region 加载圆圈的margin[DescriptionAttribute("加载圆圈的margin"), CategoryAttribute("扩展"), DefaultValueAttribute(0)]public string LoadCirclesMargin{get { return (string)GetValue(LoadCirclesMarginProperty); }set { SetValue(LoadCirclesMarginProperty, value); }}public static readonly DependencyProperty LoadCirclesMarginProperty =DependencyProperty.Register("LoadCirclesMargin", typeof(string), typeof(LoadingPage),new FrameworkPropertyMetadata("50"));#endregion#region 加载中的提示[DescriptionAttribute("加载中的提示"), CategoryAttribute("扩展"), DefaultValueAttribute(0)]public string LoadingText{get { return (string)GetValue(LoadingTextProperty); }set { SetValue(LoadingTextProperty, value); }}public static readonly DependencyProperty LoadingTextProperty =DependencyProperty.Register("LoadingText", typeof(string), typeof(LoadingPage),new FrameworkPropertyMetadata("加载中"));#endregion#region 加载中的提示的字体大小[DescriptionAttribute("加载中的提示的字体大小"), CategoryAttribute("扩展"), DefaultValueAttribute(0)]public int LoadingTextFontSize{get { return (int)GetValue(LoadingTextFontSizeProperty); }set { SetValue(LoadingTextFontSizeProperty, value); }}public static readonly DependencyProperty LoadingTextFontSizeProperty =DependencyProperty.Register("LoadingTextFontSize", typeof(int), typeof(LoadingPage),new FrameworkPropertyMetadata(12));#endregion#region 圆圈的颜色[DescriptionAttribute("圆圈的颜色"), CategoryAttribute("扩展"), DefaultValueAttribute(0)]public Brush CirclesBrush{get { return (Brush)GetValue(CirclesBrushProperty); }set { SetValue(CirclesBrushProperty, value); }}public static readonly DependencyProperty CirclesBrushProperty =DependencyProperty.Register("CirclesBrush", typeof(Brush), typeof(LoadingPage),new FrameworkPropertyMetadata(Brushes.Black));#endregion#region 加载中的提示的字体颜色[DescriptionAttribute("加载中的提示的字体颜色"), CategoryAttribute("扩展"), DefaultValueAttribute(0)]public Brush LoadingTextForeground{get { return (Brush)GetValue(LoadingTextForegroundProperty); }set { SetValue(LoadingTextForegroundProperty, value); }}public static readonly DependencyProperty LoadingTextForegroundProperty =DependencyProperty.Register("LoadingTextForeground", typeof(Brush), typeof(LoadingPage),new FrameworkPropertyMetadata(Brushes.DarkSlateGray));#endregion}

 

大功告成!!!!上面的代码都是为了展示原理而分拆出来的零碎代码,如果想使用该控件,可以点下面的下载

                                    完整Demo下载

posted on 2018-09-22 01:18 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/9689225.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/426746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理?送你满分答案...

(本文适合所1-3年的前端阅读)原文链接&#xff1a;http://blog.poetries.top/2019/01/02/browser-cache/一、浏览器缓存基本认识分为强缓存和协商缓存浏览器在加载资源时&#xff0c;先根据这个资源的一些http header判断它是否命中强缓存&#xff0c;强缓存如果命中&#xff0…

实例59:python

#题目&#xff1a;计算字符串长度 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘strlen’ print (len(sStr1))

C语言实战:(1) 整数的二进制表示

#include<stdio.h> int main( ) {int a; //待转换的整数scanf("%d",&a);//用左移位运算(移到符号位时a的正负)逐位判断0和1for(int i0,n 0;i<sizeof(int)*8;i,n,aa<<1){if(n%40&&n!0)putchar( );//控制格式的输出&#xff1a;每四位输出…

intern()方法的使用

intern() intern方法的作用是&#xff1a;如果字符串常量池中已经包含一个字符串等于此String对象的字符串&#xff0c;则返回常量池中的这个String对应的对象&#xff0c; 否则将其添加到常量池并返回常量池中的引用。 在jdk1.7以后&#xff0c;就不会像之前那样把String对象复…

华为做raid5步骤_华为验厂验厂流程如何?主要内容是什么呢?

华为作为民族企业是全球领先的信息与通信技术(ICT)解决方案供应商&#xff0c;消除数字鸿沟&#xff0c;促进经济、环境和社会的和谐与可持续发展是华为一直以来的可持续发展愿景。为此&#xff0c;华为不仅支持联合国可持续发展目标的实现&#xff0c;还同时与供应链上下游的客…

实例60:python

#题目&#xff1a;打印出杨辉三角形&#xff08;要求打印出10行如下图&#xff09;。 #!/usr/bin/python3 def Pascal(n): ls [[1]] for i in range (1, n): ls.append([1]) for j in range(1, i): ls[i].append(ls[i-1][j-1] ls[i-1][j]) ls[i].append(1) for i in range(0…

FUI- 我离钢铁侠还差几步?

本文来自网易云社区作者&#xff1a;马宝什么是FUI本文不累赘的可以自行Google&#xff0c;喜欢科幻的同学们都看一张图就能感受到FUI的魅力。本文算是一篇所见即所的&#xff0c;可边学边干的原创教程。总结全文就一句话&#xff0c;“让结构和表现分离&#xff0c;自下而上的…

C语言实战:(2)字符串的倒转变换

#include<stdio.h> #define N 50 void reverse(char s[]); //定义倒转函数 int main( ) {char s[N];scanf("%s",s);reverse(s); printf("%s",s);return 0; } void reverse(char s[]) {char c,*p,*q;pqs;while(*p!\0)p;p--; //保留\0不被交换//基本思…

亿嘉和机器人上市了吗_亿嘉和上半年收入持续增长,拟7亿元定增加码主业研发...

《电鳗财经》 赵超/文作为国内机器人行业中重要成员之一的亿嘉和(603666.SH)&#xff0c;在深耕省内市场、持续拓展省外市场的策略下&#xff0c;上半年收入延续一季度增长态势。《电鳗财经》注意到&#xff0c;在公布半年报的同时&#xff0c;亿嘉和也抛出了7.08亿元的定增方案…

实例61:python

#题目&#xff1a;查找字符串 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘abcdefg’ sStr2 ‘cde’ print (sStr1.find(sStr2))

阿斯克码表ACSII对照表

ASCII码对照表 信息在计算机上是用二进制表示的&#xff0c;这种表示法让人理解就很困难。 因此计算机上都配有输入和输出设备&#xff0c;这些设备的主要目的就是&#xff0c;以一种人类可阅读的形式将信息在这些设备上显示出来供人阅读理解。 为保证人类和设备&#xff0c;设…

dft计算傅里叶级数系数_一道国外的DFT性质的题目

由于上半年实在太忙太忙&#xff0c;所以导致很久没更新公众号了&#xff0c;特意向各位长期关注的小伙伴表示歉意。今天分享的是DFT性质的应用。背景&#xff1a;DFT的对称性在解题中是非常常见的&#xff0c;很多同学&#xff0c;一看到“实序列”就感觉无从下手。然而它却是…

实例62:python

#输入3个数a,b,c&#xff0c;按大小顺序输出。 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: n1 int(input(‘n1 :\n’)) n2 int(input(‘n2 :\n’)) n3 int(input(‘n3 :\n’)) def swap(p1,p2):return p2,p1if n1 > n2 : n1,n2 swap(n1,n2) if n…

c语言笔记:转义字符

转义字符及其含义 转义字符含义转义字符含义\a响铃符\\反斜杠\b回退符?问号\f换页符\’单引号\n换行符\"双引号\r回车符\000八进制数\t横向制表符\xhh十六进制数\v纵向制表符

LightOJ 1393 Crazy Calendar(博弈)题解

题意&#xff1a;r*c方格中&#xff0c;每个格子有一定石子&#xff0c;每次移动每格任意数量石子&#xff0c;只能向下或者向右动一格&#xff0c;不能移动为败 思路&#xff1a;显然是Nim&#xff0c;到右下曼哈顿距离为偶数的不用管&#xff0c;因为先手动一下后手动一下最后…

扩容是元素还是数组_Map扩容源码

首先我们运行一段代码&#xff1a;此时运行&#xff0c;程序正常&#xff0c;接下来我们将注释放开&#xff1a;此时运行发现&#xff0c;OOM了&#xff1a;为什么new出来HashMap的时候并没有报OOM&#xff0c;而是在第一次进行put操作的时候才报的OOM&#xff1f;我们来看下ma…

实例63:python

#题目&#xff1a;输入数组&#xff0c;最大的与第一个元素交换&#xff0c;最小的与最后一个元素交换&#xff0c;输出数组 #!/usr/bin/python -- coding: UTF-8 -- a[1,2,3,7,9,8] for i in range(len(a)): if a[i]max(a): a[0],a[i]a[i],a[0] for i in range(len(a)): i…

css关于position的几个值

1. staitic:该值符合文档的初始排版&#xff0c;其中设置的与位置有关的值不起作用。2.relative 该值的偏移量&#xff0c;是在文档初始排版的基础上进行排版&#xff0c;并且覆盖顺序是最新输出的在最上面3.absolute该值元素的定位是以网页文档左上角位基准&#xff0c;并且不…

C语言笔记:格式化输入输出(fprintf、fscanf、sscanf...)

C语言笔记&#xff1a;格式化输入输出&#xff08;fprintf、fscanf、sscanf…) 包含以下函数的基本库&#xff1a;stdlib.h fprintf int fprintf(FILE *stream, const char *format,...) fprintf函数按照format说明的格式对输出进行转换&#xff0c;并写到stream流中。返回值是…

客户端配置_交换机作为STelnet客户端登录其他设备配置示例

交换机作为STelnet客户端登录其他设备配置示例1、组网需求图1 设备通过STelnet登录其他设备组网图如上图1所示&#xff0c;用户希望在服务器端和客户端进行安全的数据交互&#xff0c;配置两个登录用户为client001和client002&#xff0c;分别使用password认证方式和RSA认证方式…