弹出窗口重叠应用程序栏

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）。另一方面，一旦我们打开应用栏，它似乎部分重叠（见图 3）。

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

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

Answer 1

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

Answer 2

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

对于 "overlapped partially" 问题，我认为我们可以根据 Commandbar 的高度动态更改弹出窗口的高度，而不是让弹出窗口全屏显示。

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

因此，作为解决方法，在紧凑模式下，我们可以通过侦听命令栏的 IsOpen 属性来动态更改 "myPopup" 的高度。如果IsOpen = true，则减去LayoutRoot的高度(60)，如果IsOpen = false，则减去CommandBar的高度(48)。

这对我有用。

弹出窗口重叠应用程序栏

Popup overlaps application bar

c#

popup

windows-10

windows-10-mobile

uwp