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網格中（如上面的代碼示例所示）

那應該停止向下推其他控件...