WPF 类似jquery blockUI的遮罩Loading加载效果

最近一个小项目想用WPF重写一下，需要一个类似Jquery 的blockUI的遮罩层，在后台执行任务的过程中显示Loading...

网上找了一圈，很难找到一个可以现成使用的。最终在基于网上资料的基础上，稍微改造了一下。下面附上代码：

（此方案基于网络搜索获得，感谢提供对应方案的网友们）

1）新建一个BaseWindow.cs类文件

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;namespace xxx.yyy.zzz
{public class BaseWindow : Window{private string layerGridName = "layerGrid";public BaseWindow(){}public void ShowMask(string message){var form = Application.Current.MainWindow;//蒙板Grid layer = new Grid() { Background = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0)) };TextBlock tx = new TextBlock();tx.Text = string.IsNullOrEmpty(message) ? "加载中..." : message;tx.Padding = new Thickness(10, 5, 10, 5);tx.Background = new SolidColorBrush(Colors.White);tx.HorizontalAlignment = HorizontalAlignment.Center;tx.VerticalAlignment = VerticalAlignment.Center;layer.Children.Add(tx);//父级窗体原来的内容UIElement original = form.Content as UIElement;form.Content = null;//容器GridGrid container = new Grid();container.Name = layerGridName;container.Children.Add(original);//放入原来的内容container.Children.Add(layer);//在上面放一层蒙板form.Content = container;}public void CloseMask(){try{var form = Application.Current.MainWindow;Grid grid = form.Content as Grid;if (grid != null && grid.Name == layerGridName){//父级窗体原来的内容UIElement original = VisualTreeHelper.GetChild(grid, 0) as UIElement;//将父级窗体原来的内容在容器Grid中移除grid.Children.Remove(original);form.Content = original;}}catch{}}}
}

2）MainWidow窗体xaml文件中，使用<local:BaseWindow代替Window

<local:BaseWindow x:Class="xxx.yyy.zzz.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:xxx.yyy.zzz" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"><Grid><TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="64">窗体内容</TextBlock>        </Grid>
</local:BaseWindow>

3）MainWidow窗体文件后台代码中，继承改成BaseWindow

调用方式就是：ShowMask("xxx");

关闭遮罩就是：CloseMask();

    public partial class MainWindow : BaseWindow{public MainWindow(){InitializeComponent();}private void BaseWindow_Loaded(object sender, RoutedEventArgs e){ShowMask("加载中，请稍后...");}}

最终效果如图：

提示：代码中的命名空间手动做了随机修改，具体使用时要留意命名空间。

WPF 类似jquery blockUI的遮罩Loading加载效果相关推荐

jquery实现文件上传及loading加载效果
jQuery实现文件上传步骤 1.定义UI结构 2.验证是否选择了文件 3.向formdata中追加文件 4.使用jQuery的Ajax发起上传文件的请求核心代码 1.ajaxStart(callb ...
使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...
android 百分比loading,牛逼的loading加载效果
牛逼的loading加载效果介绍: AnimatedCircleLoadingView一个不错的loading加载效果,自定义AnimatedCircleLoadingView设置startDete ...
element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果. 解决思路如下: 结合elementui本身的标 ...
CSS Loading 加载效果
平滑加载 /* 平滑加载 */ .progress-1 {width: 120px;height: 20px;background: linear-gradient(#000 0 0) 0/0% no ...
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
vue 集成 Loading 加载效果
文章目录 1. 工具类 2. 插件官网 3. 导入js 4.. 使用 5. 效果图 1. 工具类 Loading = {show: function () {$.blockUI({message: ' ...
移动端最强适配（rem适配之px2rem）移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
vue项目中，设置页面局部loading加载效果（element）
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图话不多说,直接上代码封装好的loading.js i ...

WPF 类似jquery blockUI的遮罩Loading加载效果

WPF 类似jquery blockUI的遮罩Loading加载效果相关推荐

最新文章

热门文章