地图上的图钉，例如 UI

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 的图钉元素，这些元素会固定在地图上的某个位置，但不会随滚动查看器一起缩放。就像 Google 地图上的城镇名称。我尝试过各种方法，例如：

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

但没有任何行为符合预期。我该怎么做才能获得这种行为？

Answer 1

这是一个既有趣又棘手的问题。我会用 Canvas 来接近它，我可以用它来将我的图钉正确地放在图像的顶部，并确保它们的位置将保持固定，而不管滚动查看器的位置如何。

当您说您希望图钉不随滚动查看器缩放时，棘手的部分就来了。我唯一的想法是，您可以尝试在滚动查看器上跟踪缩放比例，并将其倒数应用于图钉（因此，如果滚动查看器 ZoomScale 为 1，则图钉上的比例为 1，在ZoomScale = 2，你有 PinScale = 1/2)

不确定是否可行，但值得一试。

Answer 2

有趣:)

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

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

您可能知道图钉的 "image-based" xy 位置。并且，当用户滚动或缩放 in/out 滚动查看器时，您可以获得 xy 偏移量和缩放比例。然后，你可以计算pin的叠加xy位置，并在pinCanvas上绘制。

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

Answer 3

这是我找到的解决方案，灵感来自 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();
    }
}

地图上的图钉，例如 UI

Pins on a map like UI

c#

maps

xaml

scrollviewer

uwp