I have an application that I've written handlers to remove the underline from the Entry / Editor input elements. But I'm using the RadTextMaskedEntry for a masked entry as TK is an easy implementation. But, I don't see any documentation on custom handlers or how I can remove the underline on the RadTextMaskedEntry.
Can you please provide a sample or direction on how this can be accomplished?
THanks
Billy
2 Answers, 1 is accepted
Hello Billy,
You no longer have to use custom handlers to be able to do this as we surface a FocusedBorderBrush and FocusedborderThickness properties to the RadEntry control. However, since you are using the RadTextMaskedEntry, the only way to access the inner RadEntry is through the ControlTemplate.
I have shared an example below and highlighted the properties that I've added to the default template that give you control over the appearance of the border around the component.
<Grid>
<Grid.Resources>
<!-- FOR REFERENCE ONLY - THIS IS THE UNALTERED DEFAULT TEMPLATE -->
<!-- <ControlTemplate x:Key="MaskedEntry_ControlTemplate">
<telerik:RadEntry AutomationId="MaskedEntryView"
IsValueValid="{Binding IsValueValid, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
ValidationErrorMessage="{Binding ActualValidationErrorMessage, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
IsReadOnly="{Binding IsReadOnly, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
IsEnabled="{Binding IsEnabled, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
Placeholder="{Binding Placeholder, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
FontFamily="{Binding FontFamily, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
FontSize="{Binding FontSize, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
ClearButtonVisibility="{Binding ClearButtonVisibility, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
ClearButtonColor="{Binding ClearButtonColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
HoveredClearButtonColor="{Binding HoveredClearButtonColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
PressedClearButtonColor="{Binding PressedClearButtonColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
BackgroundColor="{Binding EntryBackgroundColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
CornerRadius="{Binding EntryCornerRadius, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
TextColor="{Binding TextColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
Keyboard="{Binding Keyboard, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}" />
</ControlTemplate>-->
<ControlTemplate x:Key="MyMaskedEntry_ControlTemplate">
<telerik:RadEntry AutomationId="MaskedEntryView"
IsValueValid="{Binding IsValueValid, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
ValidationErrorMessage="{Binding ActualValidationErrorMessage, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
IsReadOnly="{Binding IsReadOnly, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
IsEnabled="{Binding IsEnabled, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
Placeholder="{Binding Placeholder, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
FontFamily="{Binding FontFamily, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
FontSize="{Binding FontSize, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
ClearButtonVisibility="{Binding ClearButtonVisibility, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
ClearButtonColor="{Binding ClearButtonColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
HoveredClearButtonColor="{Binding HoveredClearButtonColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
PressedClearButtonColor="{Binding PressedClearButtonColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
BackgroundColor="{Binding EntryBackgroundColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
CornerRadius="{Binding EntryCornerRadius, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
TextColor="{Binding TextColor, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
Keyboard="{Binding Keyboard, Source={x:RelativeSource AncestorType={Type telerik:RadMaskedEntryBase}}}"
FocusedBorderBrush="Transparent"
FocusedBorderThickness="0,0,0,0"
BorderBrush="Transparent"
BorderThickness="0,0,0,0" />
</ControlTemplate>
</Grid.Resources>
<telerik:RadTextMaskedEntry x:Name="MaskedEntry1"
ControlTemplate="{StaticResource MyMaskedEntry_ControlTemplate}"
WidthRequest="200" />
</Grid>Note: You don't have to use them all, you can just shrink the thickness to 0, or just make it transparent, they accomplish the same visual result.
Regards,
Lance | Manager Technical Support
Progress Telerik
Rank 2
Iron
Iron
Iron
I'm happy to hear this helped! I've actually converted the topic to a KB article so that it will be easier for folks to find in the future when searching the docs/google/Bing.
It will be in the rendered docs in a couple days, but here's the markdown if you need it now => maui-docs/knowledge-base/maskedentry-border-styling.md (github.com)
Hello Billy,
To remove the underline in the MaskedEntry control for the TextMask type you need to use the PromptChar property https://docs.telerik.com/devtools/maui/controls/maskedentry/prompt-character. The property defines the character that is displayed instead of a blank spaces. By default, the character is an underscore "_". You need to set it like this:
<telerik:RadTextMaskedEntry Mask="LLLLL"
PromptChar=" "/>Regards,
Maria
Progress Telerik
Rank 2
Iron
Iron
Iron
Hi Maria,
I implemented your example code, yet the MaskedEntry still shows the underline. Is there something I'm missing. Are there handlers exposed that I might be able to utilize to modify these controls?
<tk:RadTextMaskedEntry Mask="(###) ###-####" PromptChar=" "/>