在WinUI3中结合Mapsui与独立ViewModel显示地图遇问题求助

我正在WinUI3中尝试使用Mapsui，想通过独立的ViewModel实现地图显示作为入门实践，遇到两个问题：

• 在ViewModel中直接使用MapControl时出现大量空引用错误
• 使用Map对象时地图无法正常显示

我参考了Mapsui的WinUI入门教程，但希望采用MVVM分离的方式，以下是相关代码示例：

含MapControl的ViewModel（触发大量空引用错误） #

public class MyMapViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private Map _map;
    public Map Map
    {
        get { return _map; }
        set
        {
            _map = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Map)));
        }
    }

    public MyMapViewModel()
    {
        Map = new Map();
        Map.Layers.Add(OpenStreetMap.CreateTileLayer());
    }
}

含Map的ViewModel #

public class MyMapViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private Map _map;
    public Map Map
    {
        get { return _map; }
        set
        {
            _map = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Map)));
        }
    }

    public MyMapViewModel()
    {
        Map = new Map();
        Map.Layers.Add(OpenStreetMap.CreateTileLayer());
    }
}

代码后置文件 #

public sealed partial class MapsuiMVVMControl : UserControl
{
    public MapsuiMVVMControl()
    {
        this.InitializeComponent();
        this.DataContext = new MapViewModel();
    }
}

对应XAML代码 #

<Grid>
    <!--<Grid.DataContext>
        <vm:MyMapViewModel />
    </Grid.DataContext>-->
    <Grid.DataContext>
        <vm:MapViewModel />
    </Grid.DataContext>
    <winui:MapControl x:Name="MyMap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Grid>

问题原因及解决方法 #

1. ViewModel不应持有UI控件 #

MapControl是视图层的UI控件，ViewModel作为逻辑层不应直接引用它。控件未完成初始化时调用其属性或方法会触发空引用错误，违背MVVM的职责分离原则。

2. 绑定缺失导致地图不显示 #

当前XAML中的MapControl没有和ViewModel的Map对象绑定，需要添加绑定配置：

<Grid>
    <Grid.DataContext>
        <vm:MyMapViewModel />
    </Grid.DataContext>
    <winui:MapControl x:Name="MyMap" 
                      VerticalAlignment="Stretch" 
                      HorizontalAlignment="Stretch"
                      Map="{Binding Map}" />
</Grid>

3. 数据上下文类名不匹配 #

代码后置中实例化的MapViewModel与实际ViewModel类名MyMapViewModel不一致，导致绑定失效，修正为：

public sealed partial class MapsuiMVVMControl : UserControl
{
    public MapsuiMVVMControl()
    {
        this.InitializeComponent();
        this.DataContext = new MyMapViewModel();
    }
}

4. 简化INotifyPropertyChanged实现（可选） #

可以封装通用的属性变更通知方法，减少重复代码：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MyMapViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private Map _map;
    public Map Map
    {
        get => _map;
        set => SetProperty(ref _map, value);
    }

    public MyMapViewModel()
    {
        Map = new Map();
        Map.Layers.Add(OpenStreetMap.CreateTileLayer());
    }

    private void SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Equals(storage, value)) return;
        storage = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

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