Before starting the walkthrough, it is recommended that you have followed these walkthroughs in order:
It is also recommended that you have read through these conceptual topics in order to get a better understanding:
To use this walkthrough, you will need to use at least Crosslight 4 and above in order to achieve the desired result.
Let's get started.
Preparing the Project
To get started, create a new Blank project using the Crosslight Project Wizard and give it a name of CrosslightPresenters. In essence, we're going to create the following layout.
There will be 5 buttons, with outlets set for each, which will open up associated presenters.
Preparing the ViewModel
In this tutorial, we're going to display several presenters, therefore let's prepare the ViewModel first. Open up SimpleViewModel.cs inside CrosslightPresenters.Core/ViewModels and use the following code.
As we have 5 buttons, therefore we prepare 5 commands that will be triggered when the button is clicked. The ViewModel above shows the code on how to invoke each presenter. To learn more about each of these presenters, check out the links in the Prerequisite section above.
Modifying the BindingProvider
Open up the SimpleBindingProvider.cs inside CrosslightPresenters.Core/BindingProviders folder and use the following code.
Here, we simply bind each of the buttons to the corresponding commands specified in the ViewModel.
Preparing the Dialog Presenter
By default, all of these presenters are designed to work without any additional configurations. However, you can choose to display a very custom content of your choice by using the Dialog Presenter.
Since we're going to display a custom content with the Dialog Presenter, you'll need to use prepare the following files. First, create a new Crosslight ViewModel under CrosslightPresenters.Core/ViewModels and give it a name of RateViewModel. Use the following code.
Next, create a new folder named Assets under CrosslightPresenters.Core project.
Then copy the above three images over into the folder.
Ensure that the Build Actions for those three files are set to EmbeddedResource.
Next, create a new BindingProvider inside CrosslightPresenters.Core/BindingProviders folder and call it RateBindingProvider. Copy over the following code.
Here, we're binding the RateSlider's Value property to the RateValue property in the ViewModel in a two-way binding fashion, as well as binding the ImageView with id/outlet RateImage to the Image property in the ViewModel.
That should be all for now. Let's move on to the iOS project next.
Preparing the iOS Project
Create a new Crosslight ViewController for iPhone file inside CrosslightPresenters.iOS/ViewControllers folder and name it RateViewController. Use the following code.
This will be the ViewController that will be used for the Dialog Presenter view. Next, replace the MainStoryboard.storyboard file onto the Views folder inside CrosslightPresenters.iOS/Views folder. The storyboard file contains two ViewControllers, one for the MainViewController and RateViewController. Now, let's try to run the project. You should get the following result.
Preparing the Android Project
Similarly, for Android, create a new Fragment file called RateFragment inside the CrosslightPresenters.Android/Fragments folder. Use the following code.
As you can see, there's nothing inside this file except for the rate_layout.axml file. Create one inside the CrosslightPresenters.Android/Resources/layout folder.
In the layout, we only have an ImageView with the ID set to RateImage, and the SeekBar, with the ID set to RateSlider, which will be used for the dialog presenter content. Modify the main.axml file and use the following layout.
Save and run the project. You should get the following result.
Congratulations! You've just learned how to use Crosslight Presenters from the ViewModel and ready to use them in your Crosslight projects.
You can also find the resulting sample here: CrosslightPresenters.zip. Simply open this sample with Xamarin Studio or Visual Studio, restore the NuGet packages and run the project.