Showing posts with label MVVM. Show all posts

MVVM Databinding in Xamarin.Forms using Fresh MVVM


Introduction:

In this tutorial, we will learn how to perform MVVM approach in Xamarin.Forms using Fresh MVVM. MVVM approach is the best approach for Xamarin.Forms and WPF Applications. There are a lot of MVVM plugins or libraries like FreshMVVM, MVVMCross, Prism, etc. available to simplify MVVM implementations.

FreshMVVM:

FreshMVVM is designed to perform MVVM easy and simple with Xamarin.Forms Application. It is created Michael Ridland. It has certain rules to perform MVVM Databinding. You can find the plugin from GitHub and Nuget.

Rules for FreshMVVM:
It has simple rules to do MVVM. It is the first and important rule. – The Views (Pages) name should be ended with Page. – The ViewModel name should be ended with PageModel. – The namespace of both Page and Pagemodel should be name. – You don’t need to set BindingContext manually. The plugin will detect the View and ViewModel with its name. We will start coding with Fresh MVVM.

Coding Part:

Steps:
I have split this part into 3 steps as in the following.
  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms Application.
  3. Implementing Fresh MVVM.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.
Install-Package FreshMvvm -Version 2.2.3
Click Install to install this Plugin against your PCL Project or .NET standard Project.

Step 3: Implementing Fresh MVVM.

  1. Create your XAML page (view) with name ended up with “Page”.
  2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.
  3. The namespace of Page and PageModel should be same as shown in the above screenshots. – The Binding Properties and Command Properties are implemented same as like normal MVVM approach. – To indicate the binding properties changed by using RaisePropertyChanged instead of OnPropertyChanged event in Normal MVVM. – The following code is used to raise the property changed.
    RaisePropertyChanged("MainPageLabel");
  4. Set MainPage:
    To initialize the FreshMVVM Navigation you should set the MainPage with FreshMVVM Navigation Container with the following code. Open App.xaml.cs or App.cs and set MainPage. 
    var page = FreshPageModelResolver.ResolvePageModel<MainPageModel>();
    var basicNavContainer = new FreshNavigationContainer(page);
    MainPage = basicNavContainer;
    Navigation between Pages:
    FreshMVVM itself has Navigation methods to make navigation between the pages.
    1. Use PushPageModel for pushing the page in the navigation stack or goto next page instead of PushAsync in normal MVVM.
      await CoreMethods.PushPageModel();
      It is equivalent to the following
      Navigation.PushAsync(new SecondPage());
    2. Use PopPageModel for popping the page from navigation stack instead of PopAsync in normal MVVM.
      await CoreMethods.PopPageModel();
      It is equivalent to the following
      Navigation.PopAsync();
    3. Use PopToRoot to navigate from any page to root page instead of PopToAsync in normal MVVM.
      await CoreMethods.PopToRoot(animate:false);
      It is equivalent to the following
      Navigation.PopToRootAsync();

Full Code for MainPageModel:

You can find the code for MainPageModel below
namespace FreshMVVMSample
{
    public class MainPageModel : FreshBasePageModel
    {

        #region Default Override functions
        public override void Init(object initData)
        {
            base.Init(initData);
            MainPageLabel = "Welcome to Fresh Mvvm Tutorial!";
        }

        public override void ReverseInit(object returnedData)
        {
            base.ReverseInit(returnedData);
        }

        protected override void ViewIsAppearing(object sender, EventArgs e)
        {
            base.ViewIsAppearing(sender, e);
        }

        protected override void ViewIsDisappearing(object sender, EventArgs e)
        {
            base.ViewIsDisappearing(sender, e);
        }
        #endregion

        #region Commands
        public Command GotoSecondPageCommand
        {
            get
            {
                return new Command(async () =>
                {
                    await CoreMethods.PushPageModel<SecondPageModel>();
                });
            }
        }
        #endregion

        #region Properties
        string _mainPageLabel = string.Empty;
        public string MainPageLabel
        {
            get
            {
                return _mainPageLabel;
            }
            set
            {
                if (_mainPageLabel != value)
                {
                    _mainPageLabel = value;
                    RaisePropertyChanged(nameof(MainPageLabel));
                }
            }
        }
        #endregion

    }
}

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.