弹出窗口重叠应用栏

Question

我正在尝试使用应用栏显示全​​屏弹出窗口。要做到这一点，我正在使用这样的代码：

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

我已经发现我们可以使用 ApplicationView.GetForCurrentView（）。VisibleBounds 来计算所需的高度。到目前为止一切都那么好，但是当我打开弹出窗口时，它与应用程序栏重叠（见图2）。另一方面，一旦我们打开appbar，它似乎部分重叠（见图3）。

我在台式机和移动设备上都进行了测试，同样的问题就出现了。

我错过了什么吗？如何将应用程序栏放在弹出窗口上方？

Answer 1

我认为我们无法确保命令栏始终位于弹出窗口之上。您在第三个屏幕截图中看到的弹出命令实际上是一个弹出控件，因此它可以在此场景中位于“myPopup”之上。但是，如果将命令栏的IsSticky和IsOpen设置为true，当您单击按钮以显示弹出窗口时，它将隐藏弹出命令。弹出窗口遵循以下规则：最新的。

对于“部分重叠”问题，我认为我们可以根据Commandbar的高度动态更改弹出窗口的高度，而不是将弹出窗口全屏显示。

您可能没有注意到的一件事是LayoutRoot（CommandBar的Child）的高度大于CommandBar的高度。通过检查CommandBar的默认样式，您可以发现它使用Grid.Clip和RectangleGeometry.Transform来控制我们可以看到的命令栏的大小。您也可以在VS中的实时视觉树中进行检查。在我的例子中，mycommandbar的实际高度是48，而LayoutRoot的实际高度是60.

因此，作为一种变通方法，在Compact模式下，我们可以通过监听命令栏的IsOpen属性来动态更改“myPopup”的高度。如果IsOpen = true，则减去LayoutRoot的高度（60），如果IsOpen = false，则减去CommandBar（48）的高度。

这适合我。

Answer 2

尝试给你的布局一些填充？