Quick Look – Mocking in the UI with Xamarin Forms

Xamarin Forms is a handy UI framework. It provides a way to create a UI that works on both iOS and Android. But it has something else that is novel: it gives us an easy way to create a screen with mock data.

With Xamarin Forms, you can preview within Visual Studio (both Mac and Windows) without even having to run the application.

If you look at the XAML code, you can see the fake design-time data injected on the page itself. In the XAML, we inject a single “Larry Miller” fake record.

This provides us a handy preview within Visual Studio. We don’t even have to run the software, design-time data for an application. While this isn’t a replacement for good mocking of the UI data, it gives us the ability to see some of our data in a UI view quickly. It also enables a quicker UI build phase, so we can get a sense of how the layout will work without having to wire up actual data.

This approach could also be helpful for applications built by multiple people, and people with different skill sets. One developer could build the UI out (with design-time data), and another developer could wire it up to real data.

Once we get the UI looking the way we want, we can start writing the code behind the scenes to make it work. To do this, we are going to have to write the code behind for our XAML file. In this file, we will call our contact service to get the contacts.

After getting the code behind for our XAML file, we need just to write our service. And we have a running Contacts page.