2

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

Geoffrey Lalloué
  • 1,456
  • 1
  • 20
  • 43

1 Answers1

1

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>
Xie Steven
  • 8,544
  • 1
  • 9
  • 23
  • Thanks Xavier Xie for your answer. But i don't think problem is from 'x' button. In fact, when i use it from empty input (first use), i don't have problem even if i click on 'x' button. But after, saving it and if i come from edition page, input is already set, and after that moment i have many dificulties. I updated my answer with new elements to show you my problems – Geoffrey Lalloué Jan 10 '19 at 16:38
  • @GeoffreyLalloué My meaning was to tell you that the all behaviors that you see are handled in TextBox's TextChanging event of TextBoxMask's [source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Extensions/TextBoxMask/TextBoxMask.cs#L226). You could download the source code to debug and change the code to change these behaviors. – Xie Steven Jan 11 '19 at 02:46