During the past months, I have been learning and writing about Dynamic Data and how we can use it to handle our collections in a reactive way. In this article, I will show you a full sample of how to use the Reactive UI framework in Xamarin Forms by creating a ToDo List.
“ReactiveUI is a Framework that gives you the power to build reactive, testable, and composable UI code using the MVVM pattern.”.
Let’s start!
1. Install the ReactiveUI.XamForms NuGet package
2. Install the DynamicData NuGet package
We are going to use it to handle our ToDo list.
3. Install the Sextant.XamForms package
We are going to use it to handle the page navigation.
4. Create the structure of the TODO
- Create a HomePage -> HomePageViewModel, to handle the list of TODOs.
- Create an ItemPage -> ItemViewModel, to handle adding and editing items in the TODO list.
- Create a Model -> Item. (Represents our ToDo item)
- Create an ItemManager to handle our ToDo collection.
5. Add the following classes
ViewModelBase -> Base class for all ViewModels.
RxExceptionHandler -> Class to handle exceptions.
These classes were taken from this Sample project.
NavigationParameterConstants -> Class for navigation constants
6. Register Views, ViewModels and Services in the App.xaml.cs
7. Create the Item Model
It will have 3 main properties: Id, Title and a mutable IsCompleted property, which will indicate when the item has been completed.
8. Create the Item Manager
This manager will handle all the logic related to adding/removing/getting items.
9. Create the HomePage/ViewModel
In the UI we will have a simple CollectionView and an Add button.
In the HomeViewModel we will use the ItemManager to get the items, a DeleteCommand to remove elements, and an Add Command to Add/Edit an item, this command navigates to the ItemViewModel.
10. Create the ItemPage/ItemModel
A simple page with an entry and an add button.
This ViewModel will receive the ItemId passed from the HomeViewModel and the ItemManager will add or update that item. If no ItemId passed will create a new Item.
Result
You can find the full source code of the sample here.
Happy Reactive ToDo!