使用MVVM模式XAML的Bing Map折线 [英] Bing Map polyline using MVVM pattern XAML

问题描述

我正在研究基于寡妇电话8.1地图的应用程序.我想知道如何使用MVVM模式绘制地图折线.我已经使用后面的代码实现了这一点，首先创建折线，然后添加折线.我的问题是我可以在XAML本身中定义一条折线，并为其提供源绑定到我的视图模型中可观察到的BasicGeopositions类型之一的源.如果是，那怎么办?

I am working on widows phone 8.1 map based application.I want to know how can I draw a map polyline using MVVM pattern. I've already achieved this using the code behind for first creating the polyline and then adding it. My question is can I define a polyline in the XAML itself and give it a source binding to one of my observable collections of type BasicGeopositions in my viewmodel. If yes then how?

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

is a list of BasicGeoposition that contains latitudes and longitudes of all the points I need to connect. I tried this way <Maps:MapPolyline Path="{Binding Trip.PTSPositions}"/> but it didn't work. PTSPositions is a list of BasicGeoposition.

我想

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

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

perform the above code behind code in XAML using MVVM where the Trip.PTSPositions would be fetched dynamically and the map polyline would be drawn using data binding. I searched online a lot. I couldn't find anything that does not use code behind for polyline

推荐答案

以下是注释中建议的实现.

Here is the implementation suggested up in the comments.

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

This is the attached bindable property implementation for MapControl and it stays in the Widows Phone 8.1 project:

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中，可能接近其实现(您必须添加实现该接口的自定义类):

This interface stays in the PCL, probably close to it's implementation (you'll have to add your custom class implementing the interface):

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

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

Than in view model you have Trip.PTSPositions which is an array of IBasicGeoposition. And in the view (XAML), you'll have:

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

这篇关于使用MVVM模式XAML的Bing Map折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！