How to use WindowsCommunityToolkit TextBoxMask properly?

user_1381820 0
Viewed 414

I'm trying to use TextBoxMask from WindowsCommunityToolkit but i have some strange behaviors. XAML code :

<TextBox    extensions:TextBoxMask.Mask="99/99/9999"
    Text="{Binding PatientItem.StringBirthDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

PatientItemViewModel code :

private string _StringBirthDate;
public string StringBirthDate
{
    get { return _StringBirthDate; }
    set
    {
        DateTime birthDateValue;
        if (!String.IsNullOrEmpty(value) && DateTime.TryParse(value, out birthDateValue))
        {
            this.CalculateAgeValue(birthDateValue);
            this.BirthDate = birthDateValue;
            SetProperty(ref _StringBirthDate, value);
        }
    }
}

When i start from en empty input, i have no problems. Problems appeares when i open a page to edit data : PatientItem.StringBirthDate is set with "18/02/1952" value.

When i display my page, everything seems good :

enter image description here

But if click on cross to clean textbox, or if i use backspace keyboard touch, only last letter dissapear, and after that moment, if i tap anything on keyboard, some strange behviors appear (number not replaced, cursor do not move forward, etc...)

enter image description here

Do you have any idea to improve my code ? Is there a known problem with text binding used with mask ?

EDIT : video to show more explicitely my problem : enter image description here

It seems that TextBoxMask call set method with strange values :

enter image description here

windows-community-toolkit uwp-xaml uwp
1 Answers

It's default behavior if you use 'TextBoxMask' extension in your textbox. TextBoxMask will handle your TextBox's TextChanging event. See the source code, you would know the reason. When you click the 'x' button, it will trigger the TextChanging event.

Here, I suggested that you could use Backspace to delete your text instead of click 'x' button. About the 'x' button, you could do not show it by applying your custom style for your textbox. See the TextBoxMask XAML Property document, it also makes custom style for the textbox.

<Style x:Key="MaskedTextBoxStyle"
           TargetType="TextBox">
        <Setter Property="Margin" Value="10,0,10,0" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="TextWrapping" Value="Wrap" />
</Style>
user_67826120
Related