New to Telerik UI for Xamarin? Download free 30-day trial

Commands

Apart from utilizing the Events that the control exposes for modeling the user input, you can also achieve this by utilizing the commands mechanism which is the preferred approach in a MVVM setup.

When using commands, you should inherit the MaskedInputCommandBase class and explicitly set the ID of your command to one of the available within the MaskedInputCommandID enum.

ApplyMaskStarted Command

In case you would like to add some logic through a command when applying the mask has started, you need to set the ID of your command to MaskedInputcommandId.ApplyMaskStarted. Eventually, the parameter that you will receive in the Execute method will be of type ApplyMaskStartedCommandContext. It exposes the following properties, which are identical to those of the ApplyMaskStartedEventArgs:

  • NewDisplayedText(string): The updated text of the MaskedInput control after the symbol is added.
  • NewInputValue(string): The new InputValue(the whole string value that the mask contains).
  • OldDisplayedText(string): The text of the MaskedInput before the symbol is added.
  • OldInputValue(string): The previous input value. Returns empty string if such is not available.

Example

Here is an example of a command that is invoked on ApplyMaskStarted:

public class CustomBeforeTextMaskedCommand : MaskedInputCommandBase
{
    public CustomBeforeTextMaskedCommand()
    {
        this.Id = MaskedInputCommandId.ApplyMaskStarted;
    }

    public override void Execute(object parameter)
    {
        var context = parameter as ApplyMaskStartedCommandContext;
        context.NewDisplayedText = context.NewDisplayedText.ToUpper();
    }
}

You should also make sure that the command is added in the Commands collection of the RadMaskedInput instance:

this.input.Commands.Add(new CustomBeforeTextMaskedCommand());

and the RadMaskedInput definition:

<StackLayout Margin="16">
    <Label Text="The default C token allows x to be input. Using custom command we reject x from input."/>
    <telerikInput:RadMaskedInput x:Name="input" Mask="CC (00)" Placeholder="#" />
</StackLayout>

ApplyMaskFinished Command

Similar to the ApplyMaskStarted Command, you can create a command that is executed when applying the mask has finished. In this case, you need to set the ID of your command to MaskedInputcommandId.ApplyMaskFinished The parameter that you will receive in the Execute method will then be of type ApplyMaskFinishedCommandContext. Identically to ApplyMaskFinishedEventArgs, it has the following properties:

  • CaretPosition(int): The position of the caret after the symbol was typed. It can be controlled to manually set the caret position.
  • IsAccepted(bool): Boolean property that indicates whether the symbol was accepted by the mask. It can be set to manually control the action.
  • NewDisplayedText(string): The updated text of the MaskedInput control after the symbol is added.
  • NewInputValue(string): The new InputValue(the whole string value that the mask contains).
  • OldDisplayedText(string): The text of the MaskedInput before the symbol is added.
  • OldInputValue(string): The previous input value. Returns empty string if such is not available.

Example

Here is an example of a command that is invoked on ApplyMaskFinished:

public class CustomAfterTextMaskedCommand : MaskedInputCommandBase
{
    public CustomAfterTextMaskedCommand()
    {
        this.Id = MaskedInputCommandId.ApplyMaskFinished;
    }

    private int lastValidCaretPosition = 0;
    public override void Execute(object parameter)
    {
        var context = parameter as ApplyMaskFinishedCommandContext;
        if (context.NewDisplayedText.Contains("X"))
        {
            context.IsAccepted = false;
            context.CaretPosition = lastValidCaretPosition;
        }
        else
        {
            lastValidCaretPosition = context.CaretPosition;
        }
    }
}

Once again, make sure that the command is added to the Commands collection of the RadMaskedInput control:

this.input.Commands.Add(new CustomAfterTextMaskedCommand());

and the RadMaskedInput definition:

<StackLayout Margin="16">
    <Label Text="The default C token allows x to be input. Using custom command we reject x from input."/>
    <telerikInput:RadMaskedInput x:Name="input" Mask="CC (00)" Placeholder="#" />
</StackLayout>

You can find a working demo in the MaskedInput/Features/Commands folder of the SDK Samples Browser application.

See Also

In this article