How to Customize Stroke Thickness in .NET MAUI SfTextInputLayout
28 Jul 20263 minutes to read
The stroke thickness of the Text Input Layout container changes based on the focus state of the input view. Use the FocusedStrokeThickness and UnfocusedStrokeThickness properties to control the thickness in each state.
Prerequisites
Before using the SfTextInputLayout, ensure the following NuGet package is installed in your .NET MAUI project:
Syncfusion.Maui.Core
For a step-by-step setup, refer to the Getting Started documentation.
Property Reference
| Property | Type | Default | Description |
|---|---|---|---|
FocusedStrokeThickness |
double |
2 |
Stroke thickness in device-independent units when the input view is focused. |
UnfocusedStrokeThickness |
double |
1 |
Stroke thickness in device-independent units when the input view is not focused. |
The property names are the same for every container type, but the visual effect differs:
| Container Type | Visual Effect |
|---|---|
| Outlined | Controls the width of the rounded border around the input view. |
| Filled | Controls the thickness of the bottom line of the container. |
| None | Controls the thickness of the bottom line. |
Set the stroke thickness
<VerticalStackLayout>
<inputLayout:SfTextInputLayout Hint="Name"
ContainerType="Outlined"
FocusedStrokeThickness="4"
UnfocusedStrokeThickness="2">
<Entry />
</inputLayout:SfTextInputLayout>
</VerticalStackLayout>var inputLayout = new SfTextInputLayout
{
Hint = "Name",
ContainerType = ContainerType.Outlined,
FocusedStrokeThickness = 4,
UnfocusedStrokeThickness = 2,
Content = new Entry()
};
Content = new VerticalStackLayout
{
Children =
{
inputLayout
}
};