Busy indicating modal dialog doesn't cover BottomAppBar

Question

I've used Busy dialog implementation from a Template10Sample project which unfortunatelly I can't find on the web anymore

Busy indicating is implemented as ModalDialog with assigned user control to its ModalContent. The code displaying and hiding it can be found bellow.

The problem is that I use BottomAppBar for app navigation and this bar doesn't get covered by the modal dialog and all the buttons remain clicable. It looks as though the bar is not content of the window which is quite strange.

Why? How< Wut?:)

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>

This is how it looks like

---

I suppose I found the source of the problem. After inspecting visual tree I found that CommandBar sits under PopupRoot tree node (have no idea what it is and can't google it) while ModalDialog and actual application content sits at RootScrollViewer/../ModalDialog/... Hence Modal dialog cannot cover CommandBar itself.

Have no idea what to do with it.

Answer 1

MessageDialog is built in alternative that and very simple to use.

It 'freezes' the main window until you close it, you can add more buttons and content as well as grab feedback from it. For More Info visit: https://learn.microsoft.com/en-us/uwp/api/windows.ui.popups.messagedialog

example use:

   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

        }

As you can see the function hosting such window has to be Async, so in order to programmatically fire up such window or any similar UI change for that matter is to use a 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}

Answer 2

Only ContentDialog and MessageDialog can be modal. As MessageDialog can't be edited, you can use `ContentDialog'.

Eventually you can just place a Grid over everything and it will work fine:

<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>