Beer and Forms – ViewModelLocator with XAML Previewer

In this lesson

  • What is a View Model?
  • Create ViewModelLocator
  • Toggle Design Mode


Tap on time to skip ahead


In our previous video, we used Xamarin Studio’s new XAML Previewer tool in conjunction with Design Data to see our changes to our XAML in real time. To do this we basically bound our ListView to a static property on our brewery class. This works really good at the design stage of our XAML development. However, this doesn’t really, truly represent how we want to arrange our code in a more real world production sense. In this video, we’re going to refactor our code to better mirror good practices.


One of the things that we really like to do with Forms applications is use what’s known as a View Model pattern. A View Model is basically a simple class, which I’ve, in between videos, have already created this BreweriesViewModels class. As you can see it’s just a very simple class that has an observable collection of items and each item is going to be a brewery.


As we build out our application we’ll be adding more things to our View Model like commands for when list item is tapped, or a button is tapped or any sort of business logic that might need to interact with a service to get these items from a web service and populate our collection. We can think of View Models as an abstract layer to hold all of our business logic in state. We basically take our views and bind them to the ViewModels. As you’ll see here in a second.


As I mentioned, I’ve created this BreweriesViewModel class. Something else that I’ve added between videos is this static class called ViewModelLocator. Basically this is just going to be a repository for all our different View Models for all of our screens and what not. As you can see it’s real simple. I have a static field for breweries, VM, and I instantiate it in the private static constructor.


Let’s go back to our XAML and let’s make a few updates to it so we can connect to this much better code. One of the things you will also want to double check is to make sure you have a reference to your View Models. I always like to breakout my View Models in a separate PCL incase I want to reuse them for a different project, like an OSX project or a WPF project.


I’m going to change one of our namespaces away from data. I’m going to convert it to VMS for View Model. You can see on the right that we’ve broken Designer already. I’m going to change this to View Models instead of models. We need to add one more element here. I can never quite remember the syntax so I cheated and put it in TextMate. Basically what we want to do is say, “This view’s binding context is represented by the breweries VM property of our ViewModelLocator static class,” hence the keyword static here. The binding context is basically a place where you can insert anything that can be bound too.


Now that we have this, if I go back to my ListView, I can change my item source away from this static declaration to a more traditional binding declaration like so. I can say, “Binding Items,” and hit save. If you don’t necessarily see the updates to the right, you might want to double check and see if you’ve built your View Model’s PCL correctly. And now, when we come back, we can see our items like so.


This definitely gets our code closer to what we want to do in terms of good practices. Something that we’re going to add real quick is the ability to switch in and out of this design mode. I’m going to update our BreweriesViewModel constructor to take a property called isDesignMode. We’re going to set it to false by default. Then I’m going to add an if statement here, “if isDesignMode, then we want to do this.” Otherwise, we might want production code to run where we go to a web service and collect the items, etc. Now I’m going to go back to our breweries page and here, yet again, be sure to build. Now when I reopen our XAML, we’ll see nothing appears.


If I go back to our ViewModelLocator, I can create a very simple property that says, “isDesignMode,” set it to true and I can pass it here. This kind of gives us, as we build more and more view models, this gives us a nice central place to switch in and out of design mode. Now if I build and go back to our XAML, we’ll see we now have our data again.


This is how you can use the Xamarin Studio XAML Previewer with Design Data in a way that actually mirrors good practices when you build out the infrastructure to your application.

Additional Info

Register to get access to additional resources and info.