Xamarin Forms The MVVM Way

MVVM or Model View ViewModel is a design pattern introduced by Microsoft in 2005 for their WPF applications, this pattern separates the UI layer from the data and business logic.

In this pattern components are decoupled from each other enabling us to swap components without affecting each other, unit testing individual components etc

In this pattern one ViewModel can host multiple views which is the major differentiating factor with other patterns thus allowing us to share code

Let’s see how can we make use of the pattern in Xamarin.Forms so let us take the login form we created in former post here and wire it up with MVVM

So we will create a class which implements INotifyPropertyChanged and then create properties to bind to for our pre created XAML

let’s see the class

namespace Blogsapp

{

public class LoginViewModel1 : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

private String _Username ;

public String Username

{

get { return _Username; }

set

{

 _Username = value;

if (PropertyChanged != null)

 PropertyChanged(this, new PropertyChangedEventArgs("Username"));

}

}

private String _password ;

public String Password

{

get { return _password; }

set

{

 _password = value;

if (PropertyChanged != null)

 PropertyChanged(this, new PropertyChangedEventArgs("Password"));

Username = Password;

}

}

private Command login;

public ICommand Login

{

get

{

 login = login ?? new Command(DoLogin);

return login;

}

}

private void DoLogin()

{

 System.Diagnostics.Debug.WriteLine("login clicked");

}

}

}

So what have written here – we have just created Properties for our XAML to bind to like Username, Password we have also raise that the property has changed when ever the value is set. We have also created a property for our Login Button to bind to named Login which is an interface of type Window.Input and gave an implementation’s instance by Xamarin Command which would execute the task when the button is clicked

 

Now let’s Bind these properties from XAML and see

<?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="Blogsapp.samplepage2"

xmlns:Binder="clr-namespace:Blogsapp;assembly=Blogsapp;"

BackgroundColor="Gray">

 <ContentPage.Resources>

 <ResourceDictionary>

 <Binder:LoginViewModel1 x:Key="LoginViewModel" />

 </ResourceDictionary>

 </ContentPage.Resources>

 <ContentPage.Content>

 <StackLayout Spacing="20" Padding="20" BindingContext="{StaticResource LoginViewModel}"

VerticalOptions="Center">

 <Entry Placeholder="Username"

Text="{Binding Username }"

/>

 <Entry Placeholder="Password"

Text="{Binding Password }"

IsPassword="true"/>

 <Button Text="Login" TextColor="White"

Command="{Binding Login }"

BackgroundColor="Blue"/>

 </StackLayout>

 </ContentPage.Content>

</ContentPage>

Here we have given a namespace for our apps assembly here xmlns:Binder=“clr-namespace:Blogsapp;assembly=Blogsapp; now the resource section initializes the ViewModel and gives it an alias to be accessed from the XAML here

<ContentPage.Resources>

<ResourceDictionary>

<Binder:LoginViewModel1 x:Key=“LoginViewModel“ />

</ResourceDictionary>

</ContentPage.Resources>

then we have given the binding context for the StackLayout as the Login ViewModel we created and bound it with the views ( we will see more about the XAML here )

 

now let’s run the application and see :

so now we are able to create a simple UI and use binding to wire it up with ViewModel but that is just a single page we will need to navigate between pages for an application we will see that in the upcoming post

Tune in to see how to use webservices listviews and much more