忙指示模态对话框不覆盖BottomAppBar答案

【问题标题】：Busy indicating modal dialog doesn't cover BottomAppBar忙指示模态对话框不覆盖BottomAppBar
【发布时间】：2018-02-08 08:09:51
【问题描述】：

我使用了 Template10Sample 项目中的 Busy 对话框实现，不幸的是我在网络上找不到了

忙碌指示是作为 ModalDialog 实现的，并为其 ModalContent 分配了用户控制权。显示和隐藏它的代码可以在下面找到。

问题是我使用BottomAppBar 进行应用导航，并且该栏没有被模态对话框覆盖，并且所有按钮都保持可点击状态。看起来好像该栏不是窗口的内容，这很奇怪。

为什么？怎么样

var modal = Window.Current.Content as ModalDialog;
var view = modal.ModalContent as BusyControl;
if (view == null) {
    modal.ModalContent = view = new BusyControl();
}
modal.IsModal = view.IsBusy = busy;
view.BusyText = text;

XAML：

<UserControl
    x:Class="Foo.Views.BusyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Foo.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Viewbox Height="32" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ProgressRing Width="16" Height="16" Foreground="White" IsActive="{x:Bind IsBusy, Mode=OneWay}" />
            <TextBlock Grid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center" Foreground="White" Text="{x:Bind BusyText, Mode=OneWay, FallbackValue='TODO Localization Please Wait...'}" />
        </Grid>
    </Viewbox>

</UserControl>

看起来是这样的

我想我找到了问题的根源。检查可视化树后，我发现 CommandBar 位于 PopupRoot 树节点下（不知道它是什么，也无法搜索它），而 ModalDialog 和实际应用程序内容位于 RootScrollViewer/../ModalDialog/... 因此模态对话框无法覆盖命令栏本身。

不知道如何处理它。

【问题讨论】：

我想我找到了问题的根源。检查可视化树后，我发现 CommandBar 位于 PopupRoot 树节点下（不知道它是什么，也无法搜索它），而 ModalDialog 和实际应用程序内容位于 RootScrollViewer/../ModalDialog/... 因此模态对话框无法覆盖命令栏本身。不知道如何处理它。

标签： uwp template10 busyindicator

【解决方案1】：

MessageDialog 是内置的替代方案，使用起来非常简单。

它会“冻结”主窗口，直到您关闭它，您可以添加更多按钮和内容以及从中获取反馈。欲了解更多信息，请访问： https://docs.microsoft.com/en-us/uwp/api/windows.ui.popups.messagedialog

示例使用：

   private async void Button_Clicked_1(object sender, RoutedEventArgs e)//event 
        {
         MessageDialog dialog = new MessageDialog("My Modal Window");
            await dialog.ShowAsync();//waits for window to return

        }

正如您所见，托管此类窗口的函数必须是异步的，因此为了以编程方式启动此类窗口或任何类似的 UI 更改，请使用 Dispatcher：

  var dis=CoreApplication.MainView;    await dis.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, 
  () => { MessageDialog dialog = new MessageDialog("My Modal Window");
             await dialog.ShowAsync();//waits for window to return}

【讨论】：

【解决方案2】：

只有ContentDialog 和MessageDialog 可以是模态的。由于MessageDialog无法编辑，可以使用`ContentDialog'。

最终，您可以在所有内容上放置一个 Grid，它会正常工作：

<Grid>
   <Grid>
      ...
   </Grid>
   <Grid Visibility={x:Bind IsModal, Mode=OneWay} Background="#00000055">
            <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ProgressRing Width="16" Height="16" Foreground="White" IsActive="{x:Bind IsBusy, Mode=OneWay}" />
        <TextBlock Grid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center" Foreground="White" Text="{x:Bind BusyText, Mode=OneWay, FallbackValue='TODO Localization Please Wait...'}" />
   </Grid>
</Grid>

【讨论】：