Maui - How to attach the pincode to a view model using MVVM

60 views Asked by At

I created a custom control for a 4 digit pincode. Each digit in the pincode is handled with a separate <Entry> control with appropriate Focus() calls in code-behind to move between each <Entry> control.

Now, I want to add a field that should concatenate all digits into a single pincode field in my view-model. On my view, I don't have a control for this pincode field. How can I do a binding in such a case? Should I use a hidden <Entry> for such a binding? My code is as follows:

View

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Pincode.Controls"
             x:Class="Pincode.Controls.PinCodeView">

    <Entry x:Name="Pin1" 
           MaxLength="1"
           Keyboard="Numeric" 
           Focused="Pin1_OnFocused"
           TextChanged="Pin1_TextChanged"/>
    <Entry x:Name="Pin2" 
           MaxLength="1"
           Keyboard="Numeric" 
           Focused="Pin2_OnFocused"
           TextChanged="Pin2_TextChanged"/>
    <Entry x:Name="Pin3" 
           MaxLength="1"
           Keyboard="Numeric" 
           Focused="Pin3_OnFocused"
           TextChanged="Pin3_TextChanged"/>
    <Entry x:Name="Pin4" 
           MaxLength="1"
           Keyboard="Numeric" 
           Focused="Pin4_OnFocused"
           TextChanged="Pin4_TextChanged"/>

</ContentView>

Code-Behind:

public PinCodeView()
{
    InitializeComponent();
}

// Pin2, Pin3 and Pin4 has similar
private void Pin1_TextChanged(object? sender, TextChangedEventArgs e)
{

    if (e.NewTextValue.Length == 1)
    {
        Pin2.Focus();
    }   
    
}

View-Model:

public partial class PinCodeViewModel : ObservableObject
{
    [ObservableProperty]
    string _pinEntry = string.Empty;

    [ObservableProperty]
    bool _isComplete = false;
}

I need to find a way to allow pages using this control to take the PinEntry and IsComplete values that they can use to perform further actions like validation etc. PinEntry will provide them all 4 digits and IsComplete provide if all 4 digits are entered.

How can I achieve this?

0

There are 0 answers