UWP XAML弹出窗口不遵守VerticalAlignment吗？

Question

我正在尝试在Windows应用商店/ UWP应用中居中显示弹出窗口。

简而言之，我正在使用MainPage并添加...

• 带有一些文本的TextBlock
• 具有事件处理程序的Button ， Button_Click
• 一个名为popupTest的Popup popupTest 。 它包含...
  • 与...的Border
    • 一个StackPanel与
      • 一个TextBlock
      • 一个Button 。 此Button的事件句柄将Popup的IsOpen为false。

Button_Click调用_centerPopup ，它将尝试使Popup居中，然后将IsOpen设置为true 。 我无法使它正常工作。

private void _centerPopup(Popup popup, Border popupBorder, FrameworkElement extraElement = null)
{
    double ratio = .9; // How much of the window the popup fills, give or take. (90%)

    Panel pnl = (Panel)popup.Parent;
    double parentHeight = pnl.ActualHeight;
    double parentWidth = pnl.ActualWidth;

    // Min 200 for each dimension.
    double width = parentWidth * ratio > 200 ? parentWidth * ratio : 200;
    double height = parentHeight * ratio > 200 ? parentHeight * ratio : 200;

    popup.Width = width;
    popup.Height = height;

    //popup.HorizontalAlignment = HorizontalAlignment.Center;
    popup.VerticalAlignment = VerticalAlignment.Top;    // <<< This is ignored?!

    // Resize the border too. Not sure how to get this "for free".
    popupBorder.Width = width;
    popupBorder.Height = height;

    // Not using this here, but if there's anything else that needs resizing, do it.
    if (null != extraElement)
    {
        extraElement.Width = width;
        extraElement.Height = height;
    }
}

如果我不尝试在Button_Click中调整弹出窗口的大小并居中，这是单击“单击我”后得到的结果...

private void Button_Click(object sender, RoutedEventArgs e)
{
    //_centerPopup(this.popupTest, this.popupTestBorder);
    this.popupTest.IsOpen = true;
}

如果取消注释对_ centerPopup的调用， centerPopup得到此提示，并且弹出窗口位于按钮下方 ：

private void Button_Click(object sender, RoutedEventArgs e)
{
    _centerPopup(this.popupTest, this.popupTestBorder);
    this.popupTest.IsOpen = true;
}

不好 我以为 popup.VerticalAlignment = VerticalAlignment.Top; 会解决的。

FrameworkElement.VerticalAlignment属性

获取或设置在父元素（例如面板或项目控件）中组成该元素时应用于该元素的垂直对齐特性。

---

将弹出窗口移到StackPanel的顶部？

奇怪的是，如果我将Popup向上移动到StackPanel的顶部，它实际上会在显示后将其他控件下推。

单击不带 _centerPopup “单击我”：

看起来很有希望！ 它很好地悬浮在其他控件上，并且在关闭后对布局没有明显影响。

但是即使在注释掉将VerticalAlignment设置为Top之后，也要添加_centerPopup ，事情会死于可怕的，致命的死亡。

除非您注意到所有其他控件都被按下，否则它看起来很完美。 ??? 点击“点击关闭” 后，这里的：

其他控件将永久按下。 为什么会这样呢？ 弹出窗口大小不应该像我调整大小之前那样吗？

---

完整资料

XAML

<Page
    x:Class="PopupPlay.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PopupPlay"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Name="StackMain">
        <TextBlock>
            This is some text<LineBreak />
            This is some text<LineBreak />
            This is some text<LineBreak />
            This is some text<LineBreak />
        </TextBlock>
        <Button Click="Button_Click" Content="Click Me"></Button>

        <Popup x:Name="popupTest">
            <Border
                    Name="popupTestBorder"
                    Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                    BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
                    BorderThickness="2">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock Name="txtPopup"
                               Text="This is some text"
                               FontSize="24"
                               HorizontalAlignment="Center" />
                    <Button Name="btnClose"
                            Click="btnClose_Click"
                               Content="Click to close"></Button>
                </StackPanel>
            </Border>
        </Popup>
    </StackPanel>
</Page>

完整的MainPage.xaml.cs代码

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace PopupPlay
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            _centerPopup(this.popupTest, this.popupTestBorder);

            this.popupTest.IsOpen = true;
        }

        private void _centerPopup(Popup popup, Border popupBorder, FrameworkElement extraElement = null)
        {
            double ratio = .9; // How much of the window the popup fills, give or take. (90%)

            Panel pnl = (Panel)popup.Parent;
            double parentHeight = pnl.ActualHeight;
            double parentWidth = pnl.ActualWidth;

            // Min 200 for each dimension.
            double width = parentWidth * ratio > 200 ? parentWidth * ratio : 200;
            double height = parentHeight * ratio > 200 ? parentHeight * ratio : 200;

            popup.Width = width;
            popup.Height = height;

            //popup.HorizontalAlignment = HorizontalAlignment.Center;
            popup.VerticalAlignment = VerticalAlignment.Top;    // <<< This is ignored?!

            // Resize the border too. Not sure how to get this "for free".
            popupBorder.Width = width;
            popupBorder.Height = height;

            // Not using this here, but if there's anything else that needs resizing, do it.
            if (null != extraElement)
            {
                extraElement.Width = width;
                extraElement.Height = height;
            }
        }

        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            this.popupTest.IsOpen = false;
        }
    }
}

---

似乎有几个相关的问题。 我看不到可行的解决方案。 （注意：这些并不都是特定于UWP的。）

• XAML中的中心弹出窗口
• 将弹出窗口放在XAML中窗口的右上角
• 如何为高度可变的弹出窗口设置垂直偏移

痛苦的是，当该应用程序位于带有Pivot的更为复杂的网格中时，该设置也可以在另一个应用程序中为我工作，但我发现透视表有问题 。

Wpf的Placement 听起来很有希望 ，但在UWP领域并不存在。

Answer 1

您的Popup窗口位于垂直的StackPanel内部，这意味着StackPanel将在面板的其他子元素旁边放置弹出窗口，这就是为什么向下推文本的原因。

而且，面板会忽略VerticalAlignment ，因为面板为弹出窗口的大小分配了足够的垂直空间，因此没有空间将弹出窗口在分配的空间内垂直对齐。

我建议使用Grid作为Page的根元素，然后将StackPanel和Popup直接放在Grid内部，如下所示：

<Grid>
    <StackPanel Name="StackMain">
        <TextBlock>
        This is some text<LineBreak />
        This is some text<LineBreak />
        This is some text<LineBreak />
        This is some text<LineBreak />
        </TextBlock>
        <Button Click="Button_Click" Content="Click Me"></Button>
    </StackPanel>
    <Popup x:Name="popupTest">
        <Border
                Name="popupTestBorder"
                Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
                BorderThickness="2">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Name="txtPopup"
                           Text="This is some text"
                           FontSize="24"
                           HorizontalAlignment="Center" />
                <Button Name="btnClose"
                        Click="btnClose_Click"
                           Content="Click to close"></Button>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

当您希望有重叠的元素或不影响任何其他子元素的位置和大小的多个元素时， Grid就是很好的选择。 您希望弹出窗口的布局与堆栈面板及其子级的布局分开 ，因此您应该这样组织XAML。

Answer 2

尝试如下更改您的xaml ...

<Page...>
    <Grid x:Name="LayoutRoot">
        <Popup>
        </Popup>

        <Grid x:Name="ContentPanel">
        </Grid>
    </Grid>
</Page>

因此，将Popup控件移到内容区域之外，然后将所有内容放入您的stacklayout到ContentPanel网格中（如上面的代码示例所示）

那应该停止向下推其他控件...