2 radio button group do not work in MAUI using community toolkit MVVM

Question

I am using .NET MAUI and I come across an issue where I have 2 different radio group, each has a selection using a binding to a bool variable. I am leveraging the NET community toolkit MVVM to do the binding. The issue is when I have those 2 groups displayed, the selected value appears on only one of them and not both. i tested whether the binding works for each, and it does (by removing one radio group at a time). I am confused, and I do understand where the issue is. Here is my code

Code for the mainPage

<?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>

code behind for the mainpage

namespace MauiApp1;

public partial class MainPage : ContentPage
{
    

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

    
}

code for the view model

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;
    }
}

and finally 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();
    }
}

here is the result when I run the 2 radiogroup as coded above. Can you help me in understanding what I do wrong?

[As you see only one radio group shows the value selected when i run the app][1] [1]: https://i.stack.imgur.com/8dXP1.png

Answer 1

To add Radiobuttons to the same group you need to provide a group name to the parent-most radio group

The documents says:

The RadioButtonGroup class defines a GroupName attached property, of type string, which can be set on a Layout<View> object. This enables any layout to be turned into a radio button group:

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>

In this example, each RadioButton in the StackLayout will have its GroupName property set to colours, and will be mutually exclusive.