In this article, we learn about the Data Binding in Xamarin.Forms using Portable Class Library (PCL) that works on all platforms (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 Login UI 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:

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\wp_ss_20160529_0008.png

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.

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\2.png

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160619\1.JPG

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.

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:

Step 7:

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

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.

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\wp_ss_20160529_0006.png

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160619\wp_ss_20160619_0002.png

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160619\wp_ss_20160619_0004.png

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

That’s it.

Thanks, Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">