MVVM In Xamarin.Forms Application For Android And UWP

Model–View–View-Model (MVVM) is a software architectural pattern. An MVVM application has three layers,

• The Model provides underlying data, sometimes through files or web access.
• The View is the user interface or presentation layer, generally implemented in XAML.
• The ViewModel connects the Model and the View.

More information is available at MVVM.

Reading this article, you will learn how to use MVVM architecture in Xamarin.Forms application for Android and Universal Windows Platform with XAML and Visual C#, in cross-platform application development.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a free trial software available online).
3. Using Visual Studio 2017 Installer, enable the feature of Mobile development with .NET.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2017 RC and go to Start -> New Project-> select Cross-Platform (under Visual C# -> Cross Platform App -> Give a suitable name for your App ( Ex - XamFormMVVM) ->OK.

Step 2

Select the Cross Platform template as Blank APP ->Set UI Technology as Forms and Sharing as PCL. Afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.

 

Step 3

Next, we can implement the MVVM to our project. For adding Model, right click the XamFormMVVM (Portable), Add New Folder named as Model, and add a C# class (Book.cs).

Add the following code to Book.cs.

public class Book {
    public string BTitle {
        get;
        set;
    }
    public string BAuth {
        get;
        set;
    }
}

Right click the XamFormMVVM (Portable), add New Folder named Service, and add a C# class (BSer.cs).

Add the following namespace and code to BSer.cs.

using XamFormMVVM.Model;
public class BSer {
    public List < Book > GetBooks() {
        var list = new List < Book > {
            new Book {
                BTitle = "The Art of War",
                    BAuth = " by Sun Tzu"
            },
            new Book {
                BTitle = "The Four Agreements",
                    BAuth = " by Miguel Ruiz4"
            },
            new Book {
                BTitle = "7 Habits of Highly Effective People",
                    BAuth = " by Stephen R. Covey"
            },
            new Book {
                BTitle = "How to Win Friends & Influence Peopler",
                    BAuth = " by Dale Carnegie"
            },
            new Book {
                BTitle = "Think and Grow Rich",
                    BAuth = " by Napoleon Hill"
            },
            new Book {
                BTitle = "Awaken the Giant",
                    BAuth = " by Anthony Robbins "
            },
            new Book {
                BTitle = "The Magic of Thinking Big",
                    BAuth = " by David J. Schwartz"
            }
        };
        return list;
    }

For adding ViewModel, right click the XamFormMVVM (Portable), Add new folder named ViewModel, and add a C# class (BViewModel.cs).

Add the following namespace and code to BViewModel.cs.

using System.ComponentModel;
using XamFormMVVM.Model;
using XamFormMVVM.Service;
using System.Runtime.CompilerServices;
public class BViewModel: INotifyPropertyChanged {
        private List < Book > _bookList;
        public List < Book > BookList {
            get {
                return _bookList;
            }
            set {
                _bookList = value;
                OnPropertyChanged();
            }
        }
        public BViewModel() {
            var BookSer = new BSer();
            BookList = BookSer.GetBooks();
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propName = null) {
            PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propName));
        }

For adding the View, right click the XamFormMVVM (Portable), add a new folder named  View, and move the MainPage.Xaml to the View folder. Then, add the following code to MainPage.Xaml.

<xmlns:VM="clr-namespace:XamFormMVVM.ViewModel;assembly=XamFormMVVM">
    <ContentPage.BindingContext>
        <VM:BViewModel/> </ContentPage.BindingContext>
    <StackLayout>
        <Label Text="Xamarin Form MVVM Demo in Android and UWP " VerticalOptions="Center" HorizontalOptions="Center" />
        <ListView ItemsSource="{Binding BookList}" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding BTitle}" />
                            <Label Text="{Binding BAuth}" /> </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Step 4

We will test Android and UWP. So, we can set the Multiple Startup Projects as XamFormMVVM.Droid and XamFormMVVM.UWP (Universal Windows).

Step 5

Change the Configuration Manager settings.

Go to Build -> Configuration Manager, uncheck the "Build" and "Deploy" options for iOS, and check these options for Droid and UWP.

 

Step 6

Deploy your app to Android Emulator and Local Machine (UWP). The output of the XamFormMVVM App is given below.

 

Summary

Now, you have successfully tested MVVM architecture in Xamarin.Forms cross-platform application, using Visual C# and Xamarin.