Xamarin.Form CollectionView is checking RadioButtons randomly - xamarin.forms

Question

I have been trying to figure out this issue for days but without any progress.
In my project, I am generating questionnaire, which do achieved by a page with RadioButtons in pair - group. Those groups are repeating in CollectionView.
Even though each RadioButton group has its own GroupName, it is happening that upon radiobutton click and scrolling down other radio button is clicked as well. Also then if I am scrolling back and forth, others radio buttons are clicked.
This is really strange behaviour for me.
Initially I have following selection (left picture) and after scrolling up and down, it looks like right picture.
The code is really simple.
XAML page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Mobile.ViewModels"
xmlns:commonLogic="clr-namespace:Mobile.Models;assembly=Mobile"
xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
xmlns:behaviorsPack="clr-namespace:Xamarin.Forms.BehaviorsPack;assembly=Xamarin.Forms.BehaviorsPack"
xmlns:resources="clr-namespace:Mobile;assembly=Mobile"
NavigationPage.HasBackButton="False"
NavigationPage.HasNavigationBar="False"
x:Class="Mobile.Views.QuestionarePage"
x:DataType="local:QuestionnaireViewModel"
Shell.NavBarIsVisible="True"
Shell.FlyoutBehavior="Disabled"
Title="{x:Static resources:AppResources.QuestionnaireTitle}">
<ContentPage.BindingContext>
<local:QuestionnaireViewModel/>
</ContentPage.BindingContext>
<CollectionView x:Name="listView" ItemsSource="{Binding StringQuestions}" SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10,5,10,8" Spacing="2" x:DataType="commonLogic:TestClass">
<Label Text="{Binding GroupName}" LineBreakMode="WordWrap" FontAttributes="Bold" TextColor="{StaticResource Primary}" FontSize="18"/>
<RadioButton GroupName="{Binding GroupName}" Content="{Binding GroupName}"></RadioButton>
<RadioButton GroupName="{Binding GroupName}" Content="{Binding GroupName}"></RadioButton>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
ViewModel class:
public class TestClass
{
public string GroupName { get; set; }
public TestClass(string name)
{
GroupName = name;
}
}
Any help appreciated.
Thanks
Update
Even following code is causing me troubles
<CollectionView x:Name="listView" ItemsSource="{Binding Questions}" SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10,5,10,8" Spacing="2" >
<Label Text="TEST" LineBreakMode="WordWrap" FontAttributes="Bold" FontSize="18"/>
<RadioButton/>
<RadioButton/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Answer 1

You could try below two methods.
One,using ListView to replace CollectionView.
<ListView x:Name="listView" HasUnevenRows="True" ItemsSource="{Binding StringQuestions}" SelectionMode="None" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10,5,10,8" Spacing="2" RadioButtonGroup.GroupName="{Binding GroupName}">
<Label Text="{Binding GroupName}" LineBreakMode="WordWrap" FontAttributes="Bold" TextColor="AliceBlue" FontSize="18"/>
<RadioButton Content="{Binding GroupName}"></RadioButton>
<RadioButton Content="{Binding GroupName}"></RadioButton>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Two:define two property in your model.
public class TestClass
{
public string GroupName { get; set; }
public bool IsFirstCheck { get; set; }
public bool IsSecondCheck { get; set; }
public TestClass(string name)
{
GroupName = name;
}
}
then bind to your RadioButtons:
<CollectionView x:Name="listView" ItemsSource="{Binding StringQuestions}" SelectionMode="None" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10,5,10,8" Spacing="2" RadioButtonGroup.GroupName="{Binding GroupName}">
<Label Text="{Binding GroupName}" LineBreakMode="WordWrap" FontAttributes="Bold" TextColor="AliceBlue" FontSize="18"/>
<RadioButton IsChecked="{Binding IsFirstCheck}" CheckedChanged="RadioButton_CheckedChanged" Content="{Binding GroupName}"></RadioButton>
<RadioButton IsChecked="{Binding IsSecondCheck}" CheckedChanged="RadioButton_CheckedChanged_1" Content="{Binding GroupName}"></RadioButton>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
in your code behind,change the IsFirstCheck and IsSecondCheck values.
private void RadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
TestClass test = (TestClass)(sender as RadioButton).BindingContext;
if (test !=null)
{
test.IsFirstCheck = e.Value;
}
}
private void RadioButton_CheckedChanged_1(object sender, CheckedChangedEventArgs e)
{
TestClass test = (TestClass)(sender as RadioButton).BindingContext;
if (test != null)
{
test.IsSecondCheck = e.Value;
}
}