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.
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. 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.
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:
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