WPF---页面内遮罩层的非弹窗方案实现（透明遮罩+动画加载条）

 页面效果：点击Load按钮后，5s遮罩+加载条动画

 

实现思路：通过控制页面元素的层叠关系，用透明元素覆盖的效果达到页面内遮罩效果。

加载条动画采用第三方HandyControl里的加载条。

代码：

Xaml

<Window x:Class="LoadingTest.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:LoadingTest"
        xmlns:hc="https://handyorg.github.io/handycontrol"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" x:Name="layer1" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Width="300" Height="100" FontSize="50" Text="Layer1" TextAlignment="Center" />
        </Grid>
        <Grid Grid.Row="0" x:Name="layer2" Opacity="0.5" Background="Gray" Visibility="Collapsed">
            <hc:LoadingCircle Width="100" Height="100" Foreground="White"/>
        </Grid>
        <Button Grid.Row="1" Content="Load" Click="Button_ClickAsync"/>
    </Grid>
</Window>

C#

  private async void Button_ClickAsync(object sender, RoutedEventArgs e)
  {
      //Panel.SetZIndex(layer1, 0);
      //Panel.SetZIndex(layer2, 1);
      //await Task.Delay(5000);
      //Panel.SetZIndex(layer1, 1);
      //Panel.SetZIndex(layer2, 0);

      layer2.Visibility = Visibility.Visible;
      await Task.Delay(5000);
      layer2.Visibility = Visibility.Collapsed;
  }

踩坑提示：

        1. 通过Panel.ZIndex来控制层叠关系感觉理论上是可行的，但是不生效，可能有些节窍，我还没搞明白。还是控制Visibility属性实测好用，而且可以把Visibility直接通过MVVM绑定ViewModel的属性，做到改变及时响应。

 private Visibility isLoading;
 /// <summary>
 /// 加载条
 /// </summary>
 public Visibility IsLoading
 {
     get => isLoading;
     set => SetProperty(ref isLoading, value);
 }

<Grid x:Name="LoadingGrid" Background="Gray" Opacity="0.5"  Visibility="{Binding IsLoading}">
     <hc:LoadingCircle Width="80" Height="80"  Style="{StaticResource LoadingCircleLargeLight}"/>
</Grid>

        2. 通过自定义Window弹窗的方法，需要设置Window无边框，窗口的大小和定位也需要计算，还需要传递父页面元素内容，比较复杂。自定义Window弹窗方案不如页面内控制空间位置来的简单，还可以跟随主窗口大小随时变化，效果好。

        3.注意！！！Visibility属性改变过程在同一方法内时，等待过程一定要异步await，否则页面布局属性的改变不会即时的响应在页面上。UpdateLayout（）；调用也不好使！！！实在不行就把Visibility变化之间的代码用Task.Run给包起来。

IsLoading = Visibility.Visible;

await Task.Run(() =>
{
    //执行
});

IsLoading = Visibility.Collapsed;