How to Vertically Center Align Icons in Leading and Trailing Views in .NET MAUI TextInputLayout

In .NET MAUI, the TextInputLayout control allows you to create a text input field with additional features such as leading and trailing views. These views can contain icons, labels, or other elements that enhance the user interface. This article demonstrates how to vertically center align icons within the leading and trailing views of the .NET MAUI TextInputLayout.

XAML Implementation:
To center align an icon in the leading or trailing view of the TextInputLayout, you can use the VerticalTextAlignment property of the Label element that holds the icon. In this, the Label element within the LeadingView contains an icon represented by an emoji. The VerticalTextAlignment property is set to Center, which vertically centers the icon within the leading view.

XAML

    <StackLayout WidthRequest="200" HeightRequest="200">
        <inputLayout:SfTextInputLayout Hint="Date"
                                       LeadingViewPosition="Inside">
            <inputLayout:SfTextInputLayout.LeadingView>
                         <Label VerticalTextAlignment="Center" 
                                Text="🗓"  
                                FontSize="16" />
            </inputLayout:SfTextInputLayout.LeadingView>
            <Entry />
        </inputLayout:SfTextInputLayout>
    </StackLayout>

Output

You can refer to our .NET MAUI TextInputLayout feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI TextInputLayout documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI TextInputLayout and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!