Xamarin Detecting Enter Key MVVM - xaml

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