XAML-ウィンドウをサイズ変更可能なときにグリッドの要素に絶対位置を与えるにはどうすればよいですか？

Question

私はアプリケーションのGUIウィンドウの上部に（アプリケーションメニューと同じレベルの右端に）いくつかの画像を表示していますが、これらの画像は現在、アプリケーションウィンドウが特定のサイズである場合にのみ表示されます...

アプリケーションウィンドウの上端を上にドラッグしてサイズを変更し、ウィンドウの高さを高くすると、ウィンドウのサイズを引き続き拡大するときにこれらの画像がその下の要素の後ろに消えます。それを短くするために、ウィンドウのサイズを小さくし続けると、イメージはそれらの上の要素の後ろに消えます。

しかし、同じグリッドに表示されている他の要素は表示されたままになり、ウィンドウのサイズに相対的に移動します（つまり、ウィンドウのサイズとは無関係に移動するようには見えません。 。あなたがイメージのことを見ることができ

：ディスプレイには、ウィンドウ自体例えば

とともに、このウィンドウは「理想的な」サイズであるとき、自分のアプリケーションのメニューバーです右端に表示されます。

私はそれを背にするためにウィンドウのサイズを変更する場合は、画像が画面上でそれらの下に表示される主な内容の下に消える：私はそれを小さくするウィンドウのサイズを変更する場合は、

あるいは、

どのように私は私のXAMLに表示されるコンテンツの残りの部分に関連し、同じ場所に滞在した画像を強制することができます：画像はその上に「メニューバー」の下に消えますか？

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

編集

私は部分的に画像の1上述の問題を解決するために管理してきた今、正しい位置に表示されます。これらの画像は<Window>タグがルートで<grid>の内側に直接表示されますウィンドウのサイズを変更すると、その位置は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> 

しかし、1他の画像の表示は、手動でウィンドウのサイズを変更して角をドラッグして大きくする場合にのみ表示されます。この画像は、ウィンドウを拡大すると「スコープ」になります。

と私は十分にウィンドウを拡大した後、完全に表示されます。

あなたは、私が投稿したXAMLからもわかるように、画像1 & 2があるべき同じ場所に表示され、画像3 & 4は、画像1の隣に同じ場所に表示されます。& 2（特定の時間にどの画像を表示するかを決定する別のコードがあります.1または2,3,4 ）。

しかし、何らかの理由で、私は同じ値に画像1 、及び3 & 4を設定しているにもかかわらず、それらはすなわち示す二つの画像の間の空間をによって引き起こされる（行のすべてを表示しています2枚の画像は、現在表示されていない。

なぜ私はそのイメージが、私はそれらを表示するために使用していXAMLマークアップは同じであっても、表示されているか/してこれらの矛盾を取得しています？

Answer 1

<DockPanel>の画像を<Grid>の中に入れてウィンドウのサイズを変更すると、ウィンドウ上の他の要素によって隠れている画像に関する問題を解決することができました。 を私の質問で編集してください。 Grx70の答えにコメントで述べたように、画像のいずれかで表示さ

矛盾は、またImage3 & Image4のMargin 0に設定することで解決されました。

Answer 2

あなたに問題両方の画像に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" /> 

最初の画像の幅に従って、2番目の画像の右余白が増加することに注意してください。