Beer and Xamarin Forms: Intro to DataPages

In this lesson

  • Add DataPages and Themes Nuget Packages
  • Refactor to XAML for App class
  • Add DataSource
  • Add DataItemTemplate
08:03 C# 100


Tap on time to skip ahead


In our previous lesson, we explored how we can use a ViewModelLocator in conjunction with the XAML previewer to display data in real time as we build out our XAML. The ViewModel, or MVVM pattern, is a very popular pattern when developing Xamarin Forms or applications, or WPF applications, etc. However, you may find having to create a ViewModel, have that ViewModel load data from a web request, parse that data into some sort of class object, like brewery in this particular instance and then bind it to a list view might seem a lot of work. Like you have to jump through a lot of hoops.


Well, Xamarin has released a new feature called DataPages. DataPages allows us to streamline these processes in the case of very simple apps that just need to display data. I’m going to go to Git and I’m going to apply a Stash. In this Stash, I’ve done some preliminary work to get set up to use this new functionality. I’m going to reload my project. Now I’m going to do a clean. I’m just going to make sure everything builds before I go any further.


Let’s take a look at what I’ve done so far. If we take a look at the packages directory, we’ll see that I’ve installed the NuGet packages for Xamarin.Forms.Pages as well as these new Themes Packages. Themes are what you might assume they are. They are basically style packages that will adjust the appearance of our application. We have to install these packages, not only for our Forms PCL but also for our individual platforms. You’ll see that I’ve installed it for Android as well as for iOS.


Once you get those installed, the other thing you’ll want to do is in this particular case, I went from a pure C# implementation of our application class to now using a XAML class. This allows us to more easily use different resources as well as import in different themes here. I want to go ahead and turn off preview.


The last thing I had to do in terms of set up is go into our app delegate in iOS and make sure we have a hard reference to these theme resources. If we don’t do this, the compiler will strip out references to our Themes Nuget packages and crash because those assemblies were not included in the executable. We add these lines of code here in our app delegate as well as on Android on our MainActivity, we will also add those, which I forgot to do. I’ll just copy here, go after our Init function, like so, and now I think I need to change this to Android instead of iOS, and now we don’t have to worry about losing the references to those assemblies.


If we run our application, we will see that there’s not too much going on right now. We basically have just this one screen. I should also point out in our application class, the BrewsApp application class, I’m setting our MainPage to a new NavigationPage with its root child being our BreweriesPage that we’ve been working with. So, let’s make some things happen.


I’m going to open up the BreweriesPage XAML file and you’ll see that we’re no longer extending content page. If I also open up the code behind you’ll see that we’re actually extending a class called ListDataPage. You will also see that I’m importing another namespace for the Xamarin.Forms.Pages functionality.


One of the first things I want to do is specify where the data for this page is going to come from. What I’m going to use is what’s known as a DataSource. There are different types of DataSources. There’s DataSources for Azure as well as for JSON. In this particular case we’re going to use JSON. I’m going to create a JSON DataSource here. Oops. I’m just going to hold that open for a second. I also want to keep that open for a second. Then I’m going to cut and paste the URL to our JSON file. I’m going to do a build. It says its successful. Now we’re going to run the application and make sure we didn’t break anything. Ok, so far, so good. No runtime errors.


So now I need to specify how we want to render this data. I’m going to say “DefaultItemTemplate” much like you would with a list view. I’m going to specify a DataTemplate. Then I’m going to use a ViewCell. Then we are going to use a ListItemControl. And here we’re going to set up our bindings for our ListItemControl.


You may also notice that as I type in our bindings it’s a bit of a different syntax than what we normally do. We’re going to use a DataSource binding instead of just binding. I also want to specify the image source. Again, using DataSourceBinding instead of just a regular binding. I’m going to specify the image URL property, which matches our JSON. So we see the image URL property as well as our name property. Then, we’re going to specify the DataSource for this control and this time we’re actually going to use the regular binding keyword. Then, I’m going to specify HeightRequest of 70.


If we did everything right, now when I run it, we should see the list of breweries. And we don’t. We actually get a runtime error saying ListDataPage not found in our forms namespace. To fix that, what we need to do is add the namespace prefix to these tags. Now if we run, we should be in better shape. Or at least getting you there. And there you go! Now we have a list of breweries.


This is pretty neat in that we didn’t have to create a ViewModel class. We didn’t need to create some kind of service to download the JSON and parse it into models. In addition to this, if I actually click on any of these items, it automatically sets up to where I get a detail view for a particular brewery. So, as you can see, this could potentially really speed up your development process if you’re just doing prototypes or if your app is super simple.