We are going to see how to create a basic Xamarin Forms Project with ReactiveUi, step by step.

  1. We open Visual Studio and we create a new Project as seen in the following image:
  2. From the options that appear, we select Cross-Platform as the project type and we choose MobileApp as a template, we select the place where we want to save it and press Ok:
  3. Here we can select whether or not we want a new blank application or an already implemented Master Detail, (with a hamburger menu), the platforms for which we are going to develop and the code sharing strategy. In this case we have selected a blank application for all the platforms and library. NET Standard.
  4. Once we have created the solution, we will see that we have a shared project and another project for each one of the platforms that we have created:
  5. To make use of ReactiveUI in our applications we will need to install the library. For this, we use the Manage NuGet Packages for Solution option:
  6. We search for ReactiveUI.XamForms:
  7. We install it for all of our projects, both our shared project and each platform. Important, with ReactiveUI’s latest update, 8.0.0, the minimum version of Xamarin Forms is 2.5.1444934, so that, if when creating the project the version of this is less, we will need to update it before installing ReactiveUI:
  8. Now that we already have our application ready with it’s initial view, to use the MVVM pattern we will need to create our ViewModel:

 

Our inherited ViewModel from ReactiveObject, thereby we already have the NotifyPropertyChanged interface implemented and we will be able to use all the power that the binding offers us between the user interface and our ViewModel.
To keep it simple we have created a property in our ViewModel that will contain the number of Clicks that we will make in our interface and a ReactiveCommand that we will use to make the Binding to the button that we have in our interface. Thereby we will be adding with each Click that our user makes:

In our view, you can now see how we have a ReactiveContentPage and we pass it as an argument (ViewModel) MainPageViewModel. For this we declare the NameSpace that corresponds to ReactiveUI as you can see in the image and we already have almost everything we need.
The interface is just a StackLayout with a Label and a button to do the demonstration, but as you know, Xamarin Forms allows us to create rich interfaces in details with animations, effects or whatever we need:

  1. In the Code Behind of the view is where we will do the Bindings, so we indicate to the view that is your ViewModel. One of the advantages of doing this in this part is that if we change names to our properties in the ViewModel, Visual Studio will know what to do and will do the refactor. Moreover, we can make Converters directly from the Binding methods provided by ReactiveUI, so we will simplify our project.

In ReactiveUI we have three types of Binding, OneWayBind, Bind and BindCommand.

With OneWayBind we tell our control, in this case our Label Clicks, that its Text property will show the value that the Clicks property of our ViewModel has.

With Bind we have a TwoWay Binding type, that is, we show its value but we can also modify it if we change the value of our control. It is a type of Binding used for the data entries of the users, for example, the Entry.

  1. Finally, BindCommand, which we use to Bind our controls with a Command and allows us to execute the action in our ViewModel and, as in this case, change some property to update the number of Clicks and change our interface.

The result that we have is the following:

Platforms