MAUI多RadioButtonGroup加载时首个组选中状态不生效问题排查

我有一个包含两个RadioButtonGroup的MAUI测试项目，页面加载时首个组中应被选中的单选按钮未显示选中状态。预期Group1的"Yes"按钮会被选中，但实际没有。

表单代码（XAML） #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RadioButtonGroupTest.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="0"
            Padding="30,30,0,0"
            VerticalOptions="Start">

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="5*"></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Label Text="Group 1" Grid.Row="0" Grid.Column="0"></Label>

                <HorizontalStackLayout
                    Grid.Row="0"
                    Grid.Column="1"
                    RadioButtonGroup.GroupName="Group1">

                    <RadioButton
                        x:Name="Group1YesRadioButton"
                        Content="Yes"
                        IsChecked="{Binding Path=Group1YesChecked}"
                        Value="Yes">
                    </RadioButton>

                    <RadioButton
                        x:Name="Group1NoRadioButton"
                        Content="No"
                        IsChecked="{Binding Path=Group1NoChecked}"
                        Value="No">
                    </RadioButton>
                </HorizontalStackLayout>

                <Label Text="Group 2" Grid.Row="1" Grid.Column="0"></Label>

                <HorizontalStackLayout
                    Grid.Row="1"
                    Grid.Column="1"
                    RadioButtonGroup.GroupName="Group2">

                    <RadioButton
                        x:Name="Group2RedRadioButton"
                        Content="Red"
                        IsChecked="{Binding Path=Group2RedChecked}"
                        Value="Red">
                    </RadioButton>

                    <RadioButton
                        x:Name="Group2GreenRadioButton"
                        Content="Green"
                        IsChecked="{Binding Path=Group2GreenChecked}"
                        Value="Green">
                    </RadioButton>

                    <RadioButton
                        x:Name="Group2BlueRadioButton"
                        Content="Blue"
                        IsChecked="{Binding Path=Group2BlueChecked}"
                        Value="Bule">
                    </RadioButton>
                </HorizontalStackLayout>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

ViewModel代码 #

public class ViewModel : INotifyPropertyChanged
{
    public bool Group1YesChecked { get; set; }
    public bool Group1NoChecked { get; set; }
    public bool Group2RedChecked { get; set; }
    public bool Group2GreenChecked { get; set; }
    public bool Group2BlueChecked { get; set; }

    public ViewModel() 
    { 
        Group1YesChecked = true;
        Group1NoChecked = false;
        Group2RedChecked = false;
        Group2GreenChecked = true;
        Group2BlueChecked = false;
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

页面后台代码 #

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        ViewModel vm = new ViewModel();
        this.BindingContext = vm;
    }
}

错误原因 #

ViewModel中使用的是自动属性，构造函数设置属性值时不会触发PropertyChanged事件，UI无法感知到属性已被设为true，因此单选按钮不会显示选中状态。

另外，MAUI的RadioButtonGroup更推荐绑定到一个表示选中值的属性，而非给每个RadioButton单独绑定IsChecked，这种方式更简洁且避免逻辑冲突。

修复方案 #

方案1：修改ViewModel属性为带通知的完整属性 #

将自动属性改为触发PropertyChanged的完整属性，确保属性值变化时通知UI：

public class ViewModel : INotifyPropertyChanged
{
    private bool _group1YesChecked;
    private bool _group1NoChecked;
    private bool _group2RedChecked;
    private bool _group2GreenChecked;
    private bool _group2BlueChecked;

    public bool Group1YesChecked
    {
        get => _group1YesChecked;
        set
        {
            if (_group1YesChecked != value)
            {
                _group1YesChecked = value;
                OnPropertyChanged();
            }
        }
    }

    public bool Group1NoChecked
    {
        get => _group1NoChecked;
        set
        {
            if (_group1NoChecked != value)
            {
                _group1NoChecked = value;
                OnPropertyChanged();
            }
        }
    }

    public bool Group2RedChecked
    {
        get => _group2RedChecked;
        set
        {
            if (_group2RedChecked != value)
            {
                _group2RedChecked = value;
                OnPropertyChanged();
            }
        }
    }

    public bool Group2GreenChecked
    {
        get => _group2GreenChecked;
        set
        {
            if (_group2GreenChecked != value)
            {
                _group2GreenChecked = value;
                OnPropertyChanged();
            }
        }
    }

    public bool Group2BlueChecked
    {
        get => _group2BlueChecked;
        set
        {
            if (_group2BlueChecked != value)
            {
                _group2BlueChecked = value;
                OnPropertyChanged();
            }
        }
    }

    public ViewModel() 
    { 
        Group1YesChecked = true;
        Group1NoChecked = false;
        Group2RedChecked = false;
        Group2GreenChecked = true;
        Group2BlueChecked = false;
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

方案2：使用MAUI推荐的RadioButtonGroup绑定方式（更优） #

无需给每个RadioButton绑定IsChecked，直接绑定分组的选中值，代码更简洁：

修改后的ViewModel

public class ViewModel : INotifyPropertyChanged
{
    private string _selectedGroup1Value;
    private string _selectedGroup2Value;

    public string SelectedGroup1Value
    {
        get => _selectedGroup1Value;
        set
        {
            if (_selectedGroup1Value != value)
            {
                _selectedGroup1Value = value;
                OnPropertyChanged();
            }
        }
    }

    public string SelectedGroup2Value
    {
        get => _selectedGroup2Value;
        set
        {
            if (_selectedGroup2Value != value)
            {
                _selectedGroup2Value = value;
                OnPropertyChanged();
            }
        }
    }

    public ViewModel() 
    { 
        SelectedGroup1Value = "Yes";
        SelectedGroup2Value = "Green";
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

修改后的XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RadioButtonGroupTest.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="0"
            Padding="30,30,0,0"
            VerticalOptions="Start">

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="5*"></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Label Text="Group 1" Grid.Row="0" Grid.Column="0"></Label>

                <HorizontalStackLayout
                    Grid.Row="0"
                    Grid.Column="1"
                    RadioButtonGroup.GroupName="Group1"
                    RadioButtonGroup.SelectedValue="{Binding SelectedGroup1Value}">

                    <RadioButton Content="Yes" Value="Yes"></RadioButton>
                    <RadioButton Content="No" Value="No"></RadioButton>
                </HorizontalStackLayout>

                <Label Text="Group 2" Grid.Row="1" Grid.Column="0"></Label>

                <HorizontalStackLayout
                    Grid.Row="1"
                    Grid.Column="1"
                    RadioButtonGroup.GroupName="Group2"
                    RadioButtonGroup.SelectedValue="{Binding SelectedGroup2Value}">

                    <RadioButton Content="Red" Value="Red"></RadioButton>
                    <RadioButton Content="Green" Value="Green"></RadioButton>
                    <RadioButton Content="Blue" Value="Blue"></RadioButton>
                </HorizontalStackLayout>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

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