WPF loading遮罩层 LoadingMask

WPF loading遮罩层 LoadingMask

原文:WPF loading遮罩层 LoadingMask

大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧

今天就为大家介绍下遮罩的制作

源码下载 点击此处

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

废话不多说 直接贴代码 一个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;

        }

    }

}