Xamarin Detecting Enter Key MVVM

Question

How can I detect when the enter key (or any other key) is pressed using a MVVM approach. I'm new to xamarin so I hope I'm asking the right question. My thought would be to add a command to the password Entry. Would that be the right approach? I could add a Completed Event to the back end code but how can I link that to my view model?

Here is my XAML Code

<?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:newApp"
             x:Class="newApp.MainPage">

    <ContentPage.Content>

        <StackLayout Padding="30" Spacing="10" VerticalOptions="Center">

            <Image Source="logo.png" />

            <Entry Text="{Binding Username}" Placeholder="Username"  />

            <Entry Text="{Binding Password}" IsPassword="True" Placeholder="Password" />

            <Label Text="{Binding DisplayMessage}"/>

            <Button Text="Log In" Command="{Binding LogInCommand}"  />

        </StackLayout>

    </ContentPage.Content>
</ContentPage>

Here is the Back End Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

    namespace newApp
    {
      public partial class MainPage : ContentPage
      {
          public MainPage()
          {
              InitializeComponent();
              BindingContext = new LoginViewModel();
          }
      }
    }

And Here is my ViewModel

namespace newApp
{
    class LoginViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        string username, password;
        Boolean bol;

        void OnPropertyChanged([CallerMemberName] string name = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        public string Password
        {
            get { return password; }
            set
            {
                password = value;
                OnPropertyChanged();
            }
        }

        public string Username
        {
            get { return username; }
            set
            {
                username = value;
                OnPropertyChanged();

                OnPropertyChanged(nameof(DisplayMessage));
            }
        }

        public string DisplayMessage
        {
            get
            {
                if (username != ""){return $"This is your {Username}";}
                else return "";
            }
        }


        void Login()
        {
            if (username == "")
                bol = false;

        }
    }
}

Answer 1

The short answer is: you can't. The Completed event is just that: an event. Because of the way how events work, they are not suitable for the MVVM pattern.

There is a couple of ways to go about this. First, you could catch the event in your code-behind and then trigger code in your view model that is in your BindingContext property. Although you take a little stray from the MVVM pattern, this is a way around this.

The other option is to create your own inheritance of the control and implement a new property that does take a Command. You can then loop the event internally to the Command.

But probably the easiest solution to this is create a Behavior that turns your event into a Command. To create a reusable Behavior that turns any event on it to a Command, implement it like this (full implementation can be found in the link below):

public class EventToCommandBehavior : BehaviorBase<View>
{
  public static readonly BindableProperty EventNameProperty =
    BindableProperty.Create ("EventName", typeof(string), typeof(EventToCommandBehavior), null, propertyChanged: OnEventNameChanged);
  public static readonly BindableProperty CommandProperty =
    BindableProperty.Create ("Command", typeof(ICommand), typeof(EventToCommandBehavior), null);
  public static readonly BindableProperty CommandParameterProperty =
    BindableProperty.Create ("CommandParameter", typeof(object), typeof(EventToCommandBehavior), null);
  public static readonly BindableProperty InputConverterProperty =
    BindableProperty.Create ("Converter", typeof(IValueConverter), typeof(EventToCommandBehavior), null);

  public string EventName { ... }
  public ICommand Command { ... }
  public object CommandParameter { ... }
  public IValueConverter Converter { ...  }
  ...
}

And for your Entry, attach it like this:

<Entry Text="{Binding Username}">
  <Entry.Behaviors>
    <local:EventToCommandBehavior EventName="Completed" Command="{Binding CompletedCommand}" />
  </Entry.Behaviors>
</Entry>

Read more about this in the docs: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/behaviors/reusable/event-to-command-behavior