How to dynamically bind the List<Object> to picker in Xamarin forms

Question

I'm trying to bind the List to a picker control in Xamarin forms. But I'm not able to get the picker populated.

Please let me know what I'm missing here.

[PropertyChanged.AddINotifyPropertyChangedInterface]
public class TransactionFilterViewModel : TransactionListViewModel, INotifyPropertyChanged
{

    public string Name { get; set; }
    public DateTime DatePicker { get; set; }

    //public ObservableCollection<GroupedFilterModel> TransactionFilters { get; set; }
    List<string> FilterTypes = new List<string>() { "TRANSACTION TYPE", "BENEFIT TYPE", "DATE RANGE" };

    public List<TransactionBenefitViewModel> TransactionBenefits { get; set; }

    public TransactionType TransactionTypeFilter { get; set; }

    public string BenefitTypeFilter { get; set; }

    public DateTime FromDateFilter { get; set; }

    public DateTime ToDateFilter { get; set; }

    public List<Benefit> Benefits = new List<Benefit>();

    //public List<string> lstbenefits = new List<string>() { "manju", "vinu", "jaggu" };

    private TransactionBenefitViewModel _selectedBenefit;

    public TransactionBenefitViewModel SelectedBenefit { 
        get
        {
            return _selectedBenefit;
        } 
        set{
            if(value != null){
                SelectedBenefit = _selectedBenefit;
            }
        } 
    }

    public override void Init()
    {
        base.Init();

        Title = "Filter";

        FromDateFilter = DateTime.Now.AddMonths(Constants.TransactionsDefaultMonthsFrom);
        ToDateFilter = DateTime.Now;
    }

    public TransactionFilterViewModel(){
        TransactionBenefits = new List<TransactionBenefitViewModel>();
        GetBenefits();
    }

    private void GetBenefits(){
        Benefits = employeeService.GetBenefits(App.User.Account, 6);
        TransactionBenefitViewModel transactionBenefitViewModel = new TransactionBenefitViewModel();
        transactionBenefitViewModel.BenefitName = "All";
        transactionBenefitViewModel.IsSelected = true;
        transactionBenefitViewModel.BenefitSelected = null;
        TransactionBenefits.Add(transactionBenefitViewModel);

        foreach (Benefit item in Benefits){
            transactionBenefitViewModel = new TransactionBenefitViewModel();
            transactionBenefitViewModel.BenefitName = item.Name;
            transactionBenefitViewModel.IsSelected = false;
            transactionBenefitViewModel.BenefitSelected = item;
            TransactionBenefits.Add(transactionBenefitViewModel);

        }

    }

}
public class TransactionBenefitViewModel{
    public Benefit BenefitSelected { get; set; }
    public bool IsSelected { get; set; }
    public string BenefitName { get; set; }
}

XAML:

<?xml version="1.0" encoding="UTF-8"?>
<p:BasePage Title="{Binding Title}" 
        x:TypeArguments="vm:TransactionFilterViewModel" 
        xmlns:p="clr-    namespace:MMSG.Mobile.ContentPages;assembly=MMSG.Mobile;"
        xmlns:converters="clr-namespace:MMSG.Mobile.Converters" 
        xmlns:vm="clr-namespace:MMSG.Mobile.ViewModels;assembly=MMSG.Mobile;" 
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="MMSG.Mobile.ContentPages.TransactionFilterPage" 
        xmlns:controls="clr-namespace:MMSG.Mobile.CustomControls"
        xmlns:effects="clr-namespace:MMSG.Mobile.Effects"
        xmlns:cells="clr-namespace:MMSG.Mobile.Views.Cells" 
        xmlns:repeater="clr-namespace:XamarinForms.Plugin.Repeater;assembly=MMSG.Mobile"
        xmlns:behaviors="clr-namespace:MMSG.Mobile.Behaviors">
