2 单选按钮组在使用社区工具包 MVVM 的 MAUI 中不起作用

Question

我正在使用 .NET MAUI，我遇到了一个问题，我有 2 个不同的无线电组，每个无线电组都有一个使用绑定到 bool 变量的选择。我正在利用 NET 社区工具包 MVVM 进行绑定。问题是当我显示这 2 个组时，所选值只出现在其中一个上，而不是两个上。我测试了绑定是否对每个都有效，并且确实有效（通过一次删除一个无线电组）。我很困惑，我确实知道问题出在哪里。这是我的代码

主页的代码

<?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="MauiApp1.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
            <Label Text="ok"/>
            <StackLayout >
                <Grid ColumnDefinitions="*,*" WidthRequest="200" >
                    <RadioButton Grid.Column="0"  Content="Yes"    IsChecked="{Binding VariableA}"/>
                    <RadioButton Grid.Column="1"  Content="No"  />
                </Grid>
            </StackLayout >

            <StackLayout >
                <Grid ColumnDefinitions="*,*" WidthRequest="200" >
                    <RadioButton Grid.Column="0" Content="Yes"  IsChecked="{Binding VariableB}"/>
                    <RadioButton Grid.Column="1"  Content="No"  />
                </Grid>
            </StackLayout>
            

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

主页的代码隐藏

namespace MauiApp1;

public partial class MainPage : ContentPage
{
    

    public MainPage(Class1 viewModel)
    {
        BindingContext = viewModel;
        InitializeComponent();
    }

    
}

视图模型的代码

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiApp1
{
    public partial class Class1 : ObservableObject
    {
        
        [ObservableProperty]
        public bool variableA= true;
        [ObservableProperty]
        public bool variableB= true;
    }
}

最后是 MauiProgram.cs

namespace MauiApp1;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
        builder.Services.AddSingleton<MainPage>();
        builder.Services.AddSingleton<Class1>();
        return builder.Build();
    }
}

这是我按上面编码运行 2 radiogroup 时的结果。你能帮我理解我做错了什么吗？

[如您所见，只有一个无线电组显示我运行应用程序时选择的值][1] [1]: https://i.stack.imgur.com/8dXP1.png

Answer 1

要将 Radiobuttons 添加到同一组，您需要为最上层的单选组提供组名

documents 说：

RadioButtonGroup 类定义了一个 GroupName 附加属性，类型为字符串，可以在 Layout<View> 对象上设置。这使得任何布局都可以变成单选按钮组：

XAML

<StackLayout RadioButtonGroup.GroupName="colors">
    <Label Text="What's your favourite colour?" />
    <RadioButton Content="Red" />
    <RadioButton Content="Green" />
    <RadioButton Content="Blue" />
    <RadioButton Content="Other" />
</StackLayout>

在此示例中，StackLayout 中的每个 RadioButton 都将其 GroupName 属性设置为颜色，并且相互排斥。