【WPF】BusyIndicator做Loading遮罩层
百度了一下,粗略看了几个国内野人的做法,花了时间看下去感觉不太好用(比如有Loading居然只是作为窗体的一个局部控件的,没法全屏遮罩,那要你有何用?),于是谷歌找轮子去。
好用的轮子:http://wpftoolkit.codeplex.com/wikipage?title=BusyIndicator
引入DLL(在官网或者Nuget里下载)、引入名称空间等步骤根据官方的文档来操作就好了,很简单。
测试如下:
前台代码 MainWindow.xaml:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit">
<!-- 如有需要,可以引入样式资源 -->
<!--<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Style/LoadingMaskStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>-->
<StackPanel VerticalAlignment="Center">
<xctk:BusyIndicator x:Name="_busyIndicator" IsBusy="False"
BusyContent="少女祈祷中..." Background="Red">
<!--<xctk:BusyIndicator.OverlayStyle>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="#ffffeeee"/>
</Style>
</xctk:BusyIndicator.OverlayStyle>-->
<!--<xctk:BusyIndicator.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</xctk:BusyIndicator.ProgressBarStyle>-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Click="Show" Content="LLLL" Height="40" Width="60"/>
<Button Click="Show" Content="LLLL" Height="40" Width="60"/>
<Button x:Name="btn" Click="btn_OnClick" Content="测试" Height="40" Width="60"/>
<Button Click="Show" Content="RRRR" Height="40" Width="60"/>
<Button Click="Show" Content="RRRR" Height="40" Width="60"/>
</StackPanel>
</xctk:BusyIndicator>
</StackPanel>
</Window>
对应的后台代码 MainWindow.xaml.cs:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
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;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btn_OnClick(object sender, RoutedEventArgs e)
{
BackgroundWorker worker = new BackgroundWorker();
//this is where the long running process should go
worker.DoWork += (o, ea) =>
{
//no direct interaction with the UI is allowed from this method
for (int i = 0; i < 100; i++)
{
System.Threading.Thread.Sleep(100);
}
};
worker.RunWorkerCompleted += (o, ea) =>
{
//work has completed. you can now interact with the UI
_busyIndicator.IsBusy = false;
};
//set the IsBusy before you start the thread
_busyIndicator.IsBusy = true;
worker.RunWorkerAsync();
}
private void Show(object sender, RoutedEventArgs e)
{
MessageBox.Show("还能点!");
}
}
}
运行效果如下:
注意点:
- 想要这个BusyIndicator全屏遮罩,需要把它作为这个Window的直接子节点。而这个BusyIndicator控件自身也只能包含一个子节点,所以可用一个Grid或StackPanel标签做包裹。
- 官方文档中没有说到BusyIndicator的XMAL全屏遮罩写法,我是看youtube这个小哥这么写的:
2016.12.29下午更新:
发现一个问题,当在worker.DoWork委托中执行的操作需要修改UI时,会发生运行时异常:
Additional information: 该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改。
意思是说,UI是由UI线程创建并维护的,BackgroundWorker对象作为一个新建的子线程,无法跨线程操作UI(这点跟Android很像嘛),想要跨线程操作UI,需要使用Dispatcher分发器机制。所以worker.DoWork的代码修改一下就好了:
worker.DoWork += (o, ea) =>
{
//no direct interaction with the UI is allowed from this method
// 不需要操作UI的代码
// ...
// 需要操作UI的代码
App.Current.Dispatcher.Invoke((Action)delegate
{
// 如MVVM中其他Controller、ViewModel中操作UI的方法
designController.Initialize();
webImageViewModel.UpdateImages(designId);
});
};
重要参考:
https://elegantcode.com/2009/07/03/wpf-multithreading-using-the-backgroundworker-and-reporting-the-progress-to-the-ui/
https://elegantcode.com/2011/10/07/extended-wpf-toolkitusing-the-busyindicator/ 最后一个例子有提及Dispatcher
https://vkishorekumar.wordpress.com/2011/07/18/what-is-thread-affinity/ 报错原因:线程的紧密性(亲和性?)
【WPF】BusyIndicator做Loading遮罩层的更多相关文章
- WPF loading遮罩层 LoadingMask
原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...
- js实现的简单遮罩层
超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前loading,执行成功后loaded /* * 显示loading遮罩层 */ function loading() { var m ...
- JS实现遮罩层
/* * 显示loading遮罩层 */ function loading() { var mask_bg = document.createElement("div"); mas ...
- js 遮罩层 loading 效果
//调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...
- C# Winform 实现自定义半透明loading加载遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...
- Android UI设计--半透明效果对话框及activity(可做遮罩层)
下面是style的一些属性及其解释 <style name="dialog_translucent" parent="@android:style/Theme.Di ...
- Android自定义遮罩层设计
在做网页设计时,前端设计人员会经常用到基于JS开发的遮罩层,并且背景半透明.这样的效果怎么样在Android上实现呢?这个实现并不困难,先来上效果图: <ignore_js_op> 201 ...
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- div+css遮罩层
曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...
随机推荐
- iOS获取手机型号,Swift获取手机型号(类似iphone 7这种,检测机型具体型号)
获取手机设备信息,如name.model.version等, 但如果想获取具体的手机型号,如iphone5.5s这种,就需要如下这种(含Swift和OC两种写法) Swift建议添加到extensio ...
- Linux命令-工作管理命令:&,ctrl+z,jobs,fg,bg
在linux下面将一个进程放入后台执行,有两种方式: 第一种方式:&表示命令在后台执行程序,等同于windows里面的程序最小化. 第二种方式:执行某一个命令,例如:top,然后按ctrl+z ...
- C#基础 - C# 的 常见概念简述
在上篇文章中,你跟着我写了一个HelloWorld,本篇中,我们来谈谈一些C#程序中的小概念 1.C# 程序结构 一个 C# 程序主要包括以下部分: 命名空间声明(Namespace declarat ...
- 转:造HTTP请求Header实现“伪造来源IP”
构造 HTTP请求 Header 实现“伪造来源 IP ” 在阅读本文前,大家要有一个概念,在实现正常的TCP/IP 双方通信情况下,是无法伪造来源 IP 的,也就是说,在 TCP/IP 协议中,可以 ...
- 关于Andorid的RecyclerView在V7包下找不到的解决办法
关于Andorid的RecyclerView在V7包下找不到的解决办法 最近在学习使用RecyclerView替换现有的ListView,看了几篇文章.当准备自己动手实现的时候发现,V7包下找不到 ...
- 可重入函数、线程安全、volatile
一. POSIX 中对可重入和线程安全这两个概念的定义: Reentrant Function:A function whose effect, when called by two or more ...
- Singleton - 单例模式和Double-Checked Locking - 双重检查锁定模式
问题描述 现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能:在实际开发过程中,会专门有一个日志模块,负责写日志,由于在系统的任何地方,我们都有可能要调用日志模块中的函数,进 ...
- 锻造完美U盘小偷:活用消息机制
锻造完美U盘小偷:活用消息机制作者:灰狐来源:灰狐's Blog 注:本文已发表在<黑客防线>2008年第1期,转载请注明出处. 以前经常看到有人做出一些蛮有意思的小工具,其中最多的似乎就 ...
- JEECG中datagrid方法自定义查询条件
自定义加添加查询条件的用法: CriteriaQuery cq = new CriteriaQuery(EquipmentEntity.class, dataGrid); //查询条件组装器 org. ...
- SQL中的LIKE中用参数化查询
今天终于学会怎么在like中用参数化查询啦..哈哈..再也不用担心sql注入了...