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

Question

I am displaying some images at the top of my application GUI Window (on the far right, at the same level as the application menu), however, these images are currently only visible when the application window is a particular size...

If I resize the application window by dragging the top edge higher, to make the window taller, these images disappear behind the elements underneath them as I continue to extend the size of the window, or, if I resize the application window to make it shorter, the images disappear behind the elements above them as I continue to decrease the size of the window.

However, other elements that I am displaying in the same grid remain visible, and move relative to the size of the window (ie so that they don't appear to move independently of the size of the window- they are resized in the display, along with the window itself.

For example, this is the menu bar of my application when the window is the 'ideal' size:

You can see that the images on the far right hand side are displayed correctly.

However, if I resize the window to make it taller, the images disappear underneath the main content displayed below them on the window:

Or, if I resize the window to make it smaller, the images disappear under the 'menubar' above them:

How can I force the images to stay in the same location, relevant to the rest of the content displayed in my XAML? These images are displayed directly inside a <grid> in the root <Window> tag:

<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

The problem with your code is that both images have VerticalAlignment="Center" set. In that case what happens is images are first vertically aligned to center of the grid, and then adjusted to reflect the margin set on them. That's why the distance to the top of the grid changes when you resize it (by resizing the window). In order to keep them "glued" to the top of the grid, you should set VerticalAlignment="Top" .

Also, in order to ensure they are displayed in front of other content, you could either add them to the grid last, or set an appropriate Panel.ZIndex value on them.

UPDATE

In response to your comments stating that the images still do not behave as expected:

The weird behavior may be caused by the margins you set on the images. If that's the case, things would start going bad once the window height is a bit larger than 670px (image height + top/bottom margins + title bar height). Then the vertical space available to the image is smaller than the desired value (height + top/bottom margins), and so the image is shifted/shrunk/scaled or however else fitted into the available space. The important thing here is that the margins are always "satisfied", ie if you set the bottom margin to 640 , the distance between the bottom edge of the image and the bottom edge of the grid will never be less than that. And that (I think) is where your problem comes from.

Having said that, I'm assuming you're trying to align your images to the top-right of the window, with some offset from the right. In that case, I'd setup the images as follows:

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

Note that the second image's right margin is increased according to the first image's width.

Answer 2

TLDR:

I managed to solve the issues regarding the images moving around/ being hidden by other elements on the window when re-sizing the window by putting the images inside a <DockPanel> in the <Grid> .

The inconsistencies displayed by one of the images were resolved by also setting Image3 & Image4 's Margin to 0, as mentioned in the comment on Grx70's answer.

---

Details:

I've managed to partially resolve the issues above- one of the images is now displayed in the correct location, and its position stays relevant to the other elements on the GUI when the window is resized. It is also displayed no matter what the size of the window:

I did this by putting the images inside a <DockPanel> in the <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>

However, one of the other images is only displayed when I manually resize the window to make it bigger by dragging one of the corners- this image then 'comes into scope' as I expand the window:

and is fully displayed once I have expanded the window far enough:

As you can see from the XAML that I've posted, images 1 & 2 should be displayed in the same location, and images 3 & 4 should be displayed in the same location- next to images 1 & 2 (I have other code that determines which images should be displayed at a given time- ie 1 or 2, 3 or 4).

However, for some reason, even though I have set the Margin for images 1 & 2, and 3 & 4 to identical values, they are displayed all in a row (ie the space between the two images shown is caused by the two images not currently being shown.

Why am I getting these inconsistencies with how/ which images are being displayed, even though the XAML markup I'm using to display them is identical?