XAML- 当 window 可调整大小时，如何为网格中的元素指定绝对位置？

Question

我在应用程序 GUI 的顶部显示一些图像 Window（在最右侧，与应用程序菜单处于同一级别），但是，这些图像目前仅在应用程序 window 是特定尺寸...

如果我通过拖动顶部边缘来调整应用程序 window 的大小，使 window 更高，随着我继续扩展 window 的大小，这些图像会消失在它们下面的元素后面=43=]，或者，如果我调整应用程序 window 的大小以使其更短，随着我继续减小 window.

的大小，图像会消失在它们上面的元素后面

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

例如，当 window 为 'ideal' 大小时，这是我的应用程序的菜单栏：

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

但是，如果我调整 window 的大小以使其更高，图像就会消失在 window 上显示在它们下方的主要内容下方：

或者，如果我调整 window 的大小使其变小，图像会在其上方的 'menubar' 下方消失：

如何强制图像保留在与 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"。在这种情况下，图像首先垂直对齐到网格的中心，然后进行调整以反映其上设置的边距。这就是当您调整网格大小时（通过调整 window 的大小）到网格顶部的距离会发生变化的原因。为了使它们 "glued" 位于网格顶部，您应该设置 VerticalAlignment="Top".

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

更新

回应您的评论，指出图像仍未按预期运行：

奇怪的行为可能是由您在图像上设置的边距引起的。如果是这样的话，一旦 window 高度略大于 670px（图像高度 + top/bottom 边距 + 标题栏高度），事情就会开始变糟。然后图像可用的垂直 space 小于所需值（高度 + top/bottom 边距），因此图像是 shifted/shrunk/scaled 或者适合可用的 space.这里重要的是边距总是"satisfied"，即如果你将底部边距设置为640，图像底部边缘和网格底部边缘之间的距离永远不会小于比起那个来说。那（我认为）就是您的问题所在。

话虽如此，我假设您正在尝试将图像与 window 的 top-right 对齐，并向右偏移一些。在这种情况下，我会按如下方式设置图像：

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

当 re-sizing window 时，我通过将图像放在 [=11] 中，设法解决了有关图像移动/被其他元素隐藏在 window 上的问题=] 在 <Grid> 中。

其中一张图片显示的不一致问题已通过将 Image3 和 Image4 的 Margin 设置为 0 来解决，如 Grx70 的回答的评论中所述。

详情：

我已经设法部分解决了上述问题 - 其中一个图像现在显示在正确的位置，并且当 window 调整大小时，它的位置与 GUI 上的其他元素保持相关。不管window:

的大小是多少也会显示

我通过将图像放在 <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>

但是，只有当我手动调整 window 的大小时通过拖动其中一个角使其变大时才会显示其他图像之一 - 然后 'comes into scope' 当我展开 window:

并且在我将 window 扩展到足够远时完全显示：

正如您从我发布的 XAML 中看到的那样，图片 1 和 2 应显示在同一位置，图片 3 和 4 应显示在同一位置 - 图片旁边1 和 2（我有其他代码可以确定在给定时间应显示哪些图像 - 即 1 或 2、3 或 4）。

但是，由于某些原因，即使我将图像 1 和 2 以及图像 3 和 4 的 Margin 设置为相同的值，它们仍然显示在一行中（即 space 显示的两个图像之间是由于当前未显示的两个图像造成的。

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

XAML- 当 window 可调整大小时，如何为网格中的元素指定绝对位置？

XAML- How do I give elements in a grid an absolute position when the window is resizable?

c#

wpf

layout

user-interface

presentation