Custom Icons in .NET MAUI Text Input Layout (SfTextInputLayout)

21 Jun 20244 minutes to read

Any custom icons can be added to the leading edge or the trailing edge of the input view in the text input layout control. The events and commands related to the custom icons should be handled at the application level.

Unicode or font icons for the labels can be displayed as icons.

NOTE

Refer to the following links to learn more about font icons:

• How to create font icons using our metro studio and export as ttf?
• How to set font family for the custom fonts in labels?

Leading view

A label can be added as a leading icon for the input view by setting the LeadingView property. It can be positioned either inside or outside the container by setting the LeadingViewPosition property. By default, it is positioned Outside.

XAML

<inputLayout:SfTextInputLayout Hint="Birth date"
                               LeadingViewPosition="Inside" >
    <Entry />
    <inputLayout:SfTextInputLayout.LeadingView>
       <Label
           Text="&#x1F5D3;">     
       </Label>
    </inputLayout:SfTextInputLayout.LeadingView>
</inputLayout:SfTextInputLayout>

C#

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.LeadingViewPosition = ViewPosition.Inside;
inputLayout.LeadingView = new Label() { Text = "\U0001F5D3" };
inputLayout.Content = new Entry();

Trailing view

A label can be added as a trailing icon for the input view by setting the TrailingView property. It can be positioned either inside or outside the container of the input view by setting the TrailingViewPosition property. By default, it is positioned as Inside.

XAML

<inputLayout:SfTextInputLayout Hint="Birth date"
                               TrailingViewPosition="Outside">
    <Entry  />
    <inputLayout:SfTextInputLayout.TrailingView>
      <Label
         Text="&#x1F5D3;">     
      </Label>
    </inputLayout:SfTextInputLayout.TrailingView>
</inputLayout:SfTextInputLayout>

C#

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.TrailingViewPosition = ViewPosition.Outside; 
inputLayout. TrailingView = new Label() { Text = "\U0001F5D3" };
inputLayout.Content = new Entry();

Leading and trailing view visibility customization

The ShowLeadingView and ShowTrailingView properties in the SfTextInputLayout can be used to control the visibility of the leading and trailing views, respectively.

XAML

<inputLayout:SfTextInputLayout Hint="Birth date"
                               ContainerType="Outlined"
                               ShowLeadingView="False"
                               ShowTrailingView="False" >
   <Entry />
   <inputLayout:SfTextInputLayout.LeadingView>
      <Label
         Text="&#x1F5D3;">     
      </Label>
   </inputLayout:SfTextInputLayout.LeadingView>
   <inputLayout:SfTextInputLayout.TrailingView>
   <Label
      Text="&#x1F5D3;">     
   </Label>
   </inputLayout:SfTextInputLayout.TrailingView>
</inputLayout:SfTextInputLayout>

C#

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.LeadingView = new Label() { Text = "\U0001F5D3" };
inputLayout.TrailingView = new Label() { Text = "\U0001F5D3" };
inputLayout.Content = new Entry();
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.ShowLeadingView = false;
inputLayout.ShowTrailingView = false;