Popup overlaps application bar

Question

I'm trying to show a fullscreen popup along with application bar. To do this I'm using such code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Name="myButton" Content="Show PopUP" Click="myButton_Click"/>
    <Popup x:Name="myPopup">
        <Grid Name="PopupsGrid" Background="ForestGreen">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="This is my PopUp"/>
        </Grid>
    </Popup>
</Grid>

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Label="Done" Icon="Setting"/>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="Command"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

private void myButton_Click(object sender, RoutedEventArgs e)
{
    var bounds = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds;

    PopupsGrid.Height = bounds.Height - 25; // to show the problem - normally we can substract BottomAppBar.Height
    PopupsGrid.Width = bounds.Width;
    myPopup.IsOpen = true;
}

I've figured out that we can use ApplicationView.GetForCurrentView().VisibleBounds to calculate the desired height. So far so good, but when I open the popup it overlaps the application bar (see picture 2). On the other hand once we open the appbar, it seems to be overlapped partially (see picture 3).

I've tested it both on desktop and mobile and the same problem occurs.

Am I missing something? How to put application bar above popup?

Answer 1

I don't think we can make sure commandbar is always above the popup. The popup command you saw in the third screenshot is actually a popup control so it can be above "myPopup" in this scenario. But, if you set the commandbar's IsSticky and IsOpen to true, when you click the button to show popup, it will hide the popup command. Popups follows this rule: latest on the top.

For the "overlapped partially" issue, instead of making the popup full screen, I think we can dynamically change the popup's height based on Commandbar's height.

One thing you may not notice is the height of LayoutRoot(Child of CommandBar) is larger than CommandBar's. By checking the default style of the CommandBar, you can find it uses Grid.Clip and RectangleGeometry.Transform to control the size of the commandbar we can see. You can also check it in the Live Visual Tree in VS. In my case, mycommandbar's Actual height is 48, and LayoutRoot's Actual Height is 60.

So as a workaround, in Compact mode, we can dynamically change the height of "myPopup" by listening the IsOpen property of the commandbar. If IsOpen = true, then substract the LayoutRoot's height(60), if IsOpen = false, substract the height of CommandBar(48).

This works for me.