Beer and Xamarin.Forms – Design Time Data and XAML

In this lesson

  • Create PCL for Models
  • Bind ListView to Static Resource


Tap on time to skip ahead


One of the cool things with the XAML Previewer is that we can not only create a list view and specify its template, but we can hook it up to a static class that will give us design time data. I have this already set up in my Git repo. I’m going to go ahead and reset. I’m just using SourceTree for this. Now I’m going to apply this stash.


If we go back to our project, we’ll have to first reload it, it’s going to update our resources and what not. If I reopen the XAML file, we will see- it might take a second for the preview to load up- we’ll see a list of our breweries. We’ve got two here; one called 4Hands with it’s logo, another one called Civil Life with this logo. We’ll find that this isn’t too hard to set up.


If we take a look at our XAML, we’ll see that we have our traditional ListView and we’re specifying a data template view cell where it’s just a simple stack layout where I have an image to the left and a label to the right. As you would bind with anything, I can specify the text should be bound to the name of our brewery.


Our breweries are represented in the STLBrews.Models PCL. I like to break out my models in a separate PCL in case I want to share it with a web service or something. You’ll see here we have our properties name, logo URL. I’m specifying the logo URLs here inside my DesignData property getter. I’m able to reference this file because I import this namespace into my XAML up here. You can see I’m creating a namespace called data. It refers to STLBrews.Models. It is in the STLBrews.Models DLL or assemble. Then for my item source, I can reference this design data property in my brewery class via this static binding.


Let’s kind of play with this a bit more, shall we? I’d like to add a description to my brewery. We’re going to go to our brewery model. Set up a new prop. Say it’s a string. I’m going to say it’s a description. I’m going to go into our getter, I’m going to say Description = “Ales without borders.” And say, “Great place for session ales.” I’m going to fix my white space.


Now that I’ve added those properties, I’m going to recompile. Oops, I forgot a comma. I’m going to recompile my PCL. Something that you will also need to do is make sure that your projects have a reference to this model PCL here. Without this the preview functionality of the XAML Designer will not work. Now, if I go StackLayout.Orientation=Vertical. I can add our label there. Then, I can add another label and specify its Text=Binding Description. We’ll see that it immediately shows to the right.


I can then start tweaking my font. I want the top one to be bold. Then I think I want the description to be a bit smaller than our title. Then, you know, we’re noticing we have a significant amount of space between our title and the description so let’s close that up and specify our spacing to zero. Lastly, let’s set the vertical alignment to center. Now, we have a much better looking item for our list view.


As you can see having this almost instantaneous feedback as we craft our XAML really speeds up our development process when we make awesome apps.