WPF MVVM模式下实现按钮单选式背景颜色切换问题咨询

问题需求 #

多个按钮中仅能有一个按钮背景为红色：点击任意按钮时，该按钮背景变为红色，其余按钮切换为深灰色；再次点击其他按钮时，仅新点击的按钮保持红色，其余恢复深灰色。

现有代码的问题 #

1. 仅维护了第一个按钮的背景色，未统一管理按钮组的选中状态
2. 其余两个按钮未绑定背景和点击命令，无法参与互斥逻辑
3. 命令未传递参数，无法区分点击的是哪个按钮
4. 颜色切换逻辑仅针对单个按钮，未处理其他按钮的重置

优化解决方案 #

1. 重构ViewModel（统一管理选中状态）

用单个属性标记当前选中的按钮，而非单独维护每个按钮的颜色：

public class VM1_2VM : INotifyPropertyChanged
{
    private string _selectedButton;
    // 可设置默认选中项，如初始选中Basic则赋值为"Basic"
    public string SelectedButton
    {
        get => _selectedButton;
        set
        {
            _selectedButton = value;
            OnPropertyChanged(nameof(SelectedButton));
        }
    }

    private ICommand _clickCommand;
    public ICommand ClickCommand
    {
        get => _clickCommand ??= new MyCommandForPage(parameter =>
        {
            if (parameter is string buttonId)
            {
                SelectedButton = buttonId;
            }
        }, true);
    }

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

2. 优化命令类（支持参数传递）

修改命令类以接收点击参数，区分不同按钮：

public class MyCommandForPage : ICommand
{
    private Action<object> _action;
    private bool _canExecute;

    public MyCommandForPage(Action<object> action, bool canExecute)
    {
        _action = action;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute;

    public void Execute(object parameter) => _action(parameter);

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

3. 修改转换器（动态判断背景色）

让转换器根据选中状态和按钮标识返回对应颜色：

public class SelectedButtonToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is string selectedId && parameter is string buttonId)
        {
            return new SolidColorBrush(selectedId == buttonId ? Colors.Red : Colors.DarkRed);
        }
        return new SolidColorBrush(Colors.DarkRed);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

4. 更新XAML（绑定所有按钮）

为每个按钮绑定命令、命令参数和背景色：

<Page.Resources>
    <conv:SelectedButtonToColorConverter x:Key="SelectedButtonConverter"/>
    <viewModels:VM1_2VM x:Key="D1"/>
</Page.Resources>

<WrapPanel Margin="200 0 0 0" DataContext="{Binding Source={StaticResource D1}}">
    <Button Style="{StaticResource SquareButton}" 
            Content="Basic" 
            Margin="182 0 0 0" 
            Background="{Binding SelectedButton, Converter={StaticResource SelectedButtonConverter}, ConverterParameter=Basic}"
            Command="{Binding ClickCommand}"
            CommandParameter="Basic"/>
    <Button Style="{StaticResource SquareButton}" 
            Margin="55 0 0 0" 
            Content="Standard"
            Background="{Binding SelectedButton, Converter={StaticResource SelectedButtonConverter}, ConverterParameter=Standard}"
            Command="{Binding ClickCommand}"
            CommandParameter="Standard"/>
    <Button Style="{StaticResource SquareButton}" 
            Margin="55 0 0 0" 
            Content="Premium"
            Background="{Binding SelectedButton, Converter={StaticResource SelectedButtonConverter}, ConverterParameter=Premium}"
            Command="{Binding ClickCommand}"
            CommandParameter="Premium"/>
</WrapPanel>

方案说明 #

• 用SelectedButton统一管理选中状态，避免冗余的颜色属性，维护更简单
• 转换器通过ConverterParameter区分按钮，动态生成背景色，符合MVVM分离逻辑的原则
• 单个命令处理所有按钮点击，通过参数区分操作目标，减少代码重复

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