UIのような地図上のピン

Question

申し訳ありませんがタイトルがあまり明確ではないが、私が探しているものを正確に記述する方法を知らなかった。私が持っているので、何

は、ScrollViewerの中に非常に大きな画像です：

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

そして私は、地図上の場所に固執するUI要素のようにピンを配置したいのですが、一緒にスケールしませんスクロールビューアでGoogleマップの町の名前と同じです。

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

期待どおりに動作するものは何もありませんでした。この行動を取るために私は何ができますか？

Answer 1

興味深い:)

私の考えでは、スクロールビューアの上にピン層を入れて...です。

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

ピンの "イメージベース" xy位置がわかります。ユーザーがスクロールビューアをスクロールまたはズームイン/アウトすると、xyのオフセットとズームの比率が得られます。次に、ピンのオーバーレイされたxy位置を計算し、それをpinCanvasに描画することができます。

このアイデアの利点は、ピンスケーリングプロセスを回避できることです。

Answer 2

これは、同時に興味深く難しい質問です。 Canvasを使ってピンをイメージの上に適切に配置し、スクロールビューアの位置に関係なくピンの位置が固定されていることを確認することができます。

ピンをにしないようにすると、厄介な部分が発生します。スクロールビューアでは、となります。私がそこに持っている唯一のアイデアは、スクロールビューアのズームスケールを追跡し、その逆をピンに適用することです（スクロールビューアZoomScaleが1の場合、ピンに1のスケールがあります。 ZoomScale = 2、PinScale = 1/2）

これはうまくいくかもしれませんが、試してみる価値はあります。

Answer 3

ここでアレックスDreneaの答えに触発された私が見つけた解決策は、です：

<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がScaleTransformを制御し、私のカスタムユーザーコントロールのプロパティです。

そして、これはコンバータです：

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(); 
    } 
}