Xamarin.Forms如何在ListView中绑定显示ViewModel的Map及折线数据

DevOps 小满

2026-9-24

问题根因说明

你当前的实现存在两个核心问题：

违反MVVM规范：将UI控件（Xamarin.Forms.Map）直接存放在ViewModel层的Activity类中，UI控件不能同时绑定到多个父容器，配合ListView的RecycleElement复用策略，必然会出现渲染异常
Map控件未指定明确宽高，在Horizontal布局的StackLayout中如果没有固定尺寸，会默认收缩为0，无法显示
Xamarin.Forms.Map的Polyline.Geopath本身不是可绑定属性，无法直接通过XAML绑定ViewModel中的坐标集合，需要通过附加属性实现绑定

改造实现方案

第一步：改造自定义Activity类

移除Map属性，替换为纯业务数据属性：

public class Activity : INotifyPropertyChanged
{
    private string _title;
    public string Title
    {
        get => _title;
        set { _title = value; OnPropertyChanged(); }
    }

    private ObservableCollection<Position> _routePositions = new ObservableCollection<Position>();
    public ObservableCollection<Position> RoutePositions
    {
        get => _routePositions;
        set { _routePositions = value; OnPropertyChanged(); }
    }

    // INotifyPropertyChanged接口实现逻辑省略
}

第二步：实现Polyline绑定的附加属性

新建附加属性类，用于实现坐标集合到Polyline.Geopath的绑定：

public static class MapAttachProperty
{
    public static readonly BindableProperty RoutePositionsProperty =
        BindableProperty.CreateAttached("RoutePositions", typeof(ObservableCollection<Position>), typeof(MapAttachProperty), null, propertyChanged: OnRoutePositionsChanged);

    public static ObservableCollection<Position> GetRoutePositions(BindableObject obj)
    {
        return (ObservableCollection<Position>)obj.GetValue(RoutePositionsProperty);
    }

    public static void SetRoutePositions(BindableObject obj, ObservableCollection<Position> value)
    {
        obj.SetValue(RoutePositionsProperty, value);
    }

    private static void OnRoutePositionsChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is not Map map || newValue is not ObservableCollection<Position> positions)
            return;

        // 清空现有Map元素
        map.MapElements.Clear();
        
        // 创建Polyline并赋值路径
        var polyline = new Polyline
        {
            StrokeColor = Color.Blue,
            StrokeWidth = 5,
            Geopath = new List<Position>(positions)
        };
        map.MapElements.Add(polyline);

        // 可选：自动定位到折线所在区域
        if (positions.Any())
        {
            map.MoveToRegion(MapSpan.FromPositions(positions));
        }
    }
}

第三步：修改XAML代码

直接在DataTemplate中声明Map控件，绑定业务属性，指定明确的宽高：

<ListView x:Name="listActivities" 
          HorizontalOptions="StartAndExpand" 
          VerticalOptions="FillAndExpand"
          SeparatorColor="LightGray" 
          SeparatorVisibility="Default" 
          HasUnevenRows="True"
          ItemsSource="{Binding obActivities}" 
          CachingStrategy="RecycleElement"
          ItemSelected="ListActivities_ItemSelected" 
          SelectedItem="{Binding selectedActivity,Mode=TwoWay}" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="5" VerticalOptions="FillAndExpand">
                    <!-- 直接声明Map控件，指定固定宽高，绑定附加属性和坐标集合 -->
                    <map:Map WidthRequest="150" 
                             HeightRequest="100"
                             IsShowingUser="True"
                             local:MapAttachProperty.RoutePositions="{Binding RoutePositions}"/>
                    <Label Text="{Binding Title}" 
                           FontSize="12" 
                           TextColor="Gray"
                           VerticalOptions="Center"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

注意：需要在XAML的根节点声明local命名空间，指向你存放MapAttachProperty类的程序集命名空间。

额外说明

如果需要支持坐标集合动态更新，只需要在OnRoutePositionsChanged方法中订阅新集合的CollectionChanged事件，集合变更时同步更新Polyline的Geopath即可。

内容的提问来源于stack exchange，提问作者Quentin RF