How do I pass entry parameters to Xamarin MVVM viewmodel

Question

I was looking for the best way to pass entry parameters (username, password) to Xamarin MVVM viewmodel by clicking a button(in the view) with command parameters.

Sadyesaechao

Answer 1

This is an example of passing Username and Password in Xamarin MVVM pattern. It works fine:

1)Create a LoginViewModel which will contain your commands. Make sure the ViewModel implements INotifyPropertyChanged:

public class LoginViewModel:INotifyPropertyChanged
{
    private ObservableCollection<CredentialsModel> _listOfItems=new 
    ObservableCollection<CredentialsModel>();
    public ObservableCollection<CredentialsModel> ListOfItems
    {
        get { return _listOfItems; }
        set
        {
            if (_listOfItems != value)
            {
                _listOfItems = value;
                RaisePropertyChanged();
            }
        }
    }
    private string username = null;
    private string password = null;
    private string loginMessage = null;
    public string Username { get { return username; } set { username = 
    value; } }
    public string Password { get { return password; } set { password = 
    value; } }
    public string LoginMessage { get { return loginMessage; } set { 
    loginMessage = value; RaisePropertyChanged(); } }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged([CallerMemberName]string caller="")
    {
        if(PropertyChanged!=null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(caller));
        }
    }

    public ICommand LoginCommand
    {
        get;
        private set;
    }

    public LoginViewModel()
    {
        ListOfItems.Add(new CredentialsModel());
        LoginCommand = new Command((e) =>
        {
            var item = (e as CredentialsModel);
            //TODO: LOGIN TO YOUR SYSTEM
            loginMessage = string.Concat("Login successful for user: ", 
            item.Username);
        });
    }
 }

2) In your LoginView's markup, assign your ListView a name so that you can access the LoginCommand from theList Item

3)Bind the Button's Command property to the LoginCommand in your LoginView. Make sure to set its Command Source to the BindingContext used by the ListView which will point to the LoginViewModel. And bind the Button's CommandParameter to the current list item:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LoginView : ContentPage
{
    public LoginView()
    {
        InitializeComponent();
        BindingContext = new LoginViewModel();
    }

}


<?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="MyApp.View.LoginView">
    <ContentPage.Content>
    <StackLayout>
        <control:MenuView />
        <ListView x:Name="LoginList" ItemsSource="{Binding ListOfItems, 
           Mode=TwoWay}" SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Entry Placeholder="Enter user name" Text="
                              {Binding Username, Mode=TwoWay}" 
                              x:Name="Username"/>
                            <Entry Placeholder="Enter password" Text="
                              {Binding Password, Mode=TwoWay}"  
                               x:Name="Password" />
                            <Button Text="Login" 
                                    Command="{Binding 
                                    Path=BindingContext.LoginCommand, 
                                    Source={x:Reference LoginList}}"
                                    CommandParameter="{Binding}">
                            </Button>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Label Text="{Binding LoginMessage}"></Label>
     </StackLayout>
     </ContentPage.Content>
   </ContentPage>

Sadyesaechao

Answer 2

This repo might be helpful for you

https://github.com/deanilvincent/Xamarin-Forms-Simple-MVVM-Login

If you're new to MVVM in xamarin forms, this link might be helpful for you as well.

Basic Understanding How Data Binding and MVVM works in Xamarin Forms

Georgetown