Click here to Skip to main content
14,976,321 members
Articles / Mobile Apps / Xamarin
Article
Posted 3 May 2016

Stats

18.8K views
6 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.20/5 (5 votes)
3 May 2016CPOL2 min read
Part 1 is about setting up Prism and Xamarin Forms

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Divikiran
Software Developer (Senior)
Australia Australia
I am a, hands-on, Microsoft C# Analyst Programmer using Xamarin, Azure, WPF and MVC as my preferred tools, also as Team Lead and Scrum Master. My experience include in analysis, object oriented design, development and implementation of client, server, web and windows based applications and enterprise mobile apps using latest Microsoft technologies such as MVC, WPF and Xamarin Forms.

I have worked with Microsoft technologies for over 10 years building software for various private sector companies, applying both technical knowledge and managerial expertise.

My preferred technology stack includes C#, Azure, WPF, MVC, Entity Framework, Xamarin and SQL Server and highly prefer working on various design patterns and architectures.

An integral part of my work is to provide my clients with a high standard of understandable technical documentation: I have written few articles listed few page down in this resume, designs, as well as User Guides.

Using Azure for over 1.5 year, migrating application to the cloud, fully managed continuous integration for all environments.

Comments and Discussions

 
QuestionBootstrap x PrismApplication Pin
raranibar1-Aug-16 12:07
Memberraranibar1-Aug-16 12:07 
AnswerRe: Bootstrap x PrismApplication Pin
Divikiran1-Aug-16 20:55
MemberDivikiran1-Aug-16 20:55 
GeneralNo more Bootstrapper Pin
Member 1204707220-May-16 5:21
MemberMember 1204707220-May-16 5:21 
QuestionCross platform Pin
Simon Marcinkowski5-May-16 0:00
MemberSimon Marcinkowski5-May-16 0:00 
AnswerRe: Cross platform Pin
Divikiran5-May-16 18:59
MemberDivikiran5-May-16 18:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.