Category / Section
How to maintain the SelectedIndex of the picker when loaded inside SfListView?
3 mins read
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.
