Xamarin.Forms MVVM Binding CommandParameter to Command

  • by
xamarin-forms-command-parameter-binding

In the previous two posts on Xamarin forms, we saw how to pass CommandParameter with TapGestureRecognizers and with Button click event. Today we will see an example how to pass CommandParameter to a binding command in MVVM Xamarin application. The app contains two buttons, one will add 1 and other will minus 1 to the source number.

DOWNLOAD EXAMPLE

Create your MainPage.xaml design like below:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamSample"
x:Class="XamSample.MainPage"
Title="Xamarin Commands">

<StackLayout Orientation="Vertical" Padding="5">

<Label x:Name="number" Text="{Binding number}" FontSize="Large" HorizontalOptions="Center"
VerticalOptions="Start" Margin="5" />

<Grid HorizontalOptions="FillAndExpand">
<Button x:Name="btnAdd" Text="+1" Command="{Binding btnClick}" CommandParameter="1" Grid.Column="0"
Grid.Row="0" Margin="2"/>

<Button x:Name="btnMinus" Text="-1" Command="{Binding btnClick}" CommandParameter="-1" Grid.Column="1"
Grid.Row="0" Margin="2"/>

</Grid>

</StackLayout>
</ContentPage>

As you can see from design, we are passing command parameter as 1 and -1 from the button. xamarin-forms-command-parameter-binding-example-01The Label will be updated from the View model according the button being clicked and its commandparameter value. Create a new folder with name ViewModels in your project. Now create a ViewModel class like below inside this folder:

ViewModels > VMCommands.cs:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace XamSample.ViewModels
{
public class VMCommands : INotifyPropertyChanged
{
private string _number { get; set; }
public string number
{
get => _number;
set
{
_number = value;
OnPropertyChanged();
}
}

public Command btnClick { get; set; }

public VMCommands()
{
number = "5";
btnClick = new Command<string>(ButtonClick);
}

public void ButtonClick(string value)
{
try
{

number = (int.Parse(number) + int.Parse(value)).ToString();

}
catch (Exception ex)
{

}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

Here we are creating a Command object and passing a string parameter to it. This will accept an action parameter, we are passing the method ButtonClick(). This function will update the number parameter as per as value being passed to it.

And edit the code-behind of our MainPage.xaml like below, to bind our ViewModel class to it.

MainPage.xaml.cs:

using Xamarin.Forms;
using XamSample.ViewModels;

namespace XamSample
{
public partial class MainPage : ContentPage
{
VMCommands vm;
public MainPage()
{
InitializeComponent();
vm = new VMCommands();
this.BindingContext = vm;
}
}
}

Now run your application.

xamarin-forms-command-parameter-binding-example-01

The number is added or subtracted 1 to it as per the button clicked using the CommandParameter being passed. Benefit of using this functionality over here is we created only one command for both the buttons. You can implemented this functionality in different forms in your Xamarin forms project.

You can download the source code for free using the below link:

DOWNLOAD EXAMPLE

Also see:

How to pass CommandParameter with TapGestureRecognizers?

ListView hide Scrollbars in Xamarin Forms

Button Press CommandParameter – Xamarin Forms

Xamarin forms SQLite DB – Perform CRUD operation.

Xamarin forms SkiaSharp – Creating different shapes

Creating SQLite Database in Xamarin forms

Xamarin forms Creating Custom Button control