Fatal编程技术网
  • csharp/
  • C# UWP XAML弹出窗口不考虑垂直对齐？

C# UWP XAML弹出窗口不考虑垂直对齐？

c# xaml uwp

C# UWP XAML弹出窗口不考虑垂直对齐？,c#,xaml,popup,uwp,uwp-xaml,C#,Xaml,Popup,Uwp,Uwp Xaml,我正在尝试在Windows应用商店/UWP应用程序中集中弹出窗口 简言之，我正在使用主页并添加 带有一些文本的TextBlock 带有事件处理程序的按钮，单击按钮 名为poputest的弹出窗口。它包含。。。 带有…的边框。。。 一个StackPanel带 ATextBlock 一个按钮。此按钮的事件句柄将弹出窗口的IsOpen设置为false 按钮\u单击调用\u中心弹出，它尝试将弹出居中，然后将IsOpen设置为真。我不能让它工作 private void _cente

我正在尝试在Windows应用商店/UWP应用程序中集中弹出窗口

简言之，我正在使用主页并添加

  • 带有一些文本的
    TextBlock
  • 带有事件处理程序的
    按钮，单击
    按钮
  • 名为
    poputest
    的
    弹出窗口
    。它包含。。。
    • 带有…的
      边框
      。。。
      • 一个
        StackPanel
        带
        • A
          TextBlock
        • 一个
          按钮
          。此
          按钮的事件句柄将
          弹出窗口的
          IsOpen
          设置为false
按钮\u单击
调用
\u中心弹出
，它尝试将
弹出
居中，然后将
IsOpen
设置为
真
。我不能让它工作

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

如果取消对
centerPopup
的调用的注释，我会得到这样的结果，弹出窗口会停留在按钮下面：

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

那不好。I
popup.VerticalAlignment=VerticalAlignment.Top会解决这个问题的

FrameworkElement.VerticalAlignment属性

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



是否将弹出窗口移到StackPanel顶部？
奇怪的是，如果我将弹出窗口向上移动到StackPanel的顶部，它实际上会在显示后向下推动其他控件

单击“单击我”而不显示
\u中心弹出窗口
：



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

但是，即使在对设置垂直对齐进行注释后，将
\u centerPopup
添加回
\u 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;
        }
    }
}



使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
使用Windows.UI.Xaml.Controls.Primitives；
命名空间PopupPlay
{
/// 
///可以单独使用或在框架内导航到的空页。
/// 
公共密封部分类主页面：第页
{
公共主页（）
{
this.InitializeComponent（）；
}
私有无效按钮\u单击（对象发送者，路由目标e）
{
_centerPopup（this.popupTest，this.popupTestBorder）；
this.popupTest.IsOpen=true；
}
private void\u centerPopup（弹出窗口、边框弹出顺序、FrameworkElement extralelement=null）
{
双倍比率=.9；//弹出窗口填充的窗口大小，给予或接受。（90%）
Panel pnl=（Panel）popup.Parent；
双亲身高=pnl.实际身高；
双亲宽度=pnl.ActualWidth；
//每个尺寸的最小值为200。
双倍宽度=父宽度*比率>200？父宽度*比率：200；
双倍高度=父母身高*比率>200？父母身高*比率：200；
弹出窗口。宽度=宽度；
高度=高度；
//popup.HorizontalAlignment=HorizontalAlignment.Center；

popup.VerticalAlignment=VerticalAlignment.Top；//尝试按如下方式更改xaml


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

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






因此，将弹出控件移到内容区域之外，并将stacklayout和所有内容放在ContentPanel网格内（如上面的代码示例所示）


这将停止向下推其他控件…
您的
弹出窗口位于垂直
堆栈面板中，这意味着
堆栈面板将弹出窗口与面板的其他子元素一起放置，这就是它向下推文本的原因

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

我建议使用
网格
作为
页面
的根元素，并将
堆栈面板
和
弹出窗口
直接放入
网格
，如下所示：


<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
s适用于此目的，当您希望有重叠的元素或多个不影响任何其他子元素的位置和大小的元素时。您希望弹出窗口的布局与堆栈面板及其子元素的布局分开，因此您应该这样组织您的XAML。
好的，我认为他lps将我的头重新拧了一下。我以前尝试过网格，但将弹出窗口放在自己的行中，这有一些相同的问题，在
Height=“Auto”
和
Height=“0”
上都有。我以为弹出窗口是设计来跨越父面板（网格或堆栈面板）的，但您要展示的是，它的设计可以说是飞越面板中的行。也就是说，如果您的包装网格有两行，弹出窗口将只飞越一行（选择您的选择）。这不是超直观的imo，

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