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=""
Height="" >
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="" ></Setter>
<Setter Property="Height" Value="" ></Setter>
<Setter Property="Canvas.Left" Value=""></Setter>
<Setter Property="Canvas.Top" Value=""></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=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.8">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.7">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.6">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.4">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.3">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.2">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Opacity="0.1" >
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle=""/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="SpinnerRotate"
Angle="" />
</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="" To="" 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()]
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(""));
#endregion #region 加载中的提示
[DescriptionAttribute("加载中的提示"), CategoryAttribute("扩展"), DefaultValueAttribute()]
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()]
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());
#endregion #region 圆圈的颜色
[DescriptionAttribute("圆圈的颜色"), CategoryAttribute("扩展"), DefaultValueAttribute()]
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()]
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下载

WPF 蒙罩层 LoadingPage的更多相关文章

  1. WPF loading遮罩层 LoadingMask

    原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...

  2. WPF 蒙层罩,正在加载

    参考园子里的一篇文章,比较好用.可以直接用,可以自己改. 动画效果: 容器的触发器,旋转容器: 属性配置:使用依赖属性,并且在xaml中写绑定.

  3. WPF+WEB+WinForm->>表现层共用类

    首先在解决方案里新建一个类库,然后在解决方案里新建三个项目,WPF,WEB,WinForm,但是这三个项目都需要一个计算类进行计算,那么就在新建的类库Calculator里面放一个Calculat.c ...

  4. WPF中viewmodel层怎样得到view层的TabControl控件对象?

    View层: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: ...

  5. JQuery-遮罩层

    HTML <html> <head> <link href="StyleSheet.css" rel="stylesheet" t ...

  6. WPF蒙板弹窗

    由于界面设计需要,要给弹窗添加蒙板效果,在百度和google搜索了半天,竟然没有一个满意的方案,最后只能自己想办法实现了一个,原理还是比较简单的,现在分享给大家. 先看一下效果..      原理其实 ...

  7. css---遮罩层

    <div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...

  8. bootstrapt model 的多罩层,禁用罩层

    选项 有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的.下表列出了这些选项: 选项名称 类型/默认值 Data 属性 ...

  9. 黄聪:WordPress图片插件:Auto Highslide修改版(转)

    一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...

随机推荐

  1. vue混入函数问题

    vue开发时,遇到个问题, import mxTable from "#mixin/table"; 导入了一个混入mxTable,但是该混入函数中import了其他的js代码,此时 ...

  2. rest-assured之Schema validation(包括JSON Schema validation及Xml Schema validation)

    rest-assured从2.1.0版本开始支持  Schema 验证,包括JSON Schema validation及Xml Schema validation.我们之前断言响应体都是一个一个字段 ...

  3. Linux 高级安全SELinux的关闭

    Linux有一个高级安全组件,如果开启会输出打了的日志文件messages.如下: 导致/var/log/messages 达到11g root@cpp11 ~]# df -l文件系统         ...

  4. Java super和this小结

    区别 this() / this. super() / super. 功能 调用本类构造.方法.属性 调用父类构造.方法.属性 操作方法 先查找本类是否有制定的调用结构,如果没有则调用父类 直接调用父 ...

  5. oracle 表空间tablespace

    一.Oracle 表空间的组成 Everoone knows Oracle数据库真正存放数据的是数据文件,Oracle表空间是逻辑上的概念,他在物理上是并不存在的,把多个DataFile合并到一起就是 ...

  6. python+selenium的搭建过程

    搭建步骤 1.第一步没啥好说的,肯定是先安装python 下载地址:http://download.csdn.net/detail/intel80586/4297269 全部默认安装即可. 安装完毕后 ...

  7. Missy

    毕业两年了,非常怀念大学生活.有时间还想回去看看,为什么我的眼里常含着泪水,因为我对这片土地爱的深沉. 你问我大学时最后悔的事情是什么,可能是没有对她说 I like you 吧,至今偶尔也会想起她. ...

  8. js中的闭包理解一

    闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的 ...

  9. Django级联删除的选项

    Django级联删除的选项 Django模型中的on_delete属性具有如下选项: CASCADE 级联删除,也就是被引用的实体被删除后,相关的记录信息都会被删除. PROTECT 阻止删除被引用的 ...

  10. java中的各种命令参数

    java中有很多命令参数,这些命令参数有些是控制jvm行为的,有的则是供应用程序使用.我所了解的参数主要有三种,现在说一说这三种类型的参数. (1)命令行参数. 命令行参数就是类似与c语言的命令行参数 ...