xamarin forms CarouselView: chield element are reused

Johnny Valery 6 Reputation points
2021-04-03T20:23:41.75+00:00

I face a problem, I'm working on a quiz app. To make a long story short, I'n the previous release, I used the Tabbedpage but it did not fill all my expectation So I decide to rewrite my UI with the CarouselView.

At the first question, when my user select his answer his anwser 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 higlighted 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 reuse the item in order to save memory. It has 5 items and the reuse it? Does any one know hot to solve it, or how to increase the number of unique element.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,293 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,234 questions
{count} votes