Pins auf einer Karte wie UI

Question

Sorry, wenn der Titel nicht sehr klar ist, aber ich wusste nicht, wie ich genau beschreiben soll, was ich suche.

Also, was ich habe, ist ein sehr großes Bild in einem Scroll:

<ScrollViewer x:Name="scrollView" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" MinZoomFactor="1" ViewChanged="scrollView_ViewChanged"> 
    <Grid Width="{Binding Path=ViewportWidth, ElementName=scrollView}"> 
     <Image x:Name="img" Source="The Known World.jpg" Stretch="UniformToFill"/> 
    </Grid> 
</ScrollViewer> 

Und ich mag Stift wie UI-Elemente platzieren, die auf einen Standort auf einer Karte kleben, aber nicht entlang maßstab mit dem Scrollviewer. Wie der Name der Städte in Google Maps. Ich habe verschiedene Dinge ausprobiert, wie zum Beispiel:

<Scrollviewer> 
    <Grid Width="{Binding Path=ScrollableWidth, ElementName=scrollView}" 
      Height="{Binding Path=ScrollableHeight, ElementName=scrollView}"> 
      <!--Pins here--> 
    </Grid> 
<Scrollviewer> 

Aber nichts, das sich wie erwartet verhält. Was kann ich tun, um dieses Verhalten zu erhalten?

Answer 1

Interessante :)

Meine Idee ist ... eine Stecknadel Schicht über den Scroll-Betrachter setzen.

<Grid> 
    <ScrollViewer x:name="imageSv" > 
    </ScrollViewer> 
    <Canvas x:name="pinCanvas" /> 
</Grid> 

Möglicherweise kennen Sie die "bildbasierte" xy-Position des Pins. Wenn der Benutzer den Bildlauf-Viewer scrollt oder vergrößert/verkleinert, können Sie den xy-Versatz und das Zoom-Verhältnis erhalten. Dann können Sie die überlagerte xy-Position des Pins berechnen und auf pinCanvas zeichnen.

Vorteil dieser Idee ist - Sie können den Pin-Skalierungsprozess vermeiden.

Answer 2

Es ist eine wirklich interessante und knifflige Frage zur gleichen Zeit. Ich würde es mit einem Canvas angehen, das ich verwenden kann, um meine Pins oben auf dem Bild richtig zu platzieren und sicherzustellen, dass ihre Positionen unabhängig von der Scroll-Viewer-Position fixiert bleiben.

Der schwierige Teil kommt, wenn Sie sagen, Sie wollen die Pins nicht Skalierung mit dem Scroll-Viewer. Die einzige Idee, die ich dort habe, ist, dass Sie versuchen können, die Zoomskala auf dem Scroll-Viewer zu verfolgen und eine Umkehrung auf die Pins anzuwenden (wenn Sie also bei Scroll Viewer ZoomScale von 1 eine Skalierung von 1 auf Ihren Pins haben, um ZoomScale = 2, Sie haben PinScale = 1/2)

Nicht sicher, dass das funktionieren würde, aber es ist einen Versuch wert.

Answer 3

Hier ist eine Lösung, die ich gefunden, inspiriert von Alex Drenea Antwort:

<ScrollViewer x:Name="scrollView" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" MinZoomFactor="1" ViewChanged="scrollView_ViewChanged" ViewChanging="scrollView_ViewChanging" Visibility="Visible"> 
    <Viewbox x:Name="vb" Height="{Binding Path=ViewportHeight, ElementName=scrollView}"> 
     <Grid> 
      <Image x:Name="img" Stretch="UniformToFill" Source="The Known World.jpg"/> 
      <local:PinPoint Text="Hardhome" MinZoom="0.9" Size="{Binding ElementName=scrollView, Path=ExtentHeight, Converter={StaticResource conv},ConverterParameter=scrollView}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2825,261,0,0"/> 
     </Grid> 
    </Viewbox> 
</ScrollViewer> 

minZoom eine Eigenschaft auf meiner benutzerdefinierten Usercontrol, die die Scaletransform steuert.

Und dies ist der Konverter:

public class ViewBoxConstantFontSizeConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 

     return 100/(double)value * 20; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
}