使用MVVM CommunityToolkit通过RelayCommand修改按钮属性无响应问题

问题现象 #

基于.NET Core 7开发的WPF应用，采用MVVM架构并使用MVVM CommunityToolkit。ViewModel中初始化ObservableCollection<Scene>，通过DataTemplate将每个Scene绑定为按钮，按钮绑定PlayStopCommand。初始化时按钮显示正常，但点击后图标、背景颜色等属性无变化。断点调试发现，每次调用PlayStop方法时，传入的scene.IsPlaying始终为false，修改的是临时对象而非集合中的原Scene实例。

核心原因 #

1. 值类型拷贝问题：Scene定义为struct（值类型），当作为参数传递到PlayStop方法时，会自动创建副本，修改副本的属性不会影响集合中的原实例。
2. 缺少属性变更通知：struct未实现INotifyPropertyChanged接口，即使修改了属性，UI也无法收到变更通知，导致界面不更新。

解决方案 #

1. 将Scene从struct改为class并实现属性变更通知 #

使用MVVM CommunityToolkit的ObservableObject基类和[ObservableProperty]特性，自动生成属性变更通知代码：

using CommunityToolkit.Mvvm.ComponentModel;
using Microsoft.UI.Xaml.Controls;
using System.Windows.Media;

public partial class Scene : ObservableObject
{
    public int ID { get; set; }

    [ObservableProperty]
    private string _name;

    [ObservableProperty]
    private Brush _color;

    public RelayCommand PlayStopCommand { get; set; }

    [ObservableProperty]
    private SymbolRegular _icon;

    [ObservableProperty]
    private bool _isPlaying;
}

2. 调整ViewModel中的逻辑（可选优化） #

由于Scene变为引用类型，传递到PlayStop方法的是实例引用，修改操作会直接作用于集合中的原对象。同时优化随机数生成逻辑，避免每次创建新的Random实例导致重复值：

public partial class DataViewModel : ObservableObject, INavigationAware
{
    private bool _isInitialized = false;
    private readonly Random _random = new Random();

    [ObservableProperty]
    private ObservableCollection<Scene> _scenes;


    public void OnNavigatedTo()
    {
        if (!_isInitialized)
            InitializeViewModel();
    }

    public void OnNavigatedFrom()
    {
    }

    private void InitializeViewModel()
    {
        var scenesCollection = new ObservableCollection<Scene>();

        for (int i = 0; i < 20; i++)
        {
            string name = "Scene " + (i + 1);
            var scene = new Scene
            {
                Name = name,
                Color = new SolidColorBrush(Color.FromArgb(200, 231, 129, 4)),
                Icon = SymbolRegular.Play48,
                IsPlaying = false
            };
            scene.PlayStopCommand = new RelayCommand(() => PlayStop(scene));
            scenesCollection.Add(scene);
        }

        Scenes = scenesCollection;
        _isInitialized = true;
    }

    [RelayCommand]
    public void PlayStop(Scene scene)
    {
        if (scene.IsPlaying)
        {
            scene.Icon = SymbolRegular.Play48;
            scene.IsPlaying = false;
        }
        else
        {
            scene.Icon = SymbolRegular.Pause48;
            scene.IsPlaying = true;
        }
        scene.Color = new SolidColorBrush(Color.FromArgb(
            (byte)200,
            (byte)_random.Next(0, 250),
            (byte)_random.Next(0, 250),
            (byte)_random.Next(0, 250)));
    }
}

3. XAML无需修改（确保DataType指向class） #

保持原有XAML代码即可，DataTemplate的DataType会自动匹配修改后的Scene类：

<ui:VirtualizingItemsControl
            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
            ItemsSource="{Binding ViewModel.Scenes, Mode=OneWay}"
            VirtualizingPanel.CacheLengthUnit="Item">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type models:Scene}">
                    <ui:Button
                        x:Name="buttin"
                        Width="600"
                        Height="50"
                        Margin="2"
                        Padding="0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Appearance="Secondary"
                        Background="{Binding Color, Mode=OneWay}"
                        Command="{Binding PlayStopCommand}"
                        Content="{Binding Name, Mode=TwoWay}"
                        FontFamily="Arial"
                        FontSize="25"
                        FontWeight="Bold"
                        Foreground="White"
                        Icon="{Binding Icon, Mode=TwoWay}"
                        IconFilled="True" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ui:VirtualizingItemsControl>

原理说明 #

• 引用类型特性：class是引用类型，传递参数时传递的是实例的内存地址，修改参数属性就是修改原集合中的实例。
• 属性变更通知：ObservableObject和[ObservableProperty]会自动为每个属性生成PropertyChanged事件，当属性值变化时，UI绑定会收到通知并更新界面。

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