ItemSource Binding on Custom Picker in Xamarin Forms

Question

I have a Custom Control, that consists of a Label and a Custom Picker. I need to bind the values to the ItemSource property in Xaml. This is what I have tried so far, but there is'nt any values showing in the picker. Edit 04/10/2017 : I have upload a sample project to github which has the custom control: https://github.com/libin85/BindablePicker
This is the CustomControl Xaml file

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:controls="clr-namespace:WoolQ.Core.Controls;assembly=WoolQ.Core" 
x:Class="WoolQ.Core.Controls.CustomLabelWithPicker">
<Grid x:Name="grid" VerticalOptions="Start">
    <Grid.RowDefinitions>
        <RowDefinition Height="35" />
        <RowDefinition Height="45" />
    </Grid.RowDefinitions>
    <controls:RoundedFrame OutlineColor="Red" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" />
    <Label x:Name="title" Text="" Grid.Row="0" Margin="5,5,5,0" Style="{StaticResource CustomConrtolLabelStyle}" />
    <controls:BorderlessPicker x:Name="pickerValue" Title="_" Grid.Row="1" Style="{StaticResource CustomConrtolPickerStyle}" ItemsSource="{Binding ItemSource}">
    </controls:BorderlessPicker>
</Grid>

And in the code behind I have:

public static readonly BindableProperty ItemSourceProperty = 
        BindableProperty.Create(nameof(ItemSource), typeof(List<string>), typeof(CustomLabelWithPicker), null);

    public List<string> ItemSource
    {
        get
        {
            return (List<string>)GetValue(ItemSourceProperty);
        }
        set
        {
            SetValue(ItemSourceProperty, value);
        }
    }

    protected override void OnPropertyChanged(string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);
        if (propertyName == nameof(ItemSource))
        {
            this.pickerValue.Items.Clear();
            if (ItemSource != null)
            {
                foreach (var item in ItemSource)
                {
                    this.pickerValue.Items.Add(item);
                }
            }
        }
    }

And finally in my View, I bind the Itemsource with a List like this.

<controls:CustomLabelWithPicker Grid.Row="1" Grid.Column="2" 
LabelText="Bin Codes" ItemSource="{Binding BinCodes}"/>

But I dont see any values binded. Appreciate your help

perhaps the BindingContext for CustomLabelWithPicker is not set in the consumer view model, which is why it is unable to find the ItemsSource binding — Purusartha

Ziyad Godil Ziyad Godil · Accepted Answer · 2017-10-03T09:14:13

Try below code in your custom picker:

public static readonly BindableProperty ItemsSourceProperty =
            BindableProperty.Create("ItemsSource", typeof(IEnumerable), typeof(CustomPicker), null, BindingMode.TwoWay, null, OnItemsSourceChanged);

        public IList ItemsSource
        {
            get { return (IList)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var picker = (CustomPicker)bindable;
            picker.ItemsSource = (IList)newValue;
        }

ItemSource Binding on Custom Picker in Xamarin Forms

1 Answers