Question

如果标题不是很清楚，我很抱歉，但我不知道如何准确描述我正在寻找的内容。

所以我得到的是滚动查看器中的一个非常大的图像：

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

但没有任何表现如预期的那样。我该怎么做才能得到这种行为？

Answer 1

这是一个非常有趣且棘手的问题。我会用Canvas接近它，我可以用它来正确地将我的引脚放在图像的顶部，并确保无论滚动查看器位置如何，它们的位置都将保持固定。

当您说要使用滚动查看器不缩放时，棘手的部分会出现。我在那里唯一的想法是你可以尝试在滚动查看器上跟踪缩放比例，并将其反转应用于引脚（因此，如果滚动查看器缩放比例为1，则引脚上的比例为1，at ZoomScale = 2，你有PinScale = 1/2）

不确定这会有效，但值得一试。

Answer 2

这是我找到的解决方案，受到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是我自定义UserControl上的一个属性，用于控制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();
    }
}

Answer 3

有趣：）

我的想法是......在滚动查看器上放置一个图钉层。

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

您可能知道＆＃34;基于图像的＆＃34; xy的位置。并且，当用户滚动或放大/缩小滚动查看器时，您可以获得xy偏移和缩放比率。然后，您可以计算引脚的重叠xy位置，并将其绘制在pinCanvas上。

这个想法的优点是 - 你可以避免引脚缩放过程。

像UI这样的地图上的针脚

3 个答案: