浮出控件上方的叠加层答案

【问题标题】：Overlay above flyout浮出控件上方的叠加层
【发布时间】：2017-06-16 00:55:19
【问题描述】：

我有一个浮出控件，当用户更改其上的数据时，我想让它在内容加载时完全无法访问。我通过其他控件实现了这一点，方法是在 Z-Index 的最高点有一个带有 ProgressRing 的网格，我在加载数据之前显示并在之后隐藏。

问题是浮出控件呈现在所有其他内容之上，这使得它仍然可以访问。即使将页面的“IsEnabled”属性设置为“False”，也可以让其中的控件保持可见。

这是问题的屏幕截图：

外观：

（组合框是交互式的）

它应该是什么样子：

（ComboBox 不是交互式的）

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： uwp z-index flyout

【解决方案1】：

不确定我是否理解正确，但您可以尝试使用浮出控件内容的 IsHitTestVisible 和 Opacity 属性。我做了一个简单的例子，它是如何工作的——页面的 XAML：

<Page.Resources>
    <local:NullableToBool x:Key="NullConverter"/>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="400" Height="200">
    <ProgressRing Width="100" Height="100" Margin="50" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="Visible"
                  IsActive="{x:Bind TheButton.IsChecked, Mode=OneWay, Converter={StaticResource NullConverter}}"/>
    <Button Content="Show flyout" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="50">
        <Button.Flyout>
            <Flyout>
                <Border Background="Gray" IsHitTestVisible="{x:Bind IsActive, Mode=OneWay}" Opacity="{x:Bind FlyoutOpacity, Mode=OneWay}">
                    <ToggleButton Margin="20" x:Name="TheButton" IsChecked="False" Click="TheButton_Click" Content="Doing smth" Width="100"/>
                </Border>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

以及背后的代码：

public class NullableToBool : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return value is bool ? (bool)value : false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaiseProperty(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    private bool isActive = true;
    public bool IsActive
    {
        get { return isActive; }
        set { isActive = value; RaiseProperty(nameof(IsActive)); }
    }

    private double flyoutOpacity = 1.0;
    public double FlyoutOpacity
    {
        get { return flyoutOpacity; }
        set { flyoutOpacity = value; RaiseProperty(nameof(FlyoutOpacity)); }
    }

    public MainPage()
    {
        this.InitializeComponent();
    }

    private async void TheButton_Click(object sender, RoutedEventArgs e)
    {
        IsActive = false;
        FlyoutOpacity = 0.1;
        await Task.Delay(3000);
        IsActive = true;
        FlyoutOpacity = 1.0;
        (sender as ToggleButton).IsChecked = false;
    }
}

【讨论】：

【解决方案2】：

如果您只想在 ProgressRing 显示时阻止 UI。您可以在 Template10 中使用ModalDialog。

几乎每个应用程序都需要显示某种形式的模态对话框 - 一种 UI 元素，它会阻止与应用程序其余部分的交互，直到用户关闭它或完成某些应用程序任务。

【讨论】：