像UI這樣的地圖引腳

對不起，如果標題不是很清楚，但我不知道如何描述我正在尋找什麼。像UI這樣的地圖引腳

我有那麼什麼是一個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元素，將粘在地圖上的位置，但不會沿着規模與scrollviewer。就像Google地圖上的城鎮名稱一樣。我已經嘗試了各種各樣的東西，比如：

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

但是沒有任何行爲像預期的那樣。我能做些什麼來獲得這種行爲？

來源

2016-06-15 user2950509

有趣:)

我的想法是......把一根鋼釘層上滾動查看器。

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

您可能知道引腳的「基於圖像的」xy位置。而且，當用戶滾動或放大/縮小滾動查看器時，您可以獲得xy偏移和縮放比例。然後，您可以計算pin的重疊xy位置，並將其繪製在pinCanvas上。

這個想法的優點是 - 您可以避免引腳縮放過程。

來源

2016-06-16 07:12:48 pnp0a03

這是一個非常有趣和棘手的問題在同一時間。我會用Canvas來處理它，我可以使用它將圖釘正確放置在圖像頂部，並確保它們的位置將保持固定，而不管滾動查看器的位置如何。

棘手的部分來自當你說你想要的引腳而不是規模與滾動查看器。我唯一的想法是你可以嘗試跟蹤滾動查看器上的縮放比例，並將其應用到引腳上（所以如果滾動查看器縮放比例爲1，則引腳上的比例爲1， ZoomScale = 2，PinScale = 1/2）

不確定這是否可行，但值得一試。

來源

2016-06-15 17:44:09 AlexDrenea

這裏有一個解決方案，我發現，由Alex 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(); 
    } 
}

來源

2016-06-16 07:13:11 user2950509

像UI這樣的地圖引腳

回答

相關問題