We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to maintain the SelectedIndex of the picker when loaded inside SfListView?

Platform: Xamarin.Forms |
Control: SfListView

The SelectedIndex property of the picker control will not be maintained when loaded inside the ItemTemplate of SfListView. This is because while scrolling down the list, the elements created in the View will be recycled and only the BindingContext of the SfListView item will be updated. Since BindingContext is not set for SelectedIndex, its value gets reused while scrolling. However, you can overcome this by binding the SelectedIndex property.

 

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewSample;assembly=ListViewSample"
             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"
             x:Class="ListViewSample.MainPage">
 
    <ContentPage.BindingContext>
        <local:ContactsViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <listView:SfListView x:Name="listView" ItemSize="70" ItemsSource="{Binding contactsinfo}" >
                <listView:SfListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid x:Name="grid" RowSpacing="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="1" />
                                    </Grid.RowDefinitions>
                                    <Grid RowSpacing="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
 
                                        <Image Source="{Binding ContactImage}"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"
                       HeightRequest="50"/>
 
                                        <Grid Grid.Column="1"
                      RowSpacing="1"
                      VerticalOptions="Center">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
 
                                            <Label Text="{Binding ContactName}"/>
                                            <Label Grid.Row="1" Text="{Binding ContactNumber}"/>
                                        </Grid>
                                        <Picker Grid.Column="2" x:Name="picker" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="200"
                                                ItemsSource="{Binding Source={x:Reference listView}, Path=BindingContext.PickerItems}"
                                                SelectedIndex="{Binding PickerSelectedIndex}">
                                        </Picker>
                                    </Grid>
                                    <StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/>
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </listView:SfListView.ItemTemplate>
            </listView:SfListView>
    </ContentPage.Content>
</ContentPage>

 

You can assign a value to a property in the data model and bind the value to SelectedIndex property as like below code snippets.  

C#

private int pickerSelectedIndex; 
 
public int PickerSelectedIndex 
{ 
  get 
  { 
    return pickerSelectedIndex; 
  } 
  set 
  { 
    if(pickerSelectedIndex != value) 
    { 
      pickerSelectedIndex = value; 
    } 
  } 
} 
 
public Contacts() 
{ 
  pickerSelectedIndex = 0; 
} 

 

You can also add items into collection for binding picker items as like below code snippets. 

C#

private ObservableCollection<string> pickerItems; 
        
 public ObservableCollection<string> PickerItems 
{ 
  get { return pickerItems; } 
  set { pickerItems = value; } 
} 
 
public ContactsViewModel() 
{ 
  PickerItems = new ObservableCollection<string>(); 
  for (int i = 0; i < Countries.Count(); i++) 
  { 
    PickerItems.Add(Countries[i]); 
  } 
}

 

Click here to download the sample.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile