Search code examples
c#eventsradio-buttonmaui

Maui why radiobutton checked changed event takes wrong model?

So i have something like this model

public class First
{
   public int Id {get; set;}
   public string Name {get; set;}
   public ICollection<First> Collection {get; set;}
}

public class Second
{
   public int Id {get; set;}
   public bool IsCorrect {get; set;}
   public int ParentId {get; set;}
   public First Parent {get; set;}   
}

I define ICollection as ObservableCollection inside my view model. So inside my UI i got collection view with item source of "First" class elements collection and also one more collection view inside for "Second" class collection. And for this child collection i got item template with radio button. So something like this

<CollectionView ItemSource="{Binding ListOfFirst}">
  <CollectionView.ItemTemplate>
    <DataTemplate x:DataType="models:First">
     <Label Text="{Binding Name}"/>
    
     <CollectionView ItemSource="{Binding Collection}">
       <CollectionView.ItemTemplate>
         <DataTemplate x:DataType="models:Second">
           <RadioButton/>
         </DataTemplate>
       </CollectionView.ItemTemplate>
     </CollectionView>
</CollectionView>

I got radiobutton group for each collection of "Second" class and if i define event to command behavior inside my ui and code like this

<RadioButton  IsChecked="{Binding IsCorrect}" 
              GroupName="{Binding ParentId}">  
                                                                           
                            
  <RadioButton.Behaviors>
    <toolkit:EventToCommandBehavior EventName="CheckedChanged"
                                    Command="{Binding Source={x:Reference TestEditorPage}, Path=BindingContext.SpacesRadioButton_CheckedChangedCommand}"
                                    CommandParameter="{Binding .}"/>
  </RadioButton.Behaviors>
</RadioButton>

[RelayCommand]
public void SpacesRadioButton_CheckedChanged(Second second)
{
            
}

The problem is that no matter which group of radio buttons I click on, I always get the very first element of the collection in the team. For example, if I have 3 elements of class "Second" in the list, I always get the first element. I also tried to do this not through the event to command behavior but through a regular event. The code of the button and the event code is as follows

<RadioButton  IsChecked="{Binding IsCorrect}" 
              GroupName="{Binding ParentId}" 
              CheckedChanged="RadioButton_CheckedChanged"/>       

private void RadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
   var rb = (RadioButton)sender;
   var second = (Second)rb.BindingContext;
}

In this case, the situation is better, but still incorrect. When I click on a group of buttons for the first time, I get the correct model. But when I click on the group for the second time, I get exactly the model of the previous element that was selected. That is, the same example with a list of 3 elements of the "Second" class. When I click on the second element for the first time, I get it in the event code. When I decide to click on the 3rd element, for some reason I get the same second element in the event code. And for example, if I want to select the first element, I get the 3rd element. Who can explain why this happens and how to fix it? I will be very grateful for your help

Solution

  • When you have one radio button selected, and click another one, TWO changes happen:

    • The previous checked button becomes UNCHECKED (unselected).
    • The clicked button becomes CHECKED (selected).

    Thus, RadioButton_CheckedChanged is called TWICE.

    if (e.Value) ...