Htykuut

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

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