WPF loading遮罩层 LoadingMask

先上张效果图看看 如果不如您的法眼 可以移步了 或者有更好的效果 可以留言给我

废话不多说 直接贴代码 一个usercontrol

<UserControl x:Class="LoadingMask_Demo.LoadingWait"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             IsVisibleChanged="HandleVisibleChanged">
    <UserControl.Background>
        <SolidColorBrush Color="Black" Opacity="0.2"  />
    </UserControl.Background>
    <UserControl.Resources>
        <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
        <!--<SolidColorBrush Color="Black" x:Key="BackgroundColor" Opacity=".20" />-->
    </UserControl.Resources>

    <Viewbox Width="100" Height="100"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
        <Grid x:Name="LayoutRoot"
                Background="Transparent"
                ToolTip="Please wait...."
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <TextBlock Text="Loading..."  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Foreground="#FFE3953D" FontWeight="Bold" />
            <Canvas RenderTransformOrigin="0.5,0.5"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" Width="120"
                    Height="120" Loaded="HandleLoaded"
                    Unloaded="HandleUnloaded"  >
                <Ellipse x:Name="C0" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="1.0"/>
                <Ellipse x:Name="C1" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.9"/>
                <Ellipse x:Name="C2" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.8"/>
                <Ellipse x:Name="C3" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.7"/>
                <Ellipse x:Name="C4" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.6"/>
                <Ellipse x:Name="C5" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.5"/>
                <Ellipse x:Name="C6" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.4"/>
                <Ellipse x:Name="C7" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.3"/>
                <Ellipse x:Name="C8" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.2"/>
                <Canvas.RenderTransform>
                    <RotateTransform x:Name="SpinnerRotate"
                         Angle="0" />
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>
    </Viewbox>
</UserControl>

后台代码:

using System;
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;

namespace LoadingMask_Demo
{
    /// <summary>
    /// Interaction logic for LoadingWait.xaml
    /// </summary>
    public partial class LoadingWait : UserControl
    {
        #region Data
        private readonly DispatcherTimer animationTimer;
        #endregion

        #region Constructor
        public LoadingWait()
        {
            InitializeComponent();

            animationTimer = new DispatcherTimer(
                DispatcherPriority.ContextIdle, Dispatcher);
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 90);
        }
        #endregion

        #region Private Methods
        private void Start()
        {
            animationTimer.Tick += HandleAnimationTick;
            animationTimer.Start();
        }

        private void Stop()
        {
            animationTimer.Stop();
            animationTimer.Tick -= HandleAnimationTick;
        }

        private void HandleAnimationTick(object sender, EventArgs e)
        {
            SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
        }

        private void HandleLoaded(object sender, RoutedEventArgs e)
        {
            const double offset = Math.PI;
            const double step = Math.PI * 2 / 10.0;

            SetPosition(C0, offset, 0.0, step);
            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);
        }

        private void SetPosition(Ellipse ellipse, double offset,
            double posOffSet, double step)
        {
            ellipse.SetValue(Canvas.LeftProperty, 50.0
                + Math.Sin(offset + posOffSet * step) * 50.0);

            ellipse.SetValue(Canvas.TopProperty, 50
                + Math.Cos(offset + posOffSet * step) * 50.0);
        }

        private void HandleUnloaded(object sender, RoutedEventArgs e)
        {
            Stop();
        }

        private void HandleVisibleChanged(object sender,
            DependencyPropertyChangedEventArgs e)
        {
            bool isVisible = (bool)e.NewValue;

            if (isVisible)
                Start();
            else
                Stop();
        }
        #endregion
    }
}

调用的代码也贴出来吧
<Window x:Class="LoadingMask_Demo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:LoadingMask_Demo"
        >
    <DockPanel>
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
            <Button  Content="show" Width="70" Height="30" Click="ShowButton_Click" />
            <Button  Content="hide" Width="70" Height="30" Click="HideButton_Click"/>
        </StackPanel>

        <Grid Background="#FF484848" DockPanel.Dock="Bottom">
            <TextBlock Text="asdfasdfasdf" Foreground="White"/>
            <local:LoadingWait x:Name="_loading"  Visibility="Collapsed"/>
        </Grid>
    </DockPanel>
</Window>

后台代码

using System;
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;

namespace LoadingMask_Demo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ShowButton_Click(object sender, RoutedEventArgs e)
        {
            this._loading.Visibility = Visibility.Visible;
        }

        private void HideButton_Click(object sender, RoutedEventArgs e)
        {
            this._loading.Visibility = Visibility.Collapsed;
        }

    }
}
时间: 2024-10-05 22:10:29

WPF loading遮罩层 LoadingMask的相关文章

js 遮罩层 loading 效果

//调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerShow(text),text为参数,可以写入想要写入的提示语 //本方法在调用时会自动生成一个添加到body的div,并且会在调用隐藏遮罩层 LayerHide()时删除div //封装遮罩层div显示效果 //将其放在页面的div中加载 function loadDiv(text) { var div = &q

C# Winform 实现自定义半透明loading加载遮罩层

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 using System; 2 using System.Drawing; 3 using System.Windows.Forms; 4 using System.ComponentModel; 5   6 namespace MyOpaqueLayer 7 { 8 /// <summary> 9 /

ajax遮罩层

遮罩层2种方式: 引入jquery插件模式 1. 下载 showLoading.css , jquery.showLoading.min.js  两个文件 2. 引入这2个文件 <link href="style/showLoading.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jq

Winform应用程序实现通用遮罩层二

之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友好的另一种实现方案,废话不多说,直接进入主题. 一.实现思路(解决问题顺序): 透明遮罩: 1.实现可设置透明的Panel控件(MaskPanel): 2.Panel控件(MaskPanel)能够覆盖父容器(一般是当前窗体form对象)客户区区域(即:与父容器客户区区域大小相同),并处于最上层,保证父容器上的

C# Winform 实现自定义半透明遮罩层介绍

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 using System; 2 using System.Drawing; 3 using System.Windows.Forms; 4 using System.ComponentModel; 5   6 namespace MyOpaqueLayer 7 { 8     /// <summary>

java javaScript实现遮罩层 动态加载

通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码). 第一:效果图为 第二:实现如上效果的代码为 1:遮罩层css代码 <style type="text/css">#load{position:fixed; top: 0px; right:0px; bottom:0px;filter: a

简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

cvi_busy_lib.js: cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......")

遮罩层的创建

遮罩层,顾名思义,是对图层的某一部分进行遮罩,具体遮罩那一部分,又是如何实现呢? 如果我们画一个矩形,并且把该图层作为遮罩层,那么,我们所遮罩的是该矩形以外的内容,而且遮罩层仅对遮罩的图层起作用! 具体创建步骤如下: 1.新建一个图层,创造图像 2.零件一个图层,对原图层想显示部分做框选图形 3.右键新创建的图层为遮罩层 完成

Winform应用程序实现通用遮罩层

Winform应用程序实现通用遮罩层 在WEB上,我们在需要进行大数据或复杂逻辑处理时,由于耗时较长,一般我们会在处理过程中的页面上显示一个半透明的遮罩层,上面放个图标或提示:正在处理中...等字样,这样用户体验就比较好了,然而如果在Winform客户端程序,通常遮罩层的处理就显得不那么简单或不那么好看,而我今天要说明的是,我实现的这个Winform通用遮罩层,却可以实现类似WEB上的遮罩层,既可以透明,而且还可以显示动态图片以及文字,那如何实现的呢,我现在一一讲解. 首先要明确我们要实现的效果