Getting Started With Xamarin Forms MVVM Light

#if __IOS__  
// iOS-specific code  
#endif  
#if __ANDROID__  
// Android-specific code  
#endif  
#if Windows_App  
var path = filename;  
#else 

public class App: Application  
{  
    public App()  
    {  
        MainPage = new NavigationPage(GetMainPage());  
    }  
    private static ViewModelLocator _locator;  
    public static ViewModelLocator Locator  
    {  
        get  
        {  
            return _locator ? ? (_locator = new ViewModelLocator());  
        }  
    }  
    public static Page GetMainPage()  
    {  
        return new MainPage();  
    }  
    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  
    }  
}  

public class ViewModelLocator  
{  
    /// <summary>  
    /// Initializes a new instance of the ViewModelLocator class.  
    /// </summary>  
    public ViewModelLocator()  
    {  
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);  
        ////if (ViewModelBase.IsInDesignModeStatic)  
        ////{  
        //// // Create design time view services and models  
        //// SimpleIoc.Default.Register<IDataService, DesignDataService>();  
        ////}  
        ////else  
        ////{  
        //// // Create run time view services and models  
        //// SimpleIoc.Default.Register<IDataService, DataService>();  
        ////}  
        SimpleIoc.Default.Register < MainViewModel > ();  
    }  
    public MainViewModel Main  
    {  
        get  
        {  
            return ServiceLocator.Current.GetInstance < MainViewModel > ();  
        }  
    }  
    public static void Cleanup()  
    {  
        // TODO Clear the ViewModels  
    }  
}  

Suppose if you want to start with BaseVieModel. Create a BaseViewModel class. Make sure it inherits the public class BaseVieModel: ViewModelBase.

Now in ViewModelLocator Replace MainViewModel With "BaseVieModel". So that Your Page Name Should Be "BasePage.Xaml".

Now let's get back. So for now we have MainViewModel, ViewModelLocator registered with MainViewModel as a startup ViewModel.

So, by default your ViewModel implants INotifyProperty changed, so it makes sure when there is a change in your collection or properties it notifies the UI.

Now to our View MainPage.Xaml just add the following code:

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage  
    xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
      x:Class="XamarinMVVMLight.Views.MainPage">  
    <Button Text="{Binding ClickCountFormatted}"  
      Command="{Binding IncrementCommand}"  
      VerticalOptions="Center" />  
</ContentPage>  

Now go to MainViewModel

Add the following code:

public class MainViewModel: ViewModelBase  
{  
    public  
    const string ClickCountPropertyName = "ClickCount";  
    private int _clickCount;  
    /// <summary>  
    /// Initializes a new instance of the MainViewModel class.  
    /// </summary>  
    public MainViewModel()  
    {}  
    public int ClickCount  
    {  
        get  
        {  
            return _clickCount;  
        }  
        set  
        {  
            if (Set(() => ClickCount, ref _clickCount, value))  
            {  
                RaisePropertyChanged(() => ClickCountFormatted);  
            }  
        }  
    }  
    public string ClickCountFormatted  
    {  
        get  
        {  
            return string.Format("The button was clicked {0} time(s)", ClickCount);  
        }  
    }  
    private RelayCommand _incrementCommand;  
    /// <summary>  
    /// Gets the IncrementCommand.  
    /// </summary>  
    public RelayCommand IncrementCommand  
    {  
        get  
        {  
            return _incrementCommand ? ? (_incrementCommand = new RelayCommand(  
                () =>  
                {  
                    ClickCount++;  
                }));  
        }  
    }  
}  

So, whenever you tap on the button it will call IncrementCommand and increase the count. As our viewModel Implements INotifyProperty Changed Interface, it will bind the UI with Incremented Count Value.

Now go to Android Project, then MainActivity.cs page, and make sure the following code is there which calls PCL project at startup and respectively in all platforms.

protected override void OnCreate(Bundle bundle)  
{  
    base.OnCreate(bundle);  
    global::Xamarin.Forms.Forms.Init(this, bundle);  
    LoadApplication(new App());  
}  

IOS - AppDelegate.Cs

public override bool FinishedLaunching(UIApplication app, NSDictionary options)  
{  
    global::Xamarin.Forms.Forms.Init();  
    LoadApplication(new App());  
    return base.FinishedLaunching(app, options);  
}  

WindowsPhone - MainPage.Xaml.Cs Page

public MainPage()  
{  
    this.InitializeComponent();  
    LoadApplication(new App());  
}  

If you want to add Windows Phone 8.1 Or Windows 8.1 or UWP App Remove the Current windows project and go to PCL project, Properties, then change the Target Platform:

And then add the new Windows 8.1/Windows Phone 8.1/UWP project to the solution and reference of PCL Project as well as Xamarin Forms Nuget.

Now select your own project as a startup and run. Now we successfully created our first Xamarin Forms Project. Please comment below if you have any questions.

Read more articles on Xamarin: