How to update the header and ItemsSource of Xamarin.Forms SfPicker dynamically

1 min read

The Xamarin.Forms SfPicker provides support to update the HeaderText, ColumnHeaderText, and ItemsSource dynamically by setting different objects to the HeaderText, ColumnHeaderText, and ItemsSource properties.

The following steps explain how to update the HeaderText, ColumnHeaderText, and ItemsSource in Xamarin.Forms SfPicker.

Step 1: Create a view model class, and the class should implement INotifyPropertyChanged.

Step 2: Create a symbol ObservableCollection and add items to display the data.

Step 3: Create a symbol ObservableCollection and add items to change the headers and ItemsSource dynamically in Xamarin.Forms SfPicker.

In XAML page, you need to bind the view model properties to ItemsSource, HeaderText, and ColumnHeaderText.

The following code sample demonstrates how to bind the properties in Xamarin.Forms SfPicker.

XAML:

<ContentPage.BindingContext>
    <local:ViewModel x:Name="transportInfo"/>
</ContentPage.BindingContext>
 
<StackLayout>
    <Button Text="Update" HeightRequest="50" Clicked="Button_Clicked"/>
    <sfPicker:SfPicker x:Name="picker" VerticalOptions="FillAndExpand" 
                       ItemsSource="{Binding JobLists}" 
                       ColumnHeaderText="{Binding ColumnHeaders}" 
                       HeaderText="{Binding HeaderText }" 
                       ShowColumnHeader="True" 
                       ShowHeader="True">
    </sfPicker:SfPicker>
</StackLayout>

The following code sample demonstrates how to change the HeaderText, ColumnHeaderText, and ItemsSource dynamically in Xamarin.Forms SfPicker.

C#:

 private void Button_Clicked(object sender, EventArgs e)
 {
       transportInfo.HeaderText = "Pick a transport";
       transportInfo.JobLists = transportInfo.TransportationLists;
       transportInfo.ColumnHeaders = transportInfo.UpdateColumnHeaders;
 }