XAML- Как дать элементам в сетке абсолютное положение, когда окно можно изменить?

Question

Я показываю некоторые изображения в верхней части окна приложения GUI приложения (справа на том же уровне, что и в меню приложения), однако эти изображения в настоящее время видны только тогда, когда окно приложения является определенным размером ...

Если я изменил размер окна приложения, перетянув верхний край выше, чтобы сделать окно выше, эти изображения исчезнут за элементами под ними, поскольку я продолжаю увеличивать размер окна или, если изменить размер окна приложения чтобы сделать его короче, изображения исчезают за элементами над ними, поскольку я продолжаю уменьшать размер окна.

Однако другие элементы, которые я показываю в одной и той же сетке, остаются видимыми и перемещаются относительно размера окна (т. Е. Чтобы они не перемещались независимо от размера окна - они изменялись . на дисплее, наряду с самим окном

Например, это строка меню моего приложения, когда окно является «идеальным» размер:

Вы можете увидеть, что изображение на правой правой стороне отображаются правильно.

Однако, если изменить размер окна, чтобы сделать его выше, образы исчезают под основным содержанием изображенную ниже них на окне:

Или, если изменить размер окна, чтобы сделать его меньше, образы исчезают под «Menubar» над ними:

Как я могу заставить изображения остаться в том же месте, отношение к остальной части отображается в моем 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> 

Edit

мне удалось частично решить проблемы выше- один из изображений теперь отображается в правильном месте , и его положение остается актуальным для других элементов графического интерфейса пользователя при изменении размера окна.Он также отображается независимо от того, какой размер окна:

Я сделал это, помещая изображения внутри <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).

Тем не менее, по какой-то причине, даже если я установить Margin для изображений 1 & 2 и 3 & 4 до одинаковых значений, они отображаются все подряд (т.е. пространство между двумя изображениями показано вызвано два изображений в настоящее время не показаны.

Почему я получаю эти несоответствия с тем, как /, которые показываются изображения, даже если XAML разметки я использую, чтобы отобразить их идентична?

Answer 1

Мне удалось решить проблемы, связанные с перемещением изображений/скрытием других элементов в окне при повторной калибровке окна, помещая изображения внутри <DockPanel> в <Grid>. См. Редактировать в моем вопросе, как я это сделал.

Непоследовательность отображается одним из изображений были решена также установка Image3 & Image4 «s Margin 0, как указано в комментарии к ответу Grx70 в.

Answer 2

проблемы с вашим код состоит в том, что оба изображения имеют VerticalAlignment="Center". В этом случае происходит то, что изображения сначала вертикальны выровненный по центру сетки, а затем скорректированный с учетом установленного на них поля. Поэтому расстояние до вершины сетки изменяется при изменении размера (путем изменения размера окна). Чтобы их «приклеивали» к верхней части сетки, вы должны установить VerticalAlignment="Top".

Кроме того, чтобы обеспечить их отображение перед другим контентом, вы можете либо добавить их в последнюю сетку, либо установить для них соответствующее значение Panel.ZIndex.

UPDATE

В ответ на ваши комментарии, заявив, что изображения до сих пор не так, как ожидалось:

Странное поведение может быть вызвано задворках вы установили на изображениях. Если это так, все начнется плохо, если высота окна немного больше 670 пикселей (высота изображения + верхнее/нижнее поля + высота строки заголовка). Тогда вертикальное пространство, доступное для изображения, меньше желаемого значения (высота + верхнее/нижнее поля), и поэтому изображение смещается/уменьшается/масштабируется или, тем не менее, устанавливается в доступное пространство. Важно то, что поля всегда «удовлетворены», т. Е. Если вы установите нижнее поле на 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" /> 

Обратите внимание, что правый край второго изображения является увеличением по ширине первого изображения.