How To Remove Underline From RadTextMaskedEntry

2 Answers 123 Views
MaskedEntry
billy
Top achievements
Rank 2
Iron
Iron
Iron
billy asked on 08 Aug 2023, 01:45 AM

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

Sort by
1
Accepted
Lance | Manager Technical Support
Telerik team
answered on 11 Aug 2023, 05:28 PM

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

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
billy
Top achievements
Rank 2
Iron
Iron
Iron
commented on 15 Aug 2023, 04:25 PM

Thanks Lance. This got it.
Lance | Manager Technical Support
Telerik team
commented on 15 Aug 2023, 05:14 PM

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)

0
Maria
Telerik team
answered on 08 Aug 2023, 02:10 PM

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

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
billy
Top achievements
Rank 2
Iron
Iron
Iron
commented on 11 Aug 2023, 02:19 PM

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=" "/>

Tags
MaskedEntry
Asked by
billy
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Lance | Manager Technical Support
Telerik team
Maria
Telerik team
Share this question
or