Use of Xamarin Forms with Prism, Decoupled UI and Testing - Part 1

• Download source code - 18.3 MB
• Download code from Github

Introduction

After creating many apps using Xamarin, I have learned a lot and I would like to share what I think could be a better ways to start a Xamarin project.

There are many approaches to develop Xamarin Forms (XF) Apps, like using MVVMCross (my fav), MvvmLight and few others. I have opted to use Microsoft Prism just because it is very tested in WPF and Windows mobile world. It is just my personnel choice to use Prism.

Prism supports MVVM, Commanding, Messaging, event aggregators and much much more.

I would to thank Brian Lagunas, as I learned most of the Prism from his lectures.

Background

Below are the few I love to use while developing apps using Xamarin Forms:

1. MVVM pattern
2. XF Commands
3. Facade Pattern
4. Repository Patterns
5. Prism - IOC
6. UI using C#

Using the Code

I like to explain in as few words as possible, so I'll try to give more bullet points and code:

• Obviously, create a Xamarin default project.
• Install Nuget package like Prism, Prism.Forms, Prism.Unity.Forms.
• I love to work on C# even on Xamarin forms page UIs. Add a Home page under the Views Folder. It is important that we have to name our pages folder as Views as Prism tries to look for pages in this folder
• AutowireViewModelProperty is set to true, which means we are telling page to pick viewmodels automatically and set its binding context to the same viewmodel.
  C#

  public class Home : ContentPage
  {
      public Home()
      {
          SetValue(ViewModelLocator.AutowireViewModelProperty, true);
  
          var label = new Label { Text = "Hello ContentPage" };
          label.SetBinding<HomeViewModel>(Label.TextProperty, v => v.Name);
          Content = new StackLayout
          {
              Children = {
                  label
              }
          };
      }
  }
  

• Add a view model class under ViewModels folder, name it as pagename append with word ViewModel to it. Same funda it is important to name folder as ViewModels.
  • Example, if Page is named as HomePage, name your ViewModel as HomePageViewModel
• As you can see, HomeViewModel is inheriting from BindableBase. It helps properties to call INotifyableProperty, nothing else.
  C#

  public class HomeViewModel : BindableBase
  {
      private string _name = "Divikiran Ravela";
  
      public string Name
      {
          get { return _name; }
          set { SetProperty(ref _name, value); }
      }
  
      public HomeViewModel()
      {
  
      }
  }
  

• Create a common folder and add a class file and call it Bootstrapper, below shows the simplest forms:
  C++

  public class Bootstrapper : UnityBootstrapper
  {
      protected override Page CreateMainPage()
      {
          return Container.Resolve<Home>();
      }
  
      protected override void RegisterTypes()
      {
          Container.RegisterType<HomeViewModel>();
      }
  }
  

• Now go to App.cs and add code as shown below, as you can see our Bootstrapper class is instantiated and app is passed as parameter into Run method. This will trigger CreateMainPage and calls first page:
  C#

      public Bootstrapper Bootstrapper { get; set; }
      public App()
      {
          // The root page of your application
          Bootstrapper = new Bootstrapper();
          Bootstrapper.Run(this);
      }
  
      protected override void OnStart()
      {
          // Handle when your app starts
      }
  
      protected override void OnSleep()
      {
          // Handle when your app sleeps
      }
  
      protected override void OnResume()
      {
          // Handle when your app resumes
      }
  }
  

Please find the attached code to see the app running.

For any clarifications, please free to post any questions. I'll try to answer.

Next, in part 2, I'll try to explain decoupled UI using C# and Facade patterns

The code is also available at https://github.com/divikiran/XamarinWithPrism.