이미지의 절대 위치

Question

그런 종류의 문제를 해결할 수있는 사람이 있습니까? 배경 이미지가 있고 해상도를 변경할 때 해당 이미지의 같은 위치에 구성 요소가 필요합니다. 구성 요소는 뷰에 따라 같은 지점에 있지만 이미지에는 맞지 않습니다. 나는 responsivity에 문제가있다.

예를 들어 사진이 있습니다. "문장"을보십시오.

그리고 XAML 코드가있다 :

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
     <Grid > 
      <Image Source="Path" Stretch="Fill"/> 
      <Canvas> 

       <Ellipse Fill="White" Height="15" Width="15" Canvas.Left="170" Canvas.Top="103" /> 
       <TextBlock Text="Sentence" Foreground="Green" 
          Width="150" Height="Auto" Canvas.Left="28" Canvas.Top="122" 
          TextWrapping="WrapWholeWords" TextAlignment="Right"/> 
      </Canvas> 
     </Grid> 
</ScrollViewer> 

Answer 1

나는 당신이 뒤에 코드의 위치를 ​​계산하고, Canvas.Left 및 Canvas.Top 속성을 다시 설정해야합니다 생각은 예 :

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <Grid> 
     <Canvas x:Name="canvas" SizeChanged="canvas_SizeChanged"> 
      <Canvas.Background> 
       <ImageBrush ImageSource="Assets/111.png" /> 
      </Canvas.Background> 
      <Ellipse x:Name="elps" Fill="White" Height="15" Width="15" Canvas.Left="170" Canvas.Top="103" /> 
      <TextBlock x:Name="tb" Text="Sentence" Foreground="Green" 
        Width="150" Height="Auto" Canvas.Left="28" Canvas.Top="122" 
        TextWrapping="WrapWholeWords" TextAlignment="Right" /> 
     </Canvas> 
    </Grid> 
</ScrollViewer> 

뒤에

코드 :

private double width; 
private double height; 

private void canvas_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    if (width == 0 || height == 0) 
    { 
     width = canvas.ActualWidth; 
     height = canvas.ActualHeight; 
    } 
    else 
    { 
     var newwidth = canvas.ActualWidth; 
     var newheight = canvas.ActualHeight; 
     elps.Width = 15 * (newwidth/width); 
     elps.Height = 15 * (newheight/height); 
     Canvas.SetTop(elps, 103 * (newheight/height)); 
     Canvas.SetLeft(elps, 170 * (newwidth/width)); 
     Canvas.SetTop(tb, 122 * (newheight/height)); 
     Canvas.SetLeft(tb, 28 * (newwidth/width)); 
    } 
} 

내가 개인적으로 하나의 제어에 Ellipse 및 TextBlock을 넣어 함께 이동하는 것이 낫다 생각하고,이 계산은 단지 샘플입니다, 당신은 스스로를 계산할 수 있습니다.