Xamarin Forms MVVM

Command Binding

Take a moment to celebrate - things are moving along nicely.
The only thing left is the Button, and luckily MVVM allows you to treat Buttons very similarly to other elements like Labels - i.e. using bindings. For that, we will make use of the ICommand Property.

Simply put, one can set the value of an ICommand Property to be a function - hence, when that property is read, the function is returned.

Think of ICommands as a way to expose functions as a variable.

This allows us to bind a function to a button, just like the other elements were bound to their counterparts in the view-model.

Create an ICommand in the View-Model. {{< highlight js >}} public ICommand CalculateBMI { get { return new Command(() => { //CREATING OUR HUMAN OBJECT TO HOLD THE VALUES //NOTE THAT WE CAN MAKE MORE INTENSIVE USES OF THIS MODEL //IT’S JUST NOT OUR FOCUS FOR THIS ARTICLE Human LabRat = new Human(Name, Weight, Height);

        //UPDATING MESSAGE WITH THE BMI VALUE
        //TOSTRING() CONVERTS THE DOUBLE TO STRING TYPE
        //THE ARG FORMATS THE VALUE TO 2 DECIMAL PLACES
        Message = LabRat.Name + "'S BMI: " + LabRat.BMI.ToString("0.00");

        //RESETTING ALL ENTRY FIELDS
        Name = null;
        Weight = 0;
        Height = 0;
    });
}

} {{< /highlight >}}

Read more on Lambda Expressions if you are unfamiliar with the code syntax above.

Finally, update the view to bind the command to your button. {{< highlight xml >}} {{< /highlight >}}

Property Changes

Looks like everything is in place - the application should run, right?
Go ahead and try to run it, and click on the button.

Face that crash and burn like a proper developer.

That’s right, clicking on the button does nothing.

Here’s the deal.
Everything was coded and bound, but one problem remains. We cannot expect the application to spend all of its precious resources constantly surveying all the elements and variables in the codebase waiting for a change.

The solution - INotifyPropertyChanged.
This is a means to inform the application when something changes for it to taking necessary steps and refresh the elements on the screen.

Update the view-model code as below. {{< highlight js >}} public class BMIViewModel : INotifyPropertyChanged { //THIS ACTS AS A LISTENER WAITING FOR SOMETHING TO CHANGE VALUES public event PropertyChangedEventHandler PropertyChanged;

...

} {{< /highlight >}}

The PropertyChanged variable acts as an agent between the view and the view-model, keeping track of what values are changing.

• When PropertyChanged is null – it implies nothing has changed.
• Setting a value to PropertyChanged triggers an update the view.

So, our next step is to ensure that we update the PropertyChanged variable when something changes.

Create a method in the view-model, designed to update the PropertyChanged variable when it is called. {{< highlight js >}} public class BMIViewModel : INotifyPropertyChanged { …

//THIS FUNCTION TAKES A STRING AS PARAMETER
//THE STRING WOULD BE THE NAME OF THE VARIABLE THAT CHANGED
public void OnPropertyChanged(string propertyName)
{
    //CHECKING IF PROPERTYCHANGED IS NULL - WHICH WOULD MEAN NOTHING CHANGED
    if (PropertyChanged != null)
    {
        //NOPE. SOMETHING CHANGED.
        //TIME TO CALL PROPERTYCHANGED WITH ITS ARGUMENTS
        //ARG1: 'THIS' - MEANS SOMETHING CHANGED IN THIS VIEWMODEL RIGHT HERE.
        //ARG2: IT USES PROPERTYNAME TO FETCH THE ACTUAL PROPERTY THAT CHANGED.
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

} {{< /highlight >}}

Lastly, update the data variables (the ones that populate the screen) to call our method when a change happens. {{< highlight js >}} public class BMIViewModel : INotifyPropertyChanged { …

//VARIABLE: NAME
private string _name;
public string Name
{
    get { return _name; }
    set
    {
        _name = value;
        
        //NOTICE HOW THE NAME ("NAME") OF THE VARIABLE IS BEING PASSED
        //IT WILL LATER BE PASSED AS ARGUMENT TO PROPERTYCHANGED
        //HELPING IT IDENTIFY THAT THIS VARIABLE (NAME) IS THE ONE THAT CHANGED
        OnPropertyChanged("Name");
    }
}

//VARIABLE: DISPLAYS MESSAGE(BMI)
private string _message;
public string Message
{
    get { return _message; }
    set
    {
        _message = value;
        
        //SAME PRINCIPLE AS ABOVE
        //HERE THE NAME OF THE VARIABLE IS "MESSAGE"
        OnPropertyChanged("Message");
    }
}

} {{< /highlight >}}

It’s a wrap (or a taco)

Give the application a spin.

This was an introduction to MVVM and how you can easily set it up to decouple your logic from your front-end. There is more to it, but for now, grab a taco and congratulate yourself for a job well done.

Credits

Cover Image: Photo by Nathan Da Silva on Unsplash