When developing a mobile application that data is dynamic, it would be more meaningful to place a specific design instead of showing a blank page. There may be a misunderstanding that an error has occurred or the application is not working. There are three main situations in which users of your application could see an empty screen or an empty state:
- First-time usage when there is no data we can show to a new user
- Clear state (empty inbox, list with no items)
- Error (no internet connection)
For such situations, the user must know why are they seeing it. In this article, we will show a specific empty view design on a simple page with a ListView, in Xamarin.Forms application.
First, let’s create a class for birds to use as a model:
Then create our ContentPage where we will display our ListView:
In out ContentPage, we have created a control called EmptyView to use in case of no data. We used the IsEmpty property to change the visibility of EmptyView and ListView according to the empty data list. We used the Converter class to make the ListView invisible when EmptyView is visible. If we look at the Converter class:
We implemented the IValueConverter interface here. Classes that implement
IValueConverter are called value converters, but they are also often referred to as binding converters or binding value converters.
The Convert method is called when data moves from the source to the target in OneWay or TwoWay bindings. The value parameter is the object or value from the data-binding source. The method must return a value of the type of the data-binding target. The method shown here casts the value parameter to an int and then compares it with 0 for a bool return value.
The ConvertBack method is called when data moves from the target to the source in TwoWay or OneWayToSource bindings. ConvertBack performs the opposite conversion: It assumes the value parameter is a bool from the target, and converts it to an int return value for the source.
In our Converter class, the inverse of the incoming boolean value is returned.
For our EmptyView we created a ContentView and use it on our page. We have bind the ViewModel we have defined below.
When data on the page changes and there is no data at all, a design that informs the user is not a blank page anymore.
Download full GitHub project in here.