画像上に要素を重ねる

Question

私は、画像（上に2行、後で使用するボット）と4つのラジオボタンを含むグリッドを含むグリッドを持っています。

ユーザーが画像をクリックすると、クリックしたポイントに十字が表示されます。イベントと

<Grid Grid.Column="2"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="auto"/> 
    </Grid.RowDefinitions> 

    <Image Grid.Row="0" 
      x:Name="ImageViewer" 
      Source="{Binding Picture}" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      MouseDown="Image_MouseDown" 
      MouseMove="ImageViewer_MouseMove" 
      MouseUp="Image_MouseUp"/> 

    <local:Cross Grid.Row="0" 
       CenterPoint="{Binding Point1}" 
       Foreground="Red"/> 

    <!-- Grid.Row="1" - Grid with RadioButtons --> 
</Grid> 

：

protected bool StartMove = false; 
private void Image_MouseDown(object sender, MouseButtonEventArgs e) 
{ 
    if (e.ChangedButton == MouseButton.Left) 
    { 
     StartMove = true; 
     Point p = e.GetPosition(ImageViewer); 
     DrawPoint(p); 
    } 
} 
private void Image_MouseUp(object sender, MouseButtonEventArgs e) 
{ 
    if (e.ChangedButton == MouseButton.Left) 
    { 
     StartMove = false; 
    } 
} 
private void ImageViewer_MouseMove(object sender, MouseEventArgs e) 
{ 
    if (e.LeftButton == MouseButtonState.Pressed && StartMove) 
    { 
     Point p = e.GetPosition(ImageViewer); 
     DrawPoint(p); 
    } 
} 

画像は（枠なし）完全なサイズである、クロスが正しく描画さ

は、コードの部分があります。私の猫の目をクリックすると、この作られた：

をしかし、私は私の窓のサイズを変更する場合は、クロスが動いています。私は座標が白いスペースを考慮して計算されると思うが、私はこれを防ぐ方法を知らない。

があり、それは同じポイントである：

Answer 1

十字はlocal:Cross要素で描かれています。この要素レイアウトはImageに一致しており、Imageに相対的な相対的な値を描画すると想定しています。

そしてそうです。

Image（サイズを無視して無視します）の問題は、ソースイメージを引き伸ばすことです。 Image.StretchをFillに設定するか、別のレイアウト（例：Stretch="None"、位置とサイズをCross、Imageと同じにする）を使用して問題を解決できます。

Answer 2

は、実際には、それがないクロスを動いているイメージです。 問題はイメージUI要素に相対的な位置を捕らえていることです。メインウィンドウのサイズを変更すると、イメージ要素のサイズも変更されます。

考えられる解決策：

• または、
• のサイズを変更したり、整列あなたのイメージを保ち、あなたの十字の位置を再計算しますが、あなたの画像に左上に固定サイズの画像要素