Most mobile applications need to display data to the user, and often, you may have an existing database or cloud infrastructure that your application must communicate with. It’s already easy to display data on iOS and Android with Xamarin.Forms, and at Xamarin Evolve 2016 we announced new previews to further simplify what it takes to make building beautiful, cloud-connected mobile apps with Xamarin.Forms.

DataPages makes displaying data from a cloud data source even easier. Not only will Xamarin.Forms handle connecting and communicating with the data source, it also creates master-detail pages from that data automatically, without any additional configuration. In this blog post, you’ll learn how to use the Xamarin.Forms DataPages preview to quickly scaffold pages from existing cloud data or Json.

Introducing DataPages

Xamarin.Forms DataPages provides an API to quickly and easily build master-detail style applications from an existing data source. DataPages ships with prebuilt data sources for Json, Azure Easy Tables, and Azure Mobile Apps. Xamarin.Forms manages communication with these data sources for you and even creates master-detail pages from that data. DataPages ships with three prebuilt pages: ListDataPage (see sample below), DirectoryPage (a list with grouping enabled), and PersonDetailPage (a single data view customized for specific object types, like a contact entry). Today’s preview lets you visualize data, and we’ll be adding complete create-read-update-delete (CRUD) functionality soon.

To help ensure that your apps are not only incredibly functional, but also beautiful, we introduced a preview for Xamarin.Forms Themes at Xamarin Evolve that allows you to quickly theme your applications in a single a line of code. To make it as easy as possible to build beautiful mobile apps, we’ve shipped prebuilt Light and Dark themes, but you can easily make your own to fit your company’s branding.

Xamarin.Forms DataPages allow you to quickly and easily build master-detail style applications from existing cloud data sources.

Building Your First DataPages App

Let’s walk through the process of creating a mobile app for iOS and Android using Xamarin.Forms DataPages. DataPages are extremely easy to get started with, and require only four easy steps:

  1. Install NuGet packages.
  2. Select a theme.
  3. Add a DataPage.
  4. Configure a data source.

Install NuGet Packages

After creating a new Xamarin.Forms app, add a new Xaml ContentPage to the project where we’ll add our new DataPage. Next, install the following NuGet packages to both your Xamarin.Forms and application projects:

Note: Because DataPages is currently in preview, you may need to enable “Show pre-release packages” in Xamarin Studio or Visual Studio to install the required NuGets. This should also automatically update your Xamarin.Forms NuGet to 2.3.0-pre.

Select a Theme

To get started, you can use our prebuilt Light or Dark theme, but you can also create your own to reflect your app’s branding (colors, fonts, etc.).

Themes use Xamarin.Form’s ResourceDictionary to supply values to controls for theming. To universally style our app with the Light theme, define a custom XML namespace (xmlns:mytheme) that references the theme assembly you wish to apply and merge your theme into the app’s ResourceDictionary:

Add a DataPage

To pull everything together, we need to add a cloud data source to the project. First, add a new Xamarin.Forms XAML page. DataPages comes with several prebuilt pages (see above). To use the page, simply change the XAML of your page to the following:

This defines a custom XML namespace that references the Xamarin.Forms.Pages assembly. This allows us to take advantage of all of the prebuilt pages that work with Xamarin.Forms DataPages. Next, in the page’s codebehind, import the Xamarin.Forms.Pages namespace and update the base class for your page to be a ListDataPage. Finally, set the MainPage in the Application class to:

In the preview release, themes may not be able to load at runtime. A future release will resolve this issue, but in the meantime, simply add the following snippet to your AppDelegate‘s FinishedLaunching and MainActivity’s OnCreate methods.

Our application is now configured and ready to add a data source to populate the ListDataPage we just created.

Configure a Data Source

The DataPages preview contains support for the Json, Azure Mobile Apps, and Azure Easy Tables data sources. To add a data source, set the ListDataPage‘s DataSource property to one of the prebuilt data sources.

In the preview, we also need to specify a StyleClass to provide rendering hints to the data source. Now, our page is completely configured to use the Json data source and the Events predefined style class:

Next, run the app and you will see a beautifully themed master-detail mobile application:

Xamarin.Forms DataPages

Wrapping Up

Xamarin.Forms DataPages (currently in preview) allow you to quickly and easily build master-detail style applications from existing cloud data sources. DataPages supports Json, Azure Mobile Apps, and Azure Easy Tables data sources, and comes with three prebuilt pages for visualizing cloud data in master-detail format. Xamarin.Forms Themes allow you to beautifully style your application in just a few lines of code by supplying a theme implementation, such as our prebuilt Light and Dark themes. For more information about Xamarin.Forms DataPages, visit the Xamarin Developer Center.