.NET MAUI Entry Styling
The Entry provides styling options for setting the appearance of its border and font.
Style the Entry using the following properties:
CornerRadius(Microsoft.Maui.CornerRadius)—Defines the corners radius of the border around the input control.BackgroundColor(Microsoft.Maui.Graphics.Color)—Defines the background color of the input control.TextColor(Microsoft.Maui.Graphics.Color)—Defines the text color of the input control.PlaceholderColor(Microsoft.Maui.Graphics.Color)—Defines the color of the placeholder text of the input control.BorderBrush(Microsoft.Maui.Controls.Brush)—Defines the border brush of the input control.BorderThickness(Microsoft.Maui.Thickness)—Defines the border thickness of the input control.
In addition to the available styling properties, you can apply specific Visual States to the Entry control.
For a runnable example demonstrating the Entry Styling options, see the SDKBrowser Demo Application and go to the Entry > Styling category.
Clear Button Style
Style the Clear button which is displayed by default when entering text in the control using the following properties:
ClearButtonVisibility(enumof typeMicrosoft.Maui.ClearButtonVisibility)—Defines a value indicating whether the clear button (the button that clears the text when pressed) will be visible. The options are:NeverandWhileEditing(default).ClearButtonStyle(Stylewith target typeRadTemplatedButton)—Specifies the style of the clear button. Review the TemplatedButton Visual States article for more details on the available visual states.
The following example demonstrates how to style the clear button of the Entry:
<Style x:Key="CustomClearButtonStyle" TargetType="telerik:RadTemplatedButton">
<Setter Property="TextColor" Value="#A30111" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<!-- Applicable for Desktop only -->
<VisualState Name="PointerOver">
<VisualState.Setters>
<Setter Property="telerik:RadTemplatedButton.TextColor" Value="#B53340" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Pressed">
<VisualState.Setters>
<Setter Property="telerik:RadTemplatedButton.TextColor" Value="#C76670" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Disabled" />
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
For a runnable example demonstrating the Entry Clear button styling options, see the SDKBrowser Demo Application and go to the Entry > Styling category.
Font Options
The Entry control has the following properties for defining the font options:
FontAttributes(enumof typeMicrosoft.Maui.Controls.FontAttributes)—Defines the font attributes. The available options are:- (Default)
None—No font attributes are applied. Bold—The text is displayed in bold.Italic—The text is displayed in italic.
- (Default)
FontFamily(string)—Defines the font family.FontSize(double)—Defines the font size.FontAutoScalingEnabled(bool)—Specifies whether font auto-scaling is enabled.
The following example demonstrates how to apply the font options to the Entry.
<VerticalStackLayout>
<telerik:RadEntry Text="Normal Text" x:Name="entry"/>
<telerik:RadEntry Text="Bold Text - Large" FontAttributes="Bold" FontSize="Large" />
<telerik:RadEntry Text="Italic Text - Medium" FontAttributes="Italic" FontSize="Medium"/>
<telerik:RadEntry Text="Italic and Bold Text - Small" FontSize="Small" x:Name="smallEntry"/>
<telerik:RadEntry Text="Micro Text" FontSize="Micro" />
</VerticalStackLayout>
Validation Error View Style
The Entry control provides the following properties for styling the validation error view:
Use the following properties to style the error view when validation applies:
ValidationErrorColor(Color)—Defines the custom color for the error views.ValidationErrorImageStyle(Stylewith target typeImage)—Defines the style that applies to the error icon.ValidationErrorLabelStyle(Stylewith target typeLabel)—Defines the style that applies to the error label.
Here is an example of how to style the validation error label:
<Style x:Key="CustomValidationLabelStyle" TargetType="Label">
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="TextColor" Value="#A30111" />
</Style>
And here is an example of how to style the validation error image:
<Style x:Key="CustomValidationErrorImageStyle" TargetType="Image">
<Setter Property="Source">
<FontImageSource Glyph=""
Color="#A30111"
Size="{OnPlatform Default=16, iOS=20, MacCatalyst=20}"
FontFamily="TelerikFontExamples" />
</Setter>
</Style>
For a runnable example demonstrating the Entry's Styling, see the SDKBrowser Demo Application and go to the Entry > Styling category.