Xamarin forms CarouselView: child elements are not always instantiated

Question

I am facing a problem, I'm working on a quiz app. Long story short, in the previous release, I used the Tabbedpage but it did not fulfill all my expectations.

So I decided to rewrite my UI with the CarouselView.

At the first question, when the user selects his answer his answer is highlighted (green if it's correct, red if it's wrong).

But here is my problem: when the answer is highlighted at the question 1, for an unknown reason the question 6 is also highlighted at the same position

<CarouselView x:Name="Carrousel" 
                          Loop="False" 
                          ItemsSource="{Binding FullQuestion}" 
                          IndicatorView="indicatorView"
                          >
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="FirstGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="0.3*"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="0.3*"/>
                                <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                            <Label x:Name="Question" Text="{Binding Name}" />
                            <views:MusicButtonView x:Name="MusicButtonView" Grid.Row="1" Margin="10" SongUrl="{Binding ID}" />
                            <Label x:Name="QuestionType" Grid.Row="2" Text="{Binding NameOfQuestion}" />
                        <Grid x:Name="ButtonGrid" Grid.Row="4">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Button Grid.Row="0" x:Name="btn1" Text="{Binding Lines[0].SongName}" Clicked="OnBtnClick" BackgroundColor="#998A8B8D" BorderColor="White" CornerRadius="1" BorderWidth="2"/>
                            <Button Grid.Row="1" x:Name="btn2" Text="{Binding Lines[1].SongName}" Clicked="OnBtnClick" BackgroundColor="#998A8B8D" BorderColor="White" CornerRadius="1" BorderWidth="2"/>
                            <Button Grid.Row="2" x:Name="btn3" Text="{Binding Lines[2].SongName}" Clicked="OnBtnClick" BackgroundColor="#998A8B8D" BorderColor="White" CornerRadius="1" BorderWidth="2"/>
                            <Button Grid.Row="3" x:Name="btn4" Text="{Binding Lines[3].SongName}" Clicked="OnBtnClick" BackgroundColor="#998A8B8D" BorderColor="White" CornerRadius="1" BorderWidth="2"/>
                        </Grid>
                    </Grid>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>

private void Process(QuestionFull data, int index,ref Button btn)
{
        var id = data.QuestionId;
        
        if(!data.IsAnswered)
        {
            btn.BackgroundColor = Color.FromHex("#998A8B8D");
        }

        if (data.ID.Equals(data.Lines[index].SongId))
        {
            btn.BackgroundColor = Color.FromRgb(0, 213, 33);
            data.IsCorrectAnswer = true;
        }
        else
        {
            btn.BackgroundColor = Color.FromRgb(255, 69, 56);
            data.IsCorrectAnswer = false;
        }
        data.IsAnswered = true;
}

My idea is that carouselview reuses the item in order to save memory. It has 5 items and then reuses them? Does anyone know how to solve it, or how to increase the number of unique elements.

Answer 1

CarouselView is based on CollectionView, so this behavior is expected.

Please see this comment: XF CarouselView #9200 issue comment