Getting Started with Crosslight Dialog Presenter

Since the first release of Crosslight, developers have been enjoying the power of Crosslight presenters that allow them to present actions or display messages to the users, while sharing 100% of their business logic code in the ViewModel layer. Initially, there were only four presenters:

  • Action Presenter: Shows relevant actions to the users. (i.e., take picture, choose from library, etc)
  • Activity Presenter: Shows loading indicator for long-running process.
  • Message Presenter: Shows message in the form of a popup dialog.
  • Toast Presenter: Shows short-lived message in that dismisses automatically after a certain interval.

With the release of Crosslight 4, a new presenter is introduced: Dialog Presenter. This presenter allows developers to show any content, taking form of a modal popup-dialog.


Several features of the Dialog Presenter are:

  • Gorgeous, dialog-style popup appearance
  • Fully customizable content
  • Customizable dialog options, such as buttons, title, etc
  • Intuitive callback APIs
  • Automatic rotation support
  • Works consistently on iOS and Android

This post will help you get started with the new Dialog Presenter so you can take full advantage of its potential in Crosslight applications. The main idea is that we’re going to inject a new View inside the dialog presenter, and this can be ViewControllers or Fragments. Let’s try to create the above dialog presenter, complete with binding. We’re going to make a dialog presenter that shows different faces whenever the slider changes values to a certain value.

Preparing the Project

To start off, let’s use the Blank project created from Crosslight Project Wizard. Then, we’ll try to change the functionality of the “Update” button from the template to show our dialog presenter. I’ll call this project CrosslightDialogPresenter.

Preparing the Assets

In our dialog presenter, we’re going to use three different images that changes within certain value when the slider value is changed. Simply copy these three images to your CrosslightDialogPresenter.Core/Assets folder. You may need to create the Assets folder first.












After you’ve copied all these three images down to the folder, ensure that you have also set the images’ Build Action to Embedded Resource, as seen in the following image.




Preparing the ViewModel

After you’ve finished preparing the required assets, let’s create a new ViewModel class for the dialog presenter. I’m going to give it a name of RateViewModel. Let’s take a look at the class:

As you can see, in the constructor of the ViewModel, we prepare the byte array for the images, as well as initialized the RateValue to 90. Taking a closer look at the setter for the RateValue property, we changed the image if the RateValue given is between 0-39 (poor image), 40-79 (mediocre image), and 80-100 (good image).

Prepearing the Binding Provider

Now that the ViewModel is ready, we need to create the “glue” for the ViewModel to the View, which is the Binding Provider. Let’s create the RateBindingProvider class in the CrosslightDialogPresenter.Core, in the BindingProviders folder. Here are the contents of the RateBindingProvider class.

Taking a quick look at the class, we bind the RateValue property to the RateSlider as well as Image property to the RateImage control. Therefore, we need to prepare the ImageView with the ID of RateImage as well as a Slider with the ID of RateSlider. That’s our next direction.

Creating the iOS ViewController and Storyboard

Since you have the shared core ready (ViewModel and BindingProvider), all you have to do now is prepare the iOS view. To do this, we’ll need to prepare the ViewController and the Storyboard.

Preparing the ViewController

First, create a new ViewController called RateViewController, located under CrosslightDialogPresenter.iOS/ViewControllers folder.

The contents fo the RateViewController are as follows:

In the RateViewController, in addition to the usual ViewModel and BindingProvider definition, also notice we added a StoryboardAttribute on the top of the class. This tells the ViewController which Storyboard to use.

Preparing the Storyboard

Since we have defined the MainStoryboard as the storyboard that’s going to be used with the ViewController, let’s create that now. Create a new Storyboard called MainStoryboard, located under CrosslightDialogPresenter.iOS/Views folder. It is recommended to use Xcode Interface Builder instead of Xamarin Studio’s built-in iOS designer as it may break sometimes if you use a newer layouts such as StackView.


Add an ImageView with and a slider with the constraints you desire. There are several things to ensure, though. Ensure that the ViewController’s custom class is set to RateViewController and the storyboard ID is set to RateViewController, as shown in the following image.1446003145_full.png

As for the ImageView itself, I would recommend setting the View mode to Center, so the image looks proportional.


For the slider, set the range between 0 for Minimum and 100 for Maximum value.


In the header file, also make sure that you have set the correct outlets for the ImageView as well as the Slider.

  • ImageView: RateImage
  • Slider: RateSlider


Getting the Dialog Result of the Presenter

One last thing, you need to modify the ShowToast command from the SimpleViewModel to invoke our dialog presenter. To do this, open up SimpleViewModel in the CrosslightDialogPresenter.Core/ViewModels. Look at the following code.

I want you to take a closer look at the code above. The code above invokes the DialogPresenter with the RateViewModel that we’ve just created, then Crosslight smartly returns the entire ViewModel to the original caller’s ViewModel, so you can do basically whatever you want inside the Dialog Presenter’s ViewModel, then have the result straight back and process any way you want it.

The Dialog Presenter is also compatible with the modern async-await programming. If you wish to do so, simply use the following code.

Running the iOS project

Now you’re ready to run the iOS project.



Preparing the Android project

You’ve sucecssfully completed the iOS version, but how about Android? Since you have everything ready, all you need to do is just create the View for Android. To do this, let’s create a new Android AXML layout, called RateLayout. I’ll create this inside the CrosslightDialogPresenter.Android/Resources/layout folder. The contents of the AXML are as follows.

As you can see, it looks pretty much similar to iOS RateViewController that we’ve defined in the Storyboard, with the same IDs. Now that the Android layout file is ready, let’s create the Fragment. I’ll call this RateFragment and put it inside the CrosslightDialogPresenter.Android/Activities folder.


Same thing here, no fancy stuff, just simple Fragment with the ContentLayoutId set with the layout that we’ve just created. Let’s run the Android sample.1446008074_thumb.jpeg

Wrapping Up

I hope that this simple write-up can be a good starting point for those of you who are just trying out the Crosslight Dialog Presenter. If you wish to learn more about the Dialog Presenter, check out this link.

You can also find the link to the sample code in our Git repository here.

Till next post,
Nicholas Lie

Leave a Reply