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?