StackLayout绑定按钮却显示额外内容的问题排查

尝试在ViewModel中实现对StackLayout的项进行读写操作，XAML代码如下：

<StackLayout x:Name="PlayerList" BindableLayout.ItemsSource="{Binding Players}"/>

ViewModel代码如下：

public ObservableCollection<Button> Players { get; set; } = new ObservableCollection<Button>();
public GamePointViewModel()
{
    InitializePlayerList();
}

public void InitializePlayerList()
{
    for (int i = 0; i < GameSettings.PlayerCount; i++)
    {
        Button newBtn = new Button();

        newBtn.Text = GameSettings.Players[i];
        newBtn.ClassId = i.ToString();
        newBtn.Clicked += ButtonEvent_Click;
        Players.Add(newBtn);
    }
}

void ButtonEvent_Click(object sender, EventArgs e)
{
    Button button = (Button)sender;

    if (button.Background == Brush.Green)
    {
        button.Background = Brush.Gray;
    }
    else
    {
        button.Background = Brush.Green;
    }
}

实际界面出现了额外的文本内容，预期仅显示按钮，请问问题出在哪里？

问题根源 #

直接在ViewModel中创建并绑定Button这类UI控件到ItemsSource是错误的：

1. 违反MVVM模式的核心原则——ViewModel不应持有任何UI元素，数据与UI需要分离；
2. 当BindableLayout未指定ItemTemplate时，会默认调用集合中对象的ToString()方法，将结果作为文本显示，这就是你看到的额外文本（通常是Microsoft.Maui.Controls.Button这类控件类型字符串）。

正确实现方式 #

1. 创建Player数据模型 #

定义包含业务数据和状态的数据类，实现INotifyPropertyChanged以支持属性变更通知：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Player : INotifyPropertyChanged
{
    private string _text;
    public string Text
    {
        get => _text;
        set { _text = value; OnPropertyChanged(); }
    }

    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set { _isSelected = value; OnPropertyChanged(); }
    }

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

2. 修改ViewModel，使用数据集合替换UI控件集合 #

移除所有UI相关代码，改用ObservableCollection<Player>管理数据：

using System.Collections.ObjectModel;
using System.Windows.Input;

public class GamePointViewModel
{
    public ObservableCollection<Player> Players { get; set; } = new ObservableCollection<Player>();

    public ICommand TogglePlayerSelectionCommand => new Command<Player>(player =>
    {
        player.IsSelected = !player.IsSelected;
    });

    public GamePointViewModel()
    {
        InitializePlayerList();
    }

    public void InitializePlayerList()
    {
        for (int i = 0; i < GameSettings.PlayerCount; i++)
        {
            Players.Add(new Player { Text = GameSettings.Players[i] });
        }
    }
}

3. 修改XAML，添加ItemTemplate并绑定数据 #

通过DataTemplate定义每个项的UI样式，绑定数据属性和命令：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.YourPage">
    <ContentPage.Resources>
        <!-- 添加布尔转画刷的转换器 -->
        <local:BoolToBrushConverter x:Key="BoolToBrushConverter"/>
    </ContentPage.Resources>

    <StackLayout x:Name="PlayerList" BindableLayout.ItemsSource="{Binding Players}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Button Text="{Binding Text}"
                        Background="{Binding IsSelected, Converter={StaticResource BoolToBrushConverter}}"
                        Command="{Binding Source={RelativeSource AncestorType={x:Type local:GamePointViewModel}}, Path=TogglePlayerSelectionCommand}"
                        CommandParameter="{Binding .}"/>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ContentPage>

4. 实现BoolToBrushConverter转换器 #

用于将IsSelected的布尔值转换为对应的背景画刷：

using System.Globalization;
using Microsoft.Maui.Controls;

public class BoolToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Brush.Green : Brush.Gray;
    }

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

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