ProgressRing（UWP）弹出框上方的覆盖图

Question

如图所示，使用ProgressRing（加载圆圈）时，我隐藏了所有控件（请参见图）。该项目是在Blank App（通用Windows平台）上编写的。显示ProgressRing时如何调暗所有控件。

controls showing

controls dimmed

Answer 1

如果要使所有控件变暗，可以在当前页面中放置一个不可见的层，并在其中添加ProgressRing。当您要显示ProgressRing时，将图层设置为可见。例如，我添加了一个不透明度为0.4的网格作为图层。

。xaml：

<Grid>
    <Grid x:Name="MyBorder" Background="Black" Visibility="Collapsed"  Opacity="0.4">
        <ProgressRing IsActive="True" Height="100" Width="100" x:Name="MyRing"/>
    </Grid>

    <StackPanel>
        <TextBlock Text="hello"></TextBlock>
        <TextBlock Text="world" ></TextBlock>
        <Button Click="Button_Click">show progress</Button>
        <Image Source="Assets/StoreLogo.png" Width="400" Height="400"></Image>
    </StackPanel>
</Grid>

。cs：

private async void Button_Click(object sender, RoutedEventArgs e)
{
    MyBorder.Visibility = Visibility.Visible;
    await Task.Delay(5000);
    MyBorder.Visibility = Visibility.Collapsed;
}