Xamarin Forms MVVM模式下嵌套视图的模型绑定实现问题咨询

• 全局属性共享错误：所有子视图的按钮BackgroundColor都绑定了父页面ViewModel的同一个BackgroundColor属性，你在ButtonClicked方法中循环修改该全局属性，最终值为最后一次遍历的赋值结果，因此所有按钮同步变色。
• 绑定上下文混乱：CustomButtonGridView直接将BindingContext设为父页面ViewModel，废弃了自身的子ViewModel，每个子项的独立状态（选中状态、自身颜色）没有独立存储的位置。
• 逻辑错误：ButtonClicked方法中循环修改全局属性的逻辑完全不符合需求，应该修改被点击子项自身的颜色属性，而非全局属性。
• 耦合度过高：子视图构造函数直接传入父页面ViewModel引用，违反MVVM的解耦原则，不利于后续维护。

1. 调整子视图模型，存储子项独立状态 #

子视图模型ButtonGridViewModel新增独立的选中状态、颜色属性，以及接收父页面命令的绑定属性：

public class ButtonGridViewModel : INotifyPropertyChanged
{
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            BackgroundColor = value ? Color.Blue : Color.Red;
            OnPropertyChanged();
        }
    }

    private Color _backgroundColor = Color.Red;
    public Color BackgroundColor
    {
        get => _backgroundColor;
        set
        {
            _backgroundColor = value;
            OnPropertyChanged();
        }
    }

    public ICommand BtnCmd { get; }
    public ICommand ParentClickCommand { get; set; }

    public ButtonGridViewModel()
    {
        BtnCmd = new Command(OnButtonClicked);
    }

    private void OnButtonClicked()
    {
        // 执行子视图自身逻辑
        Application.Current.MainPage.DisplayAlert("Clicked", "Clicked", "OK");
        // 通知父页面
        ParentClickCommand?.Execute(this);
    }

    // INotifyPropertyChanged实现逻辑自行补充
}

2. 修正子视图绑定逻辑 #

子视图不再直接持有父页面ViewModel引用，改为用BindableProperty传递父命令，绑定上下文使用自身的ViewModel：

public partial class CustomButtonGridView : ContentView
{
    public static readonly BindableProperty ClickCommandProperty =
        BindableProperty.Create(nameof(ClickCommand), typeof(ICommand), typeof(CustomButtonGridView), null);

    public ICommand ClickCommand
    {
        get => (ICommand)GetValue(ClickCommandProperty);
        set => SetValue(ClickCommandProperty, value);
    }

    public ButtonGridViewModel VM { get; set; }

    public CustomButtonGridView()
    {
        InitializeComponent();
        VM = new ButtonGridViewModel();
        BindingContext = VM;
    }

    protected override void OnPropertyChanged(string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);
        if (propertyName == nameof(ClickCommand))
        {
            VM.ParentClickCommand = ClickCommand;
        }
    }
}

子视图XAML绑定自身VM的属性：

<Grid x:Name="grid">
    <buttonView:CustomButtonView x:Name="myButton"
                                 Command="{Binding BtnCmd}"
                                 Text="Button"
                                 BackgroundColor="{Binding BackgroundColor}"/>
</Grid>

3. 调整父页面ViewModel逻辑 #

移除全局BackgroundColor属性，选中时只修改子项的IsSelected状态：

public class LabelPageViewModel : INotifyPropertyChanged
{
    public ObservableCollection<CustomButtonGridView> GridViewList { get; set; }
    private ButtonGridViewModel _selectedView;
    public ButtonGridViewModel SelectedView
    {
        get => _selectedView;
        set
        {
            if (_selectedView != value)
            {
                if (_selectedView != null) _selectedView.IsSelected = false;
                _selectedView = value;
                _selectedView.IsSelected = true;
                OnPropertyChanged();
            }
        }
    }

    public ICommand ItemClickCommand { get; }

    public LabelPageViewModel()
    {
        ItemClickCommand = new Command<ButtonGridViewModel>(OnItemClicked);
    }

    public void InitiliseGridContent()
    {
        GridViewList = new ObservableCollection<CustomButtonGridView>();
        for (int i = 0; i < 16; i++)
        {
            var item = new CustomButtonGridView();
            item.ClickCommand = ItemClickCommand;
            GridViewList.Add(item);
        }
        // 默认选中第一项
        SelectedView = GridViewList[0].VM;
    }

    private void OnItemClicked(ButtonGridViewModel clickedItem)
    {
        SelectedView = clickedItem;
        // 此处执行父页面需要的全局逻辑
    }
    // INotifyPropertyChanged实现逻辑自行补充
}

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