<ContentView.Resources>
    <ResourceDictionary>
        <Color x:Key="primaryBackgroundColor">#EFEFF4</Color>
        <Color x:Key="whiteBackgroundColor">#FFFFFF</Color>
        <Color x:Key="ErrorColor">#e40039</Color>
        <Style x:Key="layoutTitle" TargetType="StackLayout">
            <Setter Property="Padding" Value="15,12.5">
            </Setter>
        </Style>
        <Style x:Key="layoutSpacingPrimary" TargetType="StackLayout">
            <Setter Property="Padding" Value="15">
            </Setter>
        </Style>
        <Style x:Key="labelTitle" TargetType="Label">
            <Setter Property="TextColor" Value="#6D6D72">
            </Setter>
            <Setter Property="Font" Value="13">
            </Setter>
            <Setter Property="HeightRequest" Value="15">
            </Setter>
            <Setter Property="VerticalTextAlignment" Value="Center">
            </Setter>
            <Setter Property="VerticalOptions" Value="FillAndExpand">
            </Setter>
        </Style>
        <Style x:Key="labelTitleBold" TargetType="Label">
            <Setter Property="TextColor" Value="#6D6D72">
            </Setter>
            <Setter Property="Font" Value="Bold,13">
            </Setter>
            <Setter Property="HeightRequest" Value="15">
            </Setter>
            <Setter Property="VerticalTextAlignment" Value="Center">
            </Setter>
            <Setter Property="VerticalOptions" Value="FillAndExpand">
            </Setter>
        </Style>
        <Style x:Key="separator" TargetType="BoxView">
            <Setter Property="HeightRequest" Value="1">
            </Setter>
            <Setter Property="HorizontalOptions" Value="FillAndExpand">
            </Setter>
            <Setter Property="BackgroundColor" Value="#bbbbbb">
            </Setter>
        </Style>
        <Style x:Key="layoutListItem" TargetType="StackLayout">
            <Setter Property="Padding" Value="15, 12">
            </Setter>
            <Setter Property="Orientation" Value="Horizontal">
            </Setter>
        </Style>
        <Style x:Key="labelStandard" TargetType="Label">
            <Setter Property="Font" Value="17">
            </Setter>
            <Setter Property="TextColor" Value="#030303">
            </Setter>
            <Setter Property="HeightRequest" Value="20">
            </Setter>
            <Setter Property="VerticalTextAlignment" Value="Center">
            </Setter>
            <Setter Property="HorizontalOptions" Value="FillAndExpand">
            </Setter>
        </Style>
        <Style x:Key="imgListItem" TargetType="Image">
            <Setter Property="HeightRequest" Value="16">
            </Setter>
            <Setter Property="HorizontalOptions" Value="End">
            </Setter>
            <Setter Property="VerticalOptions" Value="Center">
            </Setter>
        </Style>
        <Style x:Key="labelLink" TargetType="Label">
            <Setter Property="Font" Value="17">
            </Setter>
            <Setter Property="TextColor" Value="#0076FF">
            </Setter>
            <Setter Property="MinimumHeightRequest" Value="20">
            </Setter>
            <Setter Property="VerticalOptions" Value="Center">
            </Setter>
            <Setter Property="VerticalTextAlignment" Value="Center">
            </Setter>
        </Style>
        <Style x:Key="labelErrorSummary" TargetType="Label">
            <Setter Property="Font" Value="17">
            </Setter>
            <Setter Property="TextColor" Value="{StaticResource ErrorColor}">
            </Setter>
            <Setter Property="HeightRequest" Value="20">
            </Setter>
            <Setter Property="VerticalTextAlignment" Value="Center">
            </Setter>
            <Setter Property="HorizontalOptions" Value="FillAndExpand">
            </Setter>
            <Setter Property="Margin" Value="15,8">
            </Setter>
        </Style>
        <Style TargetType="StackLayout">
            <Setter Property="Spacing" Value="0">
            </Setter>
        </Style>
    </ResourceDictionary>
</ContentView.Resources>
<p:BasePage.Content BackgroundColor="#EFEFF4">
    <ScrollView>
    <StackLayout Orientation="Vertical" BackgroundColor="{StaticResource primaryBackgroundColor}">
        <BoxView Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}">
            <Label Text="TRANSACTION TYPE" Style="{StaticResource labelTitle}">
            </Label>
        </StackLayout>
        <BoxView Style="{StaticResource separator}"></BoxView>

        <StackLayout BackgroundColor="{StaticResource whiteBackgroundColor}">
        <StackLayout Orientation="Vertical" Margin="15,0,0,0" > 
            <StackLayout Style="{StaticResource layoutListItem}">
                <Label Text="tttt" HorizontalOptions="FillAndExpand" />
                <Image Source="checkmark.png" HorizontalOptions="End" />
            </StackLayout>
            <BoxView Style="{StaticResource separator}"></BoxView>
        </StackLayout>
        </StackLayout>
        <StackLayout BackgroundColor="{StaticResource whiteBackgroundColor}">
        <StackLayout Orientation="Vertical" Margin="15,0,0,0" > 
            <StackLayout Style="{StaticResource layoutListItem}">
                <Label Text="tttt" HorizontalOptions="FillAndExpand" />
                <Image Source="checkmark.png" HorizontalOptions="End" />
            </StackLayout>
            <BoxView Style="{StaticResource separator}"></BoxView>
        </StackLayout>
        </StackLayout>
        <StackLayout BackgroundColor="{StaticResource whiteBackgroundColor}">
        <StackLayout Orientation="Vertical" Margin="15,0,0,0" > 
            <StackLayout Style="{StaticResource layoutListItem}">
                <Label Text="tttt" HorizontalOptions="FillAndExpand" />
                <Image Source="checkmark.png" HorizontalOptions="End" />
            </StackLayout>
        </StackLayout>
        </StackLayout>

        <BoxView Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}">
            <Label Text="BENEFIT TYPE" Style="{StaticResource labelTitle}">
            </Label>
        </StackLayout>
        <BoxView Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Vertical" BackgroundColor="#FFFFFF">
            <StackLayout Style="{StaticResource layoutListItem}">
                <Picker ItemsSource="{Binding TransactionBenefits}" ItemDisplayBinding="{Binding BenefitName}">
                    <Picker.Effects>
                        <effects:EntryNoBorderEffect />
                    </Picker.Effects>
                </Picker>
                <Image Source="arrow_list.png" Style="{StaticResource imgListItem}">
                </Image>
            </StackLayout>
        </StackLayout>

        <BoxView Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}">
            <Label Text="DATE RANGE" Style="{StaticResource labelTitle}">
            </Label>
        </StackLayout>
        <BoxView Style="{StaticResource separator}"></BoxView>

        <StackLayout BackgroundColor="{StaticResource whiteBackgroundColor}">
            <StackLayout Orientation="Vertical" Margin="15,0,0,0"> 
                <StackLayout Style="{StaticResource layoutListItem}">
                    <Label Text="From" HorizontalOptions="FillAndExpand" />
                    <DatePicker Date="{Binding FromDateFilter}" TextColor="#777777" VerticalOptions="CenterAndExpand" HorizontalOptions="End">
                        <DatePicker.Format>dd-MMMM-yyyy</DatePicker.Format>
                        <DatePicker.Effects>
                            <effects:EntryNoBorderEffect />
                        </DatePicker.Effects>
                    </DatePicker>
                </StackLayout>
                <BoxView Style="{StaticResource separator}"></BoxView>
            </StackLayout>
            <StackLayout Orientation="Vertical" Margin="15,0,0,0"> 
                <StackLayout Style="{StaticResource layoutListItem}">
                    <Label Text="To" HorizontalOptions="FillAndExpand" />
                    <DatePicker Date="{Binding ToDateFilter}" TextColor="#777777" VerticalOptions="CenterAndExpand" HorizontalOptions="End">
                        <DatePicker.Format>dd-MMMM-yyyy</DatePicker.Format>
                        <DatePicker.Effects>
                            <effects:EntryNoBorderEffect />
                        </DatePicker.Effects>
                    </DatePicker>
                </StackLayout>
            </StackLayout>
        </StackLayout>
        <BoxView Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Vertical" Style="{StaticResource layoutSpacingPrimary}">
            <Button Text="Apply" BackgroundColor="#007AFF" TextColor="White"  />
            <Button Text="Clear Filters"  />
        </StackLayout>
    </StackLayout>
</ScrollView>
</p:BasePage.Content>

My view model is TransactionFilterViewModel which is bound to the XAML view TransactionFilterPage. Could you please let me know why am I not able to bind the picker

None of your properties appear to trigger the PropertyChanged event... — Tom

Jason Jason · Accepted Answer · 2018-11-21T15:50:10

first, TransactionBenefits needs to be a public property

public class BenefitsViewModel{
    public List<TransactionBenefitViewModel> TransactionBenefits  { get; set; }

then in your XAML, ItemsSource is the IEnumerable that populates the picker, while ItemDisplayBinding is the property to display in the picker UI

<Picker ItemsSource="{Binding TransactionBenefits}" ItemDisplayBinding="{Binding BenefitName}">

Ref: Picker

How to dynamically bind the List<Object> to picker in Xamarin forms

1 Answers