如何在MAUI ViewModel中访问XAML Map的VisibleRegion属性

因为VisibleRegion是Map控件的非绑定属性，无法直接通过XAML绑定到ViewModel，下面是几种实用的实现方式：

方法一：通过RegionChanged事件直接传递（最简单） #

Map控件提供RegionChanged事件，当地图可视区域变化时触发，你可以在代码后台订阅该事件，将需要的属性值传递给ViewModel：

1. 在XAML中给Map添加RegionChanged事件：

<maps:Map x:Name="mapStoresNearby"
    MapType="Street"
    IsVisible="{Binding IsNotBusy}"
    ItemsSource="{Binding MapPins}"
    RegionChanged="MapStoresNearby_RegionChanged"> <!-- 添加事件绑定 -->
    <!-- 原ItemTemplate代码保持不变 -->
</maps:Map>

2. 在代码后台（.xaml.cs文件）实现事件处理逻辑：

private void MapStoresNearby_RegionChanged(object sender, Microsoft.Maui.Controls.Maps.MapEventArgs e)
{
    var viewModel = (YourViewModelType)BindingContext;
    if (viewModel != null && e.VisibleRegion != null)
    {
        viewModel.MapCenterLatitude = e.VisibleRegion.Center.Latitude;
        viewModel.MapCenterLongitude = e.VisibleRegion.Center.Longitude;
        viewModel.MapRadiusMiles = e.VisibleRegion.Radius.Miles;
    }
}

3. 在ViewModel中定义对应的可绑定属性（需实现INotifyPropertyChanged以支持UI通知）：

public class YourViewModelType : INotifyPropertyChanged
{
    private double _mapCenterLatitude;
    public double MapCenterLatitude
    {
        get => _mapCenterLatitude;
        set
        {
            _mapCenterLatitude = value;
            OnPropertyChanged();
        }
    }

    private double _mapCenterLongitude;
    public double MapCenterLongitude
    {
        get => _mapCenterLongitude;
        set
        {
            _mapCenterLongitude = value;
            OnPropertyChanged();
        }
    }

    private double _mapRadiusMiles;
    public double MapRadiusMiles
    {
        get => _mapRadiusMiles;
        set
        {
            _mapRadiusMiles = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

方法二：自定义附加属性（更贴合MVVM） #

创建附加属性，将VisibleRegion的相关属性包装为可绑定属性，直接在XAML中绑定到ViewModel：

1. 创建静态类定义附加属性：

public static class MapRegionProperties
{
    // 中心纬度附加属性
    public static readonly BindableProperty CenterLatitudeProperty =
        BindableProperty.CreateAttached(
            "CenterLatitude",
            typeof(double),
            typeof(MapRegionProperties),
            0.0,
            BindingMode.TwoWay);

    public static double GetCenterLatitude(BindableObject view)
    {
        return (double)view.GetValue(CenterLatitudeProperty);
    }

    public static void SetCenterLatitude(BindableObject view, double value)
    {
        view.SetValue(CenterLatitudeProperty, value);
    }

    // 中心经度附加属性
    public static readonly BindableProperty CenterLongitudeProperty =
        BindableProperty.CreateAttached(
            "CenterLongitude",
            typeof(double),
            typeof(MapRegionProperties),
            0.0,
            BindingMode.TwoWay);

    public static double GetCenterLongitude(BindableObject view)
    {
        return (double)view.GetValue(CenterLongitudeProperty);
    }

    public static void SetCenterLongitude(BindableObject view, double value)
    {
        view.SetValue(CenterLongitudeProperty, value);
    }

    // 半径（英里）附加属性
    public static readonly BindableProperty RadiusMilesProperty =
        BindableProperty.CreateAttached(
            "RadiusMiles",
            typeof(double),
            typeof(MapRegionProperties),
            0.0,
            BindingMode.TwoWay);

    public static double GetRadiusMiles(BindableObject view)
    {
        return (double)view.GetValue(RadiusMilesProperty);
    }

    public static void SetRadiusMiles(BindableObject view, double value)
    {
        view.SetValue(RadiusMilesProperty, value);
    }

    // 静态构造函数，全局订阅Map的RegionChanged事件
    static MapRegionProperties()
    {
        Map.RegionChangedEvent.AddClassHandler(
            typeof(Map),
            new EventHandler<MapEventArgs>(OnRegionChanged));
    }

    private static void OnRegionChanged(object sender, MapEventArgs e)
    {
        var map = sender as Map;
        if (map != null && e.VisibleRegion != null)
        {
            SetCenterLatitude(map, e.VisibleRegion.Center.Latitude);
            SetCenterLongitude(map, e.VisibleRegion.Center.Longitude);
            SetRadiusMiles(map, e.VisibleRegion.Radius.Miles);
        }
    }
}

2. 在XAML中引用命名空间并绑定附加属性：

<!-- 添加自定义属性的命名空间（示例中假设类在YourApp.Utils下） -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
             xmlns:utils="clr-namespace:YourApp.Utils"
             x:Class="YourApp.YourPage">

    <maps:Map x:Name="mapStoresNearby"
        MapType="Street"
        IsVisible="{Binding IsNotBusy}"
        ItemsSource="{Binding MapPins}"
        utils:MapRegionProperties.CenterLatitude="{Binding MapCenterLatitude}"
        utils:MapRegionProperties.CenterLongitude="{Binding MapCenterLongitude}"
        utils:MapRegionProperties.RadiusMiles="{Binding MapRadiusMiles}">
        <!-- 原ItemTemplate代码保持不变 -->
    </maps:Map>
</ContentPage>

3. ViewModel属性与方法一完全一致，无需额外修改。

方法三：使用Behavior行为（解耦后台代码） #

创建Behavior监听Map的RegionChanged事件，自动更新ViewModel对应属性：

1. 创建Behavior类：

public class MapRegionBehavior : Behavior<Map>
{
    public static readonly BindableProperty CenterLatitudeProperty =
        BindableProperty.Create(nameof(CenterLatitude), typeof(double), typeof(MapRegionBehavior), 0.0, BindingMode.TwoWay);

    public double CenterLatitude
    {
        get => (double)GetValue(CenterLatitudeProperty);
        set => SetValue(CenterLatitudeProperty, value);
    }

    public static readonly BindableProperty CenterLongitudeProperty =
        BindableProperty.Create(nameof(CenterLongitude), typeof(double), typeof(MapRegionBehavior), 0.0, BindingMode.TwoWay);

    public double CenterLongitude
    {
        get => (double)GetValue(CenterLongitudeProperty);
        set => SetValue(CenterLongitudeProperty, value);
    }

    public static readonly BindableProperty RadiusMilesProperty =
        BindableProperty.Create(nameof(RadiusMiles), typeof(double), typeof(MapRegionBehavior), 0.0, BindingMode.TwoWay);

    public double RadiusMiles
    {
        get => (double)GetValue(RadiusMilesProperty);
        set => SetValue(RadiusMilesProperty, value);
    }

    protected override void OnAttachedTo(Map bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.RegionChanged += OnRegionChanged;
    }

    protected override void OnDetachingFrom(Map bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.RegionChanged -= OnRegionChanged;
    }

    private void OnRegionChanged(object sender, MapEventArgs e)
    {
        if (e.VisibleRegion != null)
        {
            CenterLatitude = e.VisibleRegion.Center.Latitude;
            CenterLongitude = e.VisibleRegion.Center.Longitude;
            RadiusMiles = e.VisibleRegion.Radius.Miles;
        }
    }
}

2. 在XAML中添加Behavior并绑定属性：

<!-- 添加Behavior的命名空间（示例中假设类在YourApp.Behaviors下） -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
             xmlns:behaviors="clr-namespace:YourApp.Behaviors"
             x:Class="YourApp.YourPage">

    <maps:Map x:Name="mapStoresNearby"
        MapType="Street"
        IsVisible="{Binding IsNotBusy}"
        ItemsSource="{Binding MapPins}">
        <maps:Map.Behaviors>
            <behaviors:MapRegionBehavior 
                CenterLatitude="{Binding MapCenterLatitude}"
                CenterLongitude="{Binding MapCenterLongitude}"
                RadiusMiles="{Binding MapRadiusMiles}" />
        </maps:Map.Behaviors>
        <!-- 原ItemTemplate代码保持不变 -->
    </maps:Map>
</ContentPage>

3. ViewModel属性与方法一完全一致。

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