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

Question

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

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

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

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

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

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

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

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

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

通过将图像放置在<Grid>中的<Grid> <DockPanel>内，我设法解决了在重新调整窗口大小时图像在窗口周围移动/被其他元素隐藏的问题。

通过将Image3 ＆ Image4的Margin为0也可以解决其中一幅图像显示的不一致问题，正如Grx70答案的注释中所述。

---

细节：

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

我是通过将图像放在<Grid>的<DockPanel>中来完成此操作的：

<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标记是相同的，为什么为什么与这些图像的显示方式/显示这些不一致呢？