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=""
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
}
大功告成!!!!上面的代码都是为了展示原理而分拆出来的零碎代码,如果想使用该控件,可以点下面的下载
WPF 蒙罩层 LoadingPage的更多相关文章
- WPF loading遮罩层 LoadingMask
原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...
- WPF 蒙层罩,正在加载
参考园子里的一篇文章,比较好用.可以直接用,可以自己改. 动画效果: 容器的触发器,旋转容器: 属性配置:使用依赖属性,并且在xaml中写绑定.
- WPF+WEB+WinForm->>表现层共用类
首先在解决方案里新建一个类库,然后在解决方案里新建三个项目,WPF,WEB,WinForm,但是这三个项目都需要一个计算类进行计算,那么就在新建的类库Calculator里面放一个Calculat.c ...
- WPF中viewmodel层怎样得到view层的TabControl控件对象?
View层: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: ...
- JQuery-遮罩层
HTML <html> <head> <link href="StyleSheet.css" rel="stylesheet" t ...
- WPF蒙板弹窗
由于界面设计需要,要给弹窗添加蒙板效果,在百度和google搜索了半天,竟然没有一个满意的方案,最后只能自己想办法实现了一个,原理还是比较简单的,现在分享给大家. 先看一下效果.. 原理其实 ...
- css---遮罩层
<div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...
- bootstrapt model 的多罩层,禁用罩层
选项 有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的.下表列出了这些选项: 选项名称 类型/默认值 Data 属性 ...
- 黄聪:WordPress图片插件:Auto Highslide修改版(转)
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
随机推荐
- 1016 部分A+B (15 分)
// 题目不难,感觉变量定义的有点儿多了#include <iostream> #include <cmath> using namespace std; int main() ...
- node爬取页面元素
/** * Created by on 2018/12/25. */const http = require("https");const fs = require('fs'); ...
- .net core webapi 在原有基础上修改。
using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...
- linux切换php版本
1.查看php版本 find / -name .php 2.vim /etc/profile 3.加上export PATH=/usr/local/php5.6/bin:$PATH 4.source ...
- Ionic3,装饰器(@Input、@ViewChild)以及使用 Events 实现数据回调中的相关用法(五)
标题栏的渐变效果 使用到的相关装饰器.Class以及相关方法:@Input.@ViewChild.Content.ionViewDidLoad ① @Input 装饰器:用来获取页面元素自定义属性值. ...
- Robot Framework(Databaselibrary库操作)
1.安装 DatabaseLibrary 库 DatabaseLibrary 下载地址:https://pypi.python.org/pypi/robotframework-databaselibr ...
- 在用 Node.js 起服务之前,我们应该知道这些
网络分层 了解计算机网络的同学都知道 OSI 七层网络模型和 TCP/IP 模型.OSI 七层模型是理论上的网络通信模型,而 TCP/IP 是现实中的网络通信概念模型.它们之间的对比关系参考下图. 本 ...
- Visual Studio中判断项目的类型
1. 打开项目的属性,查看Application的Output type
- C#控件随窗体大小改变而改变
几种方法:1.点击控件,属性,里面有一个Dock,选择Fill,就会变得和它的父容器一样大.而且会随之变化.2.点击控件,属性,里面有一个Anchor,选择Top,Right,Bottom,Left. ...
- Hibernate 一对一映射(共享主键)