MAUI中多视图间访问CollectionView绑定集合的方案咨询

我在MAUI开发中遇到一个场景：将CollectionView绑定到某个ContentView，其关联的ObservableCollection定义在该ContentView的代码后置中。现在需要从另一个ContentView访问、更新、插入该集合的元素，寻求优质实现方案。

已尝试的两种方案 #

方案1：静态ViewModel集合 #

将ObservableCollection放在ViewModel中并设为静态，虽然能跨视图访问修改，但属于不良实践，且需要将相关代码都设为静态才能协同工作。

OfflineAreasViewModel.cs

public static ObservableCollection<OfflineAreaModel> OfflineAreas;

public static OfflineAreaModel FindModel(string name)
{
  return OfflineAreas.FirstOrDefault(x => x.Name == name) as OfflineAreaModel;         
}

OfflineAreasContentView.xaml

<CollectionView x:Name="offAreasLstView"
                ItemsSource="{x:Static viewmodels:OfflineAreasViewModel.OfflineAreas}"
                HeightRequest="300"     
                SelectionMode="Single">

其他ContentView中操作代码

var model = OfflineAreasViewModel.FindModel(_selMdlName);

方案2：ContentView内部集合+静态MainModel副本 #

将ObservableCollection直接放在ContentView的代码后置中，为了跨视图访问，设置了一个包含静态ObservableCollection的MainModel，但始终无法让ContentView的CollectionView正确指向MainModel中的集合。

OfflineAreasContentView.xaml

<CollectionView x:Name="offAreasLstView"
                ItemsSource="{Binding OfflineAreas}"
                HeightRequest="300"     
                SelectionMode="Single">

OfflineAreasContentView.xaml.cs

/// <summary>
/// Binded to the ObservableCollection CollectionView 
/// </summary>
public ObservableCollection<OfflineAreaModel> OfflineAreas
{
    get => (ObservableCollection<OfflineAreaModel>)GetValue(OfflineAreasProp);
    set
    {
        SetValue(OfflineAreasProp, value);
        OnPropertyChanged(nameof(OfflineAreas));
    }
}

// 后续代码中赋值
MainModel.OfflineAreas = OfflineAreas;

MainModel.cs

internal static ObservableCollection<OfflineAreaModel> OfflineAreas { get; set; } = null;

internal static OfflineAreaModel FindOfflineAreaModel(string name)
{
    if (OfflineAreas != null)
       return OfflineAreas.FirstOrDefault(x => x.Name == name) as OfflineAreaModel;
    return null;
}

在其他控件中通过调用FindOfflineAreaModel来修改集合关联的模型。

推荐的实现方案 #

核心思路：共享ViewModel实例（依赖注入实现） #

放弃静态成员，通过MAUI的依赖注入系统，将承载ObservableCollection的ViewModel注册为单例，确保所有视图获取的是同一个实例，从而实现跨视图操作同一集合。

步骤1：定义非静态的ViewModel

创建一个继承自INotifyPropertyChanged的ViewModel，包含ObservableCollection和操作方法：

OfflineAreasViewModel.cs

public class OfflineAreasViewModel : INotifyPropertyChanged
{
    private ObservableCollection<OfflineAreaModel> _offlineAreas;
    public ObservableCollection<OfflineAreaModel> OfflineAreas
    {
        get => _offlineAreas;
        set
        {
            _offlineAreas = value;
            OnPropertyChanged(nameof(OfflineAreas));
        }
    }

    public OfflineAreasViewModel()
    {
        OfflineAreas = new ObservableCollection<OfflineAreaModel>();
    }

    public OfflineAreaModel FindModel(string name)
    {
        return OfflineAreas.FirstOrDefault(x => x.Name == name);
    }

    // 示例操作方法：添加元素
    public void AddArea(OfflineAreaModel model)
    {
        OfflineAreas.Add(model);
    }

    // 示例操作方法：更新元素
    public void UpdateArea(string name, OfflineAreaModel updatedModel)
    {
        var existingModel = FindModel(name);
        if (existingModel != null)
        {
            // 替换或更新属性，此处假设模型是可编辑的
            existingModel.Name = updatedModel.Name;
            // 若模型实现INotifyPropertyChanged，UI会自动更新
        }
    }

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

步骤2：注册ViewModel为单例

在MauiProgram.cs中，将ViewModel注册为单例：

builder.Services.AddSingleton<OfflineAreasViewModel>();

步骤3：在ContentView中注入并绑定ViewModel

OfflineAreasContentView.xaml.cs

public partial class OfflineAreasContentView : ContentView
{
    public OfflineAreasViewModel ViewModel { get; }

    public OfflineAreasContentView(OfflineAreasViewModel viewModel)
    {
        InitializeComponent();
        ViewModel = viewModel;
        BindingContext = ViewModel;
    }
}

OfflineAreasContentView.xaml

<CollectionView x:Name="offAreasLstView"
                ItemsSource="{Binding OfflineAreas}"
                HeightRequest="300"     
                SelectionMode="Single">
    <!-- 自定义ItemTemplate -->
</CollectionView>

步骤4：在另一个ContentView中注入ViewModel并操作集合

AnotherContentView.xaml.cs

public partial class AnotherContentView : ContentView
{
    private readonly OfflineAreasViewModel _offlineAreasViewModel;

    public AnotherContentView(OfflineAreasViewModel offlineAreasViewModel)
    {
        InitializeComponent();
        _offlineAreasViewModel = offlineAreasViewModel;
    }

    // 示例操作：查找并更新元素
    private void UpdateAreaButton_Clicked(object sender, EventArgs e)
    {
        var targetModel = _offlineAreasViewModel.FindModel("目标区域");
        if (targetModel != null)
        {
            targetModel.IsDownloaded = true;
            // 若模型实现INotifyPropertyChanged，UI会自动刷新
        }

        // 示例：添加新元素
        _offlineAreasViewModel.AddArea(new OfflineAreaModel { Name = "新区域", IsDownloaded = false });
    }
}

方案优势 #

• 避免静态成员带来的内存泄漏、测试困难等问题
• 符合MVVM设计模式，代码解耦，可维护性强
• 依赖注入确保ViewModel实例唯一，所有视图操作同一集合，UI自动同步更新

额外优化：模型实现INotifyPropertyChanged #

如果需要更新集合中单个元素的属性时UI自动刷新，让OfflineAreaModel实现INotifyPropertyChanged：

OfflineAreaModel.cs

public class OfflineAreaModel : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    private bool _isDownloaded;
    public bool IsDownloaded
    {
        get => _isDownloaded;
        set
        {
            _isDownloaded = value;
            OnPropertyChanged(nameof(IsDownloaded));
        }
    }

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

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