Bing 使用 MVVM 模式映射折线 XAML

Question

我正在使用 widows phone 基于 8.1 地图 application.I 想知道如何使用 MVVM 模式绘制地图折线。我已经使用首先创建折线然后添加它的代码实现了这一点。我的问题是我可以在 XAML 本身中定义一条折线，并在我的视图模型中为它提供一个绑定到我的 BasicGeopositions 类型的可观察集合之一的源绑定。如果是那么怎么办？

要使用折线绘制的数据：

是一个 BasicGeoposition 列表，其中包含我需要连接的所有点的纬度和经度。我试过这种方式 <Maps:MapPolyline Path="{Binding Trip.PTSPositions}"/> 但它没有用。 PTSPositions 是 BasicGeoposition 的列表。

我想做的事情：

我想

MapPolyline polyLine = new MapPolyline() { StrokeColor = Colors.Blue, StrokeThickness = 5 };
        polyLine.Path = new Geopath(Trip.PTSPositions);
        MyMap.MapElements.Add(polyLine);

使用 MVVM 在 XAML 中执行上述代码隐藏代码，其中将动态获取 Trip.PTSPositions 并使用数据绑定绘制地图折线。我在网上搜索了很多。我找不到任何不使用折线隐藏代码的东西

Answer 1

这里是评论中建议的实现。

这是 MapControl 的附加可绑定属性实现，它保留在 Widows Phone 8.1 项目中：

public class Polyline
{
    public static readonly DependencyProperty PathProperty =
        DependencyProperty.RegisterAttached(
            "Path",
            typeof(IBasicGeoposition[]),
            typeof(Polyline),
            new PropertyMetadata(null, OnPathChanged));

    public static void SetPath(UIElement element, IBasicGeoposition[] value)
    {
        element.SetValue(PathProperty, value);
    }

    public static IBasicGeoposition[] GetPath(UIElement element)
    {
        return (IBasicGeoposition[]) element.GetValue(PathProperty);
    }

    private static void OnPathChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var mapControl = d as MapControl;
        if (mapControl == null)
        {
            throw new InvalidOperationException(
                "Polyline.Track property can only be attached to a MapControl!");
        }

        mapControl.MapElements.Clear();

        mapControl.MapElements.Add(CreateMapPolyline(GetPath(mapControl)));
    }

    private static MapPolyline CreateMapPolyline(IEnumerable<IBasicGeoposition> track)
    {
        return new MapPolyline
        {
            Path = new Geopath(track.Select(x =>
                new BasicGeoposition
                {
                    Altitude = x.Altitude,
                    Latitude = x.Latitude,
                    Longitude = x.Longitude,
                })),
            StrokeColor = Colors.Red,
            StrokeThickness = 3,
            StrokeDashed = false
        };
    }
}

此接口保留在 PCL 中，可能接近它的实现（您必须添加自定义 class 实现该接口）：

public interface IBasicGeoposition
{
    double Altitude { get; set; }
    double Latitude { get; set; }
    double Longitude { get; set; }
}

在视图模型中你有 Trip.PTSPositions，它是 IBasicGeoposition 的数组。在视图 (XAML) 中，您将拥有：

<maps:MapControl attached:Polyline.Path="{Binding Trip.PTSPositions}"/>

Bing 使用 MVVM 模式映射折线 XAML

Bing Map polyline using MVVM pattern XAML

xaml

mvvm

windows-phone-8.1

here-api

要使用折线绘制的数据：

我想做的事情：