Xamarin.Forms: Data Binding (Android, iOS and Windows)

Step 1

First create a Xamarin.Forms project with Portable Class Library (PCL) as discussed in my previous article, Xamarin.Forms: Create Your First Xamarin App For iOS, Android, And Windows

Step 2

Important: This article is based on my previous article. So go through my previous article Xamarin.Forms: Create A Simple LoginUI before following this article.

In the previous article, I have created a Simple Login UI using the XAML Content Page with the input field, data-picker, time-picker, buttons, etc.

Step 3

From the previous article, we have the UI like:



Step 4

Now add a XAML page in PCL project. Right click on PCL project > Add > New item > Cross Platform > Forms Xaml Page and Click Add.





Step 5

In the MainPage.xaml.cs, update OnView function with the following code snippet.

Note

This is from the previous article. So please go through the previous article first.

publicasyncvoidOnView(object o, EventArgs e)
{
   //await DisplayAlert("Members", member[0].FirstName + "," + member[0].MiddleName + "," + member[0].LastName + "," + member[0].DateTime   , "Cancel");
   awaitNavigation.PushAsync(newTasksPage(member));
}

Step 6

In the TasksPage.xaml, let's add a ListView inside ContentPage.Content. Inside the ListView, we have ItemTemplate and DataTemplate. We use ViewCell to display our content.

Complete XAML code will be

<?xmlversion="1.0"encoding="utf-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Data_Entry.TasksPage">
    <ContentPage.Content>
        <StackLayoutPadding="30">
            <ListViewx:Name="MemberList"
            ItemTapped="OnSelected"
            ItemsSource="{Binding Members}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayoutPadding="5"Spacing="2">
                                    <StackLayoutOrientation="Horizontal">
                                        <LabelText="First Name: "FontSize="1/>
                                        <Labelx:Name="firstName"
                                            Text="{Binding FirstName}"
                                            FontSize="16"
                                            TextColor="Red"/>
                                    </StackLayout>
                                    <StackLayoutOrientation="Horizontal">
                                        <LabelText="Middle Name: "FontSize"1/>
                                        <Labelx:Name="middleName"
                                        Text="{Binding MiddleName}"
                                        FontSize="16"
                                        TextColor="Red"/>
                                    </StackLayout>
                                    <StackLayoutOrientation="Horizontal">
                                        <LabelText="Last Name: "FontSize="16/>
                                        <Labelx:Name="lastName"
                                            Text="{Binding LastName}"
                                            FontSize="16"TextColor="Red"/>
                                    </StackLayout>
                                    <StackLayoutOrientation="Horizontal">
                                        <LabelText="DateTime: "FontSize="16"/>
                                        <Labelx:Name="dateTime"Text="{Binding                                             DateTime}"
                                            FontSize="16"
                                            TextColor="Red"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 7

In the code behind TasksPage.xaml.cs, update your code with this.

using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingXamarin.Forms;
namespaceData_Entry
{
    publicpartialclassTasksPage: ContentPage
    {
        publicList < Member > Members
        {
            get;
            set;
        }
        publicTasksPage(List < Member > members)
        {
            Members = members;
            BindingContext = this;
            InitializeComponent();
        }
        publicasyncvoidOnSelected(objectobj, ItemTappedEventArgsargs)
        {
            var member = args.ItemasMember;
            awaitDisplayAlert("You selected", member.FirstName + " " + member.MiddleName + " " + member.LastName, "OK");
        }
    }
}

Step 8

Run the application in your Android or Windows devices/emulators. When you save some records and then view them, then you will be navigated to the Tasks Page and see the following output.







Note

Since whole project has very high size, download the Portable Class Library (PCL) only from GitHub.