How to bind DatePicker and Picker in Xamarin

Question

I am trying to register a user on my application using web API on Xamarin. Here is registration form in RegisterPage.xaml

<Entry Text="{Binding FirstName}" Placeholder="First Name"/>
<Entry Text="{Binding LastName}" Placeholder="Last Name"/>
<Entry Text="{Binding UserName}" Placeholder="Username"/>
<Entry Text="{Binding Email}" Placeholder="Email" />
<Entry Text="{Binding Password}" Placeholder="Password" IsPassword="True"/>
<Entry Text="{Binding ConfirmPassword}" Placeholder="Confirm Password" IsPassword="True"/>

<DatePicker x:Name="BirthDay" MinimumDate="1/1/1948" MaximumDate="12/31/2007"/>

<Label Text="Gender"/> 
<Picker x:Name="GenderPicker" SelectedIndexChanged="GenderPicker_OnSelectedIndexChanged"/>

<Label Text="User Role"/>
<Picker x:Name="RolePicker" SelectedIndexChanged="RolePicker_OnSelectedIndexChanged"/>


<Button Command="{Binding RegisterCommand}" Text="Register"/>
<Label Text="{Binding Message}" />

Here is my RegisterPage.xaml.cs file

public partial class RegisterPage : ContentPage
{
    public RegisterPage()
    {
        InitializeComponent();

        GenderPicker.Items.Add("Male");
        GenderPicker.Items.Add("Female");

        RolePicker.Items.Add("Admin");
        RolePicker.Items.Add("Participant");

    }

    private void GenderPicker_OnSelectedIndexChanged(object sender, EventArgs e)
    {
        var gender = GenderPicker.Items[GenderPicker.SelectedIndex];
    }

    private void RolePicker_OnSelectedIndexChanged(object sender, EventArgs e)
    {
        var role = RolePicker.Items[RolePicker.SelectedIndex];
    }

}

On submitting the registration form I am not receiving my values against DatePiker and Picker into the RegisterCommand

Here is my RegisterCommand , I am receiving other attributes but not from DatePiker and Picker

public ICommand RegisterCommand
    {
        get
        {
            return new Command(async () =>
            {
                var isSuccess = await _apiServices.RegisterAsync(FirstName,LastName,UserName,Email,Password,ConfirmPassword,BirthDate,Gender,UserRole);
                Message = isSuccess ? "Registered Successfully" : "Retry Later";
            });
        }
    }

you need to bind selecteditem of picker 1 to gender and selecteditem of picker2 to userrole — purplesoft

Dan Siegel Dan Siegel · Accepted Answer · 2017-05-28T00:31:53

Starting in Xamarin Forms 2.3.4 thy finally introduced Binding to the Picker. You only need to bind to the SelectedItem as shown below.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:PickerDemo" 
             x:Class="PickerDemo.PickerDemoPage">
    <ContentPage.BindingContext>
        <local:PickerDemoPageViewModel />
    </ContentPage.BindingContext>
    <StackLayout Padding="10,20">
        <!-- Picker with explicitly set values in XAML -->
        <Picker SelectedItem="{Binding SelectedItem}">
            <Picker.Items>
                <x:String>Item 1</x:String>
                <x:String>Item 2</x:String>
            </Picker.Items>
        </Picker>
        <Label Text="{Binding SelectedItem,StringFormat='You Selected: {0}'}" />

        <!-- Picker with Dynamically set values -->
        <Picker ItemsSource="{Binding SomeCollection}" SelectedItem="{Binding AnotherItem}" />
        <Label Text="{Binding AnotherItem,StringFormat='You picked: {0}'}" />

        <!-- Date Picker using a custom display format -->
        <DatePicker Date="{Binding SomeDate}" Format="MMMM dd, yyyy" />
        <Label Text="{Binding SomeDate,StringFormat='{0:dd MMMM, yyyy}'}" />
    </StackLayout>

</ContentPage>

How to bind DatePicker and Picker in Xamarin

1 Answers