MAUI中按钮过滤内容后重置未点击按钮样式的实现疑问

直接通过CollectionView获取子元素来重置按钮样式既不符合MVVM设计原则，还会因为CollectionView的虚拟化特性（可视区域外的元素未实例化）导致无法获取全部子元素。更合理的方式是通过数据绑定+视图模型驱动来实现按钮的选中状态管理，具体步骤如下：

1. 给Category模型添加选中状态属性 #

在你的Category实体类中新增IsSelected布尔属性，并实现INotifyPropertyChanged接口来通知UI更新。同时可以添加一个计算属性TextColor，根据选中状态返回对应的颜色：

public class Category : INotifyPropertyChanged
{
    public string Name { get; set; }
    
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
            OnPropertyChanged(nameof(TextColor));
        }
    }

    // 根据选中状态返回文本颜色
    public Color TextColor => IsSelected ? Color.Red : Color.Gray;

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

2. 在ViewModel中管理选中状态 #

在ViewModel中维护分类集合和选中的分类对象，当用户点击按钮时，遍历集合重置所有分类的选中状态，再设置当前点击的分类为选中状态，同时执行你的过滤逻辑：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Category> Categories { get; set; }

    private Category _selectedCategory;
    public Category SelectedCategory
    {
        get => _selectedCategory;
        set
        {
            if (_selectedCategory == value) return;
            
            // 重置所有分类的选中状态
            foreach (var category in Categories)
            {
                category.IsSelected = category == value;
            }
            
            _selectedCategory = value;
            OnPropertyChanged();
            ChangeCategory(value);
        }
    }

    // 过滤逻辑方法
    private void ChangeCategory(Category selectedCategory)
    {
        // 这里写你的内容过滤代码
    }

    // 命令绑定（替代Clicked事件，更符合MVVM）
    public ICommand SelectCategoryCommand { get; }

    public MainViewModel()
    {
        // 初始化分类数据，默认选中第一个
        Categories = new ObservableCollection<Category>
        {
            new Category { Name = "分类1", IsSelected = true },
            new Category { Name = "分类2" },
            new Category { Name = "分类3" }
        };
        SelectedCategory = Categories.First();
        
        SelectCategoryCommand = new Command<Category>(category => SelectedCategory = category);
    }

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

3. XAML中绑定数据和命令 #

修改CollectionView的ItemTemplate，将按钮的文本、文本颜色与Category模型绑定，同时用Command替代Clicked事件来触发选中逻辑：

<CollectionView ItemsSource="{Binding Categories}" Orientation="Horizontal">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Button Text="{Binding Name}"
                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPage}}, Path=BindingContext.SelectCategoryCommand}"
                    CommandParameter="{Binding}"
                    TextColor="{Binding TextColor}"
                    Margin="5"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

如果不想用计算属性，也可以通过Style的DataTrigger来控制文本颜色：

<Button Text="{Binding Name}"
        Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPage}}, Path=BindingContext.SelectCategoryCommand}"
        CommandParameter="{Binding}"
        Margin="5">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="TextColor" Value="Gray"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                    <Setter Property="TextColor" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

为什么不推荐直接访问CollectionView子元素？ #

CollectionView默认开启UI虚拟化，只有当前可视区域内的元素才会被实例化，直接通过代码获取子元素可能只能拿到部分按钮，无法实现全量重置。而且直接操作UI元素违背了MVVM的"数据驱动UI"原则，会导致ViewModel与UI耦合度升高，不利于后续维护和扩展。

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