Beer and Xamarin.Forms: Displaying Items with ListView

In this lesson

  • Add ListView to Page
  • Add project references to new PCL project
  • Populate ListView
  • Handle item taps


Tap on time to skip ahead


Since our last video I created and new solution project called  STLBrews.Models. Inside this project, I just have a very simple class right now called Brewery with a name. Later in the series, we will flush this out to include things like address and phone number, but for now, to demonstrate how to use a ListView in Xamarin.Forms all we really need is name.


So if we then go back to our CodeBehind for the StlBrewsPage you’ll see that I’ve also created a list of breweries. Like so where I just have a handful of our local Saint Louis breweries: 4 Hands, Urban Chestnut, and Civil Life. And as I kind of alluded to a second ago, I want to create a ListView that displays these breweries. So I’m going to go back into my XAML. And I am going to replace our StackLayout. Actually, I want to keep our StackLayout because I would like to keep that padding for the moment. And I want to add a ListView. And I’m going to give it a name. And the name’s going to be “breweriesList.” And we’re going to leave it open for a second like that.


And then I’m also going to go back to our CodeBehind and we will see the intellisense is now telling us that there is no such thing as “testLabel” or “testButton.” So I’m going to go ahead and delete these two controls. And now what I’m going to do is say “breweriesList.ItemsSource.” And we’ll see that “ItemSource” is of type IEnumerable. So I can just set it to our breweries collection that we declared earlier. And now if we run our application will get this runtime error that says “Cannot load file or assembly StlBrews.Models.” This at first may seem strange because earlier I added a reference to our models project to our StlBrews PCL. What I didn’t do was add this reference also to our iOS and Android projects. And this is something that you have to do where if your PCL for Xamarin.Forms mark up or UI/business logic is referencing the package, your iOS and Android projects most likely also have to. Sorry, we don’t want packages we want references. Your iOS and Android projects will also have to reference this and this is just kind of a trait of how Xamarin.Forms apps get compiled.

So now if I run our application, we will see we have three entries in our ListView but they’re just kinda displaying the name space and class name. For our breweries. And instead we like them to display the actual name of the breweries. So how do we fix this? Or why is this happening?


Well this is happening because we haven’t specified our ItemTemplate yet so the first I’m going to do is specify “ItemTemplate” and then I’m going to specify the “DataTemplate” for our ItemTemplate and right now I’m gonna use a pre built TextCell. And I’m going to specify its text to a binding. And bindings are a way that we can auto set and get properties between models to our view versus having a manually write code to do this. So less code you write the less bugs you should have. And so I wanna bind it to our model’s name.


And so now if I’ve done everything correctly. When I build our app. We will see the names of our breweries. And the last thing I like to do is do something whenever a user taps one of these items. So I’m going to go into our CodeBehind. I’m going to say “breweries.ListItemSelected” And here again, I’m going to use a simple lambda expression. And we will see that we get the selected item. And it’s basically a generic object but it will represent one of our brewery models. So I’m going to say “DisplayAlert” Item selected. And we’re going to cast our selected item as a brewery. And I’m going display its name and have an okay button.


And so now if I run this anytime we tap on one of our breweries we should get an alert displaying to us the name of what was tapped. And we do. And one of the cool things about Xamarin.Forms is I can quickly set our STL Breweries Android project as our start up application. And then I can run our app on Android version and make sure everything looks right there as well. And we’ll see here we much like on our iOS version we have our 4 Hands, Urban Chestnut, and Civil Life items if I tap on them we get this nice display. So just in a few minutes were able to display a list of things and add interactivity with our particular ListView using Xamarin.Forms.