A few weeks ago, I got this request from Zaw Htut via Twitter, on how to do a Scroll Reveal using a ListView in Xamarin Forms. In this article, I will show you how to do it step by step.
Let’s understand the requirements
When looking at the GIF above, an interesting behavior can be observed, a News feed that at some point while scrolling stops showing items and shows the content behind.
We can identify that the view behind is a static view and is not part of the list, so we just have to put a view behind the List using a Grid.
The next thing we have to figure out is how we are going to show the view behind while scrolling, a solution could be by creating an empty cell with a transparent background and using a DataTemplate to switch between the NewsCell and the Empty Cell.
The last thing to figure out is at what point to add this empty cell to show the content behind. It looks like in the original GIF, it shows up after some new data content is loaded, so it makes sense to me to do it as a lazy load when it finishes loading an x number of items (while loading or refreshing data).
Let’s code
1. Create a Model that will represent the News
2. Create a News Cell
If you want to use a relative time format for displaying the dates you can check this article.
3. Create an Empty Cell
4. Create a Data Template Selector
To be able to switch between cells, you will need a DataTemplate selector, we are going to switch cells depending on whether the news is empty or not.
5. Implement Lazy Loading
To implement lazy loading in a ListView, we are going to use this ExtendedListView control, which has a LoadMoreCommand that gets executed when the list has been scrolled to the end.
(If you are interested into looking more details of this Lazy Loading implementation, I recommend you this article by Luis Pujlols).
6. Add the ViewModel
Result
That’s all for now!
You can check the full source code here.
Happy coding!
