弹出控件 VerticalAlignment 没有“捕捉”

Question

我正在使用 Popup 控件，但由于某种原因，它的垂直对齐方式无法按我的预期工作。这是我拥有的 XAML：

    <Grid Width="100" Height="30" >
        <TextBox Text="Hello" />
        <Popup IsOpen="True" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" >
            <Button Content="Hello" />
        </Popup>
    </Grid>

我希望 Popup 的宽度为 100 像素，与它的父 Grid 相同。 但是，弹出窗口中的 Button 的行为就好像它的 Horizo​​ntalAlignment 是 Left 一样，即 Button 的宽度足以让“Hello”一词出现在其中，我不知道为什么，或者如何使它具有与包含 Grid 的宽度相同。

谢谢！

Answer 1

不幸的是，Popup 与定义它的 XAML 中的其余元素不属于同一可视化树。它实际上是一个新窗口，虽然是一个非常简单且通常很小的窗口。

换句话说，Popup 并没有真正参与主窗口的布局。因此，更改 HorizontalAlignment 之类的内容没有任何效果，因为该属性控制着该元素相对于其包含元素的布局位置和大小。

在处理Popup 时，这个“孤立元素”问题会导致无穷无尽的问题。不过，有一些工具和技术可以解决作为单独窗口引入的所有问题。

我能给出的第一个建议是了解展示位置属性PlacementTarget 和Placement。您可以使用这些属性来定位Popup。您还可以使用数据绑定的ElementName 语法来处理大小调整。

以下是在您的情况下使用这些技术的示例：

<Grid Name="grid" Width="100" Height="30" >
    <TextBox Text="Hello" />
    <Popup IsOpen="True"
           Placement="Bottom"
           PlacementTarget="{Binding ElementName=grid}"
           Width="{Binding ActualWidth, ElementName=grid}">
        <Button Content="Hello" />
    </Popup>
</Grid>