XAML-当窗口可调整大小时，如何为网格中的元素提供绝对位置？

Question

我在应用程序GUI窗口的顶部显示了一些图像（在最右边，与应用程序菜单处于同一级别），但是，这些图像目前仅在应用程序窗口具有特定大小时才可见...

如果我通过将顶部边缘向上拖动来调整应用程序窗口的大小，以使窗口更高，这些图像会消失在它们下面的元素后面，因为我继续扩展窗口的大小，或者，如果我调整应用程序窗口的大小以使其更短，当我继续减小窗口的大小时，图像消失在它们上面的元素后面。

但是，我在同一网格中显示的其他元素仍然可见，并且相对于窗口的大小移动（即，它们看起来不会独立于窗口的大小移动 - 它们在显示中调整大小，与窗户本身一起。

例如，当窗口是“理想”大小时，这是我的应用程序的菜单栏：

您可以看到最右侧的图像正确显示。

但是，如果我调整窗口大小以使其更高，则图像会在窗口下方显示的主要内容下方消失：

或者，如果我调整窗口大小以使其变小，则图像会在其上方的“菜单栏”下消失：

如何强制图像保留在与XAML中显示的其他内容相关的相同位置？这些图像直接显示在根<grid>标签中的<Window>中：

<Window ... >
    <Window.Resources>
        ...
    </Window.Resources>
    <Grid>
        <Image x:Name="Image1" Source="C:\...\image1.png" Height="30" Width="30" VerticalAlignment="Center" Margin="750,0,-5,640"></Image>
        <Image X:Name="Image2" Source="C:\...\image2.png" Height="30" Width="30" VerticalAlignment="Center" Margin="650,0,-5,640"></Image>
        <TabControl ...>
            ...
        </TabControl>
    </Grid>
</Window>

Answer 1

您的代码的问题是两个图像都设置了VerticalAlignment="Center"。在这种情况下，发生的是图像首先垂直对齐到网格的中心，然后进行调整以反映在它们上设置的边距。这就是为什么当你调整大小时（通过调整窗口大小），到网格顶部的距离会发生变化。为了让它们“粘合”到网格的顶部，你应该设置VerticalAlignment="Top"。

此外，为了确保它们显示在其他内容的前面，您可以将它们最后添加到网格中，或者在它们上设置适当的Panel.ZIndex值。

UPDATE

回应您的评论，说明图片仍然没有按预期运行：

奇怪的行为可能是由您在图像上设置的边距引起的。如果是这种情况，一旦窗口高度略大于670px（图像高度+顶部/底部边距+标题栏高度），事情就会开始恶化。然后，图像可用的垂直空间小于期望值（高度+顶部/底部边距），因此图像被移位/缩小/缩放或者另外适合可用空间。这里重要的是边距总是“满足”，即如果你将底边距设置为640，图像底边与网格底边之间的距离将永远不会小于。那（我认为）就是你的问题所在。

话虽如此，我假设您正在尝试将图像对齐到窗口的右上角，并且右侧有一些偏移。在这种情况下，我将设置如下图像：

<Image x:Name="Image1"
       Source="(...)"
       Height="30"
       Width="30"
       HorizontalAlignment="Right"
       VerticalAlignment="Top"
       Margin="0,0,-5,0" />
<Image x:Name="Image2"
       Source="(...)"
       Height="30"
       Width="30"
       HorizontalAlignment="Right"
       VerticalAlignment="Top"
       Margin="0,0,-35,0" />

请注意，第二个图像的右边距会根据第一个图像的宽度而增加。

Answer 2

TLDR：

我设法通过将图像放在<DockPanel>中的<Grid>中来解决窗口上其他元素移动/被其他元素隐藏的问题。

其中一个图像显示的不一致性也通过将Image3和Image4的Margin设置为0来解决，正如Grx70答案评论中所述。

---

细节：

我已设法部分解决上述问题 - 其中一个图像现在显示在正确的位置，并且当调整窗口大小时，其位置与GUI上的其他元素保持相关。无论窗口大小如何，它也会显示：

我通过将图像放在<DockPanel>中的<Grid>中来做到这一点：

<Window ... >
<Window.Resources>
    ...
</Window.Resources>
<Grid>
    <DockPanel x:Name"ConnectionImagesWrapPanel" Grid.Row="1">
        <Image x:Name="Image1" Source="C:\...\image1.png" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" DockPanel.Dock="Right" Margin="0,15,0,0"></Image>
        <Image X:Name="Image2" Source="C:\...\image2.png" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" DockPanel.Dock="Right" Margin="0,15,0,0"></Image>
        <Image x:Name="Image3" Source="C:\...\image3.png" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" DockPanel.Dock="Right" Margin="0, 20, 0, 640"></Image>
        <Image x:Name="Image4" Source="C:\...\image4.png" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" DockPanel.Dock="Right" Margin="0, 20, 0, 640"></Image>
    </DockPanel>

    <TabControl ...>
        ...
    </TabControl>
</Grid>

但是，只有当我通过拖动其中一个角来手动调整窗口大小以使其变大时，才会显示其他图像之一 - 此图像随着我展开窗口而“进入范围”：

一旦我将窗口扩展得足够远，它就会完全显示出来：

从我发布的XAML可以看出，图像1和2应该显示在同一个位置，图像3和4应该显示在图像1和2旁边的相同位置（我有其他代码，确定在给定时间应显示哪些图像 - 即1或2,3或4）。

但是，出于某种原因，即使我将图像1和2以及3和4的Margin设置为相同的值，它们也会连续显示（即显示的两个图像之间的空间是由两个图像而不是目前正在展示。

为什么我会看到这些图像的显示方式不一致，即使我用来显示它们的XAML标记是相同的？