WPFLoading遮层罩
一直想实现这么个功能来着,所以去网上搜了资料,复杂的看不懂,后来挑了一个最简单的,复用了这位大神的很多代码(大神看到了别打脸
)。这位大神是用UserControl,使用时则是调用用户控件中的方法。之前有用过Telerik的RadBusyIndicator,感觉很好,它是将要遮罩部分直接以内容的形式包裹在RadBusyIndicator的Content属性中,使用时就更简单了,IsBusy=true时遮层罩开启,IsBusy=false遮层罩关闭/隐藏。一为了实现起来不复杂,二为了实现RadBusyIndicator的用法,实现自己的自定义控件,所以才有了这篇文章,先上效果图
接下来先上自定义控件前台代码:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyBusyIndicator">
<SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
<Style TargetType="{x:Type local:BusyIndicator}">
<Setter Property="Background" Value="#FFFFC0CB"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:BusyIndicator}">
<Grid>
<ContentControl x:Name="PART_Content" Content="{TemplateBinding Content}" />
<Border x:Name="PART_Border" Visibility="Hidden" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
Opacity="0.5">
</Border>
<Grid x:Name="PART_LayoutRoot"
Background="Transparent"
ToolTip="Please wait...."
HorizontalAlignment="Center"
VerticalAlignment="Center" Visibility="Hidden">
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="PART_Canvas"
HorizontalAlignment="Center"
VerticalAlignment="Center" Width="120"
Height="120">
<Ellipse x:Name="PART_C0" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="1.0"/>
<Ellipse x:Name="PART_C1" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.9"/>
<Ellipse x:Name="PART_C2" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.8"/>
<Ellipse x:Name="PART_C3" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.7"/>
<Ellipse x:Name="PART_C4" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.6"/>
<Ellipse x:Name="PART_C5" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.5"/>
<Ellipse x:Name="PART_C6" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.4"/>
<Ellipse x:Name="PART_C7" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.3"/>
<Ellipse x:Name="PART_C8" Width="20" Height="20"
Canvas.Left="0"
Canvas.Top="0" Stretch="Fill"
Fill="{StaticResource CirclesColor}" Opacity="0.2"/>
<Canvas.RenderTransform>
<RotateTransform x:Name="PART_SpinnerRotate"
Angle="0" />
</Canvas.RenderTransform>
</Canvas>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
下面的是自定义控件的后台逻辑和依赖属性:
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;
{
/// <summary>
/// 按照步骤 1a 或 1b 操作,然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
///
/// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
/// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
/// 元素中:
///
/// xmlns:MyNamespace="clr-namespace:MyBusyIndicator"
///
///
/// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
/// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
/// 元素中:
///
/// xmlns:MyNamespace="clr-namespace:MyBusyIndicator;assembly=MyBusyIndicator"
///
/// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用,
/// 并重新生成以避免编译错误:
///
/// 在解决方案资源管理器中右击目标项目,然后依次单击
/// “添加引用”->“项目”->[浏览查找并选择此项目]
///
///
/// 步骤 2)
/// 继续操作并在 XAML 文件中使用控件。
///
/// <MyNamespace:BusyIndicator/>
///
/// </summary>
public class BusyIndicator : Control
{
private readonly DispatcherTimer animationTimer;
static BusyIndicator()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BusyIndicator), new FrameworkPropertyMetadata(typeof(BusyIndicator)));
}
{
get { return (bool)GetValue(IsBusyProperty); }
set { SetValue(IsBusyProperty, value); }
}
{
get { return GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
{
BusyIndicator indicator = sender as BusyIndicator;
if ((bool)e.NewValue == true)
{
indicator.Start();
}
else
{
indicator.Stop();
}
}
{
animationTimer = new DispatcherTimer(
DispatcherPriority.ContextIdle, Dispatcher);
animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 90);
}
#region Private Methods
private void Start()
{
if (this.IsInitialized)
{
Border border = GetTemplateChild("PART_Border") as Border;
border.Visibility = Visibility.Visible;
Grid grid = GetTemplateChild("PART_LayoutRoot") as Grid;
grid.Visibility = Visibility.Visible;
animationTimer.Tick += HandleAnimationTick;
animationTimer.Start();
}
}
{
if (this.IsInitialized)
{
Border border = GetTemplateChild("PART_Border") as Border;
Grid grid = GetTemplateChild("PART_LayoutRoot") as Grid;
border.Visibility = Visibility.Hidden;
grid.Visibility = Visibility.Hidden;
animationTimer.Stop();
animationTimer.Tick -= HandleAnimationTick;
}
}
{
RotateTransform SpinnerRotate = GetTemplateChild("PART_SpinnerRotate") as RotateTransform;
SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
}
double posOffSet, double step)
{
ellipse.SetValue(Canvas.LeftProperty, 50.0
+ Math.Sin(offset + posOffSet * step) * 50.0);
+ Math.Cos(offset + posOffSet * step) * 50.0);
}
{
base.OnApplyTemplate();
const double step = Math.PI * 2 / 10.0;
Ellipse C1 = GetTemplateChild("PART_C1") as Ellipse;
Ellipse C2 = GetTemplateChild("PART_C2") as Ellipse;
Ellipse C3 = GetTemplateChild("PART_C3") as Ellipse;
Ellipse C4 = GetTemplateChild("PART_C4") as Ellipse;
Ellipse C5 = GetTemplateChild("PART_C5") as Ellipse;
Ellipse C6 = GetTemplateChild("PART_C6") as Ellipse;
Ellipse C7 = GetTemplateChild("PART_C7") as Ellipse;
Ellipse C8 = GetTemplateChild("PART_C8") as Ellipse;
SetPosition(C1, offset, 1.0, step);
SetPosition(C2, offset, 2.0, step);
SetPosition(C3, offset, 3.0, step);
SetPosition(C4, offset, 4.0, step);
SetPosition(C5, offset, 5.0, step);
SetPosition(C6, offset, 6.0, step);
SetPosition(C7, offset, 7.0, step);
SetPosition(C8, offset, 8.0, step);
{
this.Start();
}
else
{
this.Stop();
}
}
}
}
以上便是全部控件的代码了,为了能够使用它,我将他单独编译成了一个dll,下面是如何使用该控件的例子,前台代码如下:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomControls"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="CustomControls.MainWindow"
xmlns:my="clr-namespace:MyBusyIndicator;assembly=MyBusyIndicator"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
<my:BusyIndicator x:Name="busy">
<my:BusyIndicator.Content>
<Grid>
<DataGrid>
<DataGrid.Columns>
<DataGridTextColumn Header="第一列"/>
<DataGridTextColumn Header="第二列"/>
<DataGridTextColumn Header="第三列"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</my:BusyIndicator.Content>
</my:BusyIndicator>
<Button Content="Button" HorizontalAlignment="Right" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
</Window>
记得注意引用的命名空间和程序集,下面是后台代码:
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
{
busy.IsBusy = !busy.IsBusy;
}
{
busy.IsBusy = true;
}
}
}
OK,全部代码都已上。简单的说一句,不怎么会使用CSDN,不知道怎么插入代码,所以只好选择全部复制,一个很简单的控件。
WPFLoading遮层罩的更多相关文章
- JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- js弹出遮层
<script> var docEle = function () { return document.getElementById(arguments[0]) || false; } f ...
- WPF 蒙层罩,正在加载
参考园子里的一篇文章,比较好用.可以直接用,可以自己改. 动画效果: 容器的触发器,旋转容器: 属性配置:使用依赖属性,并且在xaml中写绑定.
- 《Spring 3.x 企业应用开发实战》目录
图书信息:陈雄华 林开雄 编著 ISBN 978-7-121-15213-9 概述: 第1章:对Spring框架进行宏观性的概述,力图使读者建立起对Spring整体性的认识. 第2章:通过一个简单的例 ...
- VS中的 MD/MT设置 【转】
VS系列工具作为目前微软主打的集成开发环境,在历经了近20多年的发展后,到如今已经可以 说是Windows平台上各种IDE环境中的翘楚了.很多别的开发工具已经难望其项背了,如今VS2010也已经面市很 ...
- 纯CSS实现柱形图
CSS在处理排版之强大,没有做不到,只有想不到.下面我们将一同实现一个柱状图. 先打好一个具体的框架.我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充. < ...
- Metronic 使用到的开源插件汇总
Metronic 是一套完整的 UI 模板,但不仅仅是模板,更应该说是一个 UI 框架.它除了提供了大量网页模板,也提供了非常多的 UI 组件,并且应用了众多 jQuery 插件.通过这些资源的整合, ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- Android刮刮卡自定义控件
网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLay ...
随机推荐
- 算法笔记_106:蓝桥杯练习 算法提高 周期字串(Java)
目录 1 问题描述 2 解决方案 2.1 第一印象解法(80分) 2.2 借鉴网友解法(100分) 1 问题描述 问题描述 右右喜欢听故事,但是右右的妈妈总是讲一些“从前有座山,山里有座庙,庙里有 ...
- 回顾 git 常用命令
git init 在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹. git clone 获取一个u ...
- CentOS安装rz\sz命令
执行以下命令进行安装: yum install lrzsz 安装完成后即可操作rz和sz命令. rz:本地文件上传. sz:Linux系统文件下载到本地.
- EF 表联合查询 join
有两张表m_Dept.m_User,联合查询 linq方式.EF方式 private void Add() { List<m_Dept> lst = new List<m_Dept& ...
- HTTP 状态码总结 (HTTP Status Codes)
今天与同事聊天中提及到HTTP状态码的问题,突然发现工作这么些年对这个天天打交道的东西也没有一个详细的了解.日常最常见的状态码莫过于500和404了,几乎从事IT的应该都知道或许不从事的都知道,呵呵! ...
- STM32关总中断的语句
__set_PRIMASK();//关总中断 /************ **********/ __set_PRIMASK();//开总中断
- Linux 基础学习(第一节)
IP地址的配置 配置临时IP地址 ifconfig etho 192.168.0.91 255.255.255.0 图形化下面配置IP地址: 重启网卡服务: shell环境配置网卡信息 必备的参数 关 ...
- Atitit.jpg png格式差别以及解决jpg图片不显示的问题
Atitit.模板引擎原理以及常见模板技术 1. Asp Php jsp smarty模板1 1.1. 模板引擎基本原理1 1.2. 调试模式原理2 2. Attilax总结的模板引擎原理2 3. 支 ...
- MooseFS基础和安装
一.MooseFS简介 1.介绍 MooseFS是一个具备冗余容错功能的分布式网络文件系统,它将数据分别存放在多个物理服务器单独磁盘或分区上,确保一份数据有多个备份副本.对于访问的客户端或者用户来说, ...
- KVC之-setValue:forKey:方法实现原理与验证
KVC之-setValue:forKey:方法实现原理与验证 - (void)setValue:(id)value forKey:(NSString *)key方法,实现原理与验证 功能:使用一个字符 ...