Xamarin Forms Carousel View lost selected values (Survey Sample)

Question

I use Xamarin Forms v2.3.1.114 and I want to create a survey page in my app.

My basic class is this :

public class Question
{
    public string Title { get; set; }
    public List<string> Answers { get; set; }
}

My sample code is this :

ObservableCollection<Question> Questions = new ObservableCollection<Question> ();

        Questions.Add (
            new Question () {
                Title = "Question A",
                Answers = new List<string>{
                        "Answer A",
                        "Answer B",
                        "Answer C",
                        "Answer D"
                        }
            }
         );

        Questions.Add (
            new Question () {
                Title = "Question B",
                Answers = new List<string>{
                        "Answer A",
                        "Answer B",
                        "Answer C",
                        "Answer D",
                        "Answer E",
                        "Answer F"
                }
            }
         );

My Xaml is the following :

<Grid Grid.Row="1">

        <cv:CarouselView x:Name="CarouselQuestions">
        <cv:CarouselView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="12">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>     
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" BackgroundColor="#404040">
                <ContentView Padding="12">
                        <Label TextColor="White" HorizontalOptions="Start" Text="{Binding Title}"/>
                </ContentView>
            </Grid>
                <ListView Grid.Row="1" ItemsSource="{Binding Answers}" BackgroundColor="Transparent" HasUnevenRows="true">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid Padding="12">
                                <Label TextColor="Black" Text="{Binding}"/>
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>         
            </Grid>
        </DataTemplate>
        </cv:CarouselView.ItemTemplate>
        </cv:CarouselView>

</Grid>

I use CarouselView control from Nuget but when I select a value from one listview and swipe carousel , the selected values have been losted.

How can i fix this ?

Thanks !!

Did you make your ObservableCollection<Question> Questions global or just local? — Matthew Regul

Alejandro Ruiz Varela Alejandro Ruiz Varela · Accepted Answer · 2017-01-31T21:57:00

Since Carousel item is reused you must need to update selected item or binding it into a new property of your CarouselView items you'll need to add something like this:

object _selectedItem;
public object SelectedItem{
    get{
       return _selectedItem;
    }
    set{
        _selectedItem = value;
        OnPropertyChanged();
    }
}

And add binding into your ListView Xaml

<ListView SelectedItem="{Binding SelectedItem}" Grid.Row="1" ItemsSource="{Binding Answers}" BackgroundColor="Transparent" HasUnevenRows="true">

Xamarin Forms Carousel View lost selected values (Survey Sample)

1 Answers