UI Customization in .NET MAUI Autocomplete (SfAutocomplete)

30 Aug 202424 minutes to read

This section explains different UI customizations available in the .NET MAUI Autocomplete control.

Placeholder

You can prompt the user with any information by using the Placeholder property. This text will be displayed only if no items are selected or the edit text is empty. The default value of the Placeholder property is string.Empty (No string will be displayed).

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        Placeholder="Select a social media"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name" />
autocomplete.Placeholder = "Select a social media";

The following image illustrates the result of the above code:

.NET MAUI Autocomplete placeholder

Placeholder Color

The placeholder text color can be changed by using the PlaceholderColor property. The default value of the PlaceholderColor property is Colors.Gray.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Select a social media"
                        PlaceholderColor="Red" />
autocomplete.PlaceholderColor = Colors.Red;

The following gif image illustrates the result of the above code:

.NET MAUI Autocomplete placeholder color

Clear Button Icon Color

The clear button icon color can be changed by using the ClearButtonIconColor property. The default value of the ClearButtonIconColor property is Colors.Black.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Select a social media"
                        PlaceholderColor="Red"
                        ClearButtonIconColor="Red" />
autocomplete.ClearButtonIconColor = Colors.Red;

The following gif image illustrates the result of the above code:

.NET MAUI Autocomplete clear button color

Stroke

The Autocomplete border color can be changed by using the Stroke property.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Select a social media"
                        PlaceholderColor="Red"
                        Stroke="Red" />
autocomplete.Stroke = Colors.Red;

The following gif image illustrates the result of the above code.

.NET MAUI Autocomplete border color

Customize the selection text highlightColor

The SelectionTextHighlightColor property is used to modify the background color of the selected item text in the autocomplete control.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        SelectionTextHighlightColor="Green" />
autocomplete.SelectionTextHighlightColor = Colors.Green;

.NET MAUI Autocomplete Selection Text Highlight Color

Maximum DropDown Height

The maximum height of the drop-down can be changed by using the MaxDropDownHeight property of the Autocomplete control. The default value of the MaxDropDownHeight property is 400d.

NOTE

If the MaxDropDownHeight is too small compared to the populated items, the scroll viewer will be automatically shown to navigate the hidden items.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        MaxDropDownHeight = "100"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name" />
autocomplete.MaxDropDownHeight = 100;

The following gif image illustrates the result of the above code:

.NET MAUI Autocomplete maximum drop-down height

Customize the DropDown (suggestion) item

The ItemTemplate property helps you to decorate drop-down items using the custom templates. The default value of the ItemTemplate is null. The following example shows how to customize drop-down items using templates.

//Model.cs
    public class Employee
    {
        public string Name { get; set; }
        public string ProfilePicture { get; set; }
        public string Designation { get; set; }
        public string ID { get; set; }
    }

    //ViewModel.cs
    public class EmployeeViewModel
    {
        public ObservableCollection<Employee> Employees { get; set; }
        public EmployeeViewModel()
        {
            this.Employees = new ObservableCollection<Employee>();
            Employees.Add(new Employee
            {
                Name = "Anne Dodsworth",
                ProfilePicture = "people_circle1.png",
                Designation = "Developer",
                ID = "E001",
            });
            Employees.Add(new Employee
            {
                Name = "Andrew Fuller",
                ProfilePicture = "people_circle8.png", 
                Designation = "Team Lead",
                ID = "E002",
            });
            ...
        }
    }
<editors:SfAutocomplete Placeholder="Enter an employee"
                            TextMemberPath="Name"
                            DisplayMemberPath="Name"
                            ItemsSource="{Binding Employees}"
                            WidthRequest="280"
                            HeightRequest="34"
                            x:Name="autoComplete">
        <editors:SfAutocomplete.BindingContext>
            <local:EmployeeViewModel/>
        </editors:SfAutocomplete.BindingContext>
        <editors:SfAutocomplete.ItemTemplate>
            <DataTemplate >
                <ViewCell>
                    <Grid Margin="0,5"
                          VerticalOptions="Center"
                          HorizontalOptions="Center"
                          ColumnDefinitions="48,220"
                          RowDefinitions="50">
                        <Image Grid.Column="0"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               Source="{Binding ProfilePicture}"
                               Aspect="AspectFit"/>
                        <StackLayout HorizontalOptions="Start"
                                     VerticalOptions="Center"
                                     Grid.Column="1"
                                     Margin="15,0,0,0">
                            <Label HorizontalTextAlignment="Start"
                                   VerticalTextAlignment="Center"
                                   Opacity=".87"
                                   FontSize="14"
                                   Text="{Binding Name}"/>
                            <Label HorizontalOptions="Start"
                                   VerticalTextAlignment="Center"
                                   Opacity=".54"
                                   FontSize="12"
                                   Text="{Binding Designation}"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </editors:SfAutocomplete.ItemTemplate>
    </editors:SfAutocomplete>
EmployeeViewModel employee = new EmployeeViewModel();

    SfAutocomplete autoComplete = new()
    {
        HeightRequest = 34,
        WidthRequest = 280,
        BindingContext = employee,
        ItemsSource = employee.Employees,
        DisplayMemberPath = "Name",
        Placeholder = "Enter an employee",
        TextMemberPath = "Name", 
    };

    DataTemplate itemTemplate = new DataTemplate(() =>
    {
        Grid grid = new();
        grid.Margin = new Thickness(0, 5);
        grid.HorizontalOptions = LayoutOptions.Center;
        grid.VerticalOptions = LayoutOptions.Center;
        ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 };
        ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 };
        RowDefinition rowDef = new RowDefinition() { Height = 50 };
        grid.ColumnDefinitions.Add(colDef1);
        grid.ColumnDefinitions.Add(colDef2);
        grid.RowDefinitions.Add(rowDef);

        Image image = new();
        image.HorizontalOptions = LayoutOptions.Center;
        image.VerticalOptions = LayoutOptions.Center;
        image.Aspect = Aspect.AspectFit;
        image.SetBinding(Image.SourceProperty, ("ProfilePicture"));
        Grid.SetColumn(image, 0);

        StackLayout stack = new();
        stack.Orientation = StackOrientation.Vertical;
        stack.Margin = new Thickness(15, 0,0,0);
        stack.HorizontalOptions = LayoutOptions.Start;
        stack.VerticalOptions = LayoutOptions.Center;
        Grid.SetColumn(stack, 1);

        Label label = new();
        label.SetBinding(Label.TextProperty, "Name");
        label.FontSize = 14;
        label.VerticalOptions = LayoutOptions.Center;
        label.HorizontalTextAlignment = TextAlignment.Start;
        label.Opacity = .87;

        Label label1 = new();
        label1.SetBinding(Label.TextProperty, "Designation");
        label1.FontSize = 12;
        label1.VerticalOptions = LayoutOptions.Center;
        label1.HorizontalTextAlignment = TextAlignment.Start;
        label1.Opacity = .54;

        stack.Children.Add(label);
        stack.Children.Add(label1);

        grid.Children.Add(image);
        grid.Children.Add(stack);

        return new ViewCell { View = grid };
    });
    autoComplete.ItemTemplate = itemTemplate;

    this.Content = autoComplete;

The following image illustrates the result of the above code:

.NET MAUI Autocomplete ItemTemplate

Customize the DropDown item text

DropDown items can be customized using the DropDownItemFontAttributes, DropDownItemFontFamily, DropDownItemFontSize, and DropDownItemTextColor properties.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        DropDownItemFontAttributes="Italic"
                        DropDownItemFontFamily="OpenSansSemibold"
                        DropDownItemFontSize="16"
                        DropDownItemTextColor="DarkViolet" />
autocomplete.DropDownItemFontAttributes = FontAttributes.Italic;
autocomplete.DropDownItemFontFamily = "OpenSansSemibold";
autocomplete.DropDownItemFontSize = 16;
autocomplete.DropDownItemTextColor = Colors.DarkViolet;

.NET MAUI Autocomplete DropDown Item Text

Customize the DropDown background color

The DropDownBackground property is used to modify the background color of the dropdown.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        DropDownBackground="YellowGreen" />
autocomplete.DropDownBackground = Colors.YellowGreen;

.NET MAUI Autocomplete DropDown Background

Customize the DropDown selected item background color

The SelectedDropDownItemBackground property is used to modify the background color of the selected item in the dropdown.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        SelectedDropDownItemBackground="LightSeaGreen" />
autocomplete.SelectedDropDownItemBackground = Colors.YellowGreen;

.NET MAUI Autocomplete Selected DropDown Item Background

Customize the DropDown Border Color

The DropDownStroke property is used to modify the border color of the dropdown.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        DropDownStroke="DarkOrange" />
autocomplete.DropDownStroke = Colors.DarkOrange;

.NET MAUI Autocomplete DropDown Stroke

Customize the DropDown Border Thickness

The DropDownStrokeThickness property is used to modify the thickness of the dropdown border.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        DropDownStroke="DarkOrange"
                        DropDownStrokeThickness="5" />
autocomplete.DropDownStrokeThickness = 5;

.NET MAUI Autocomplete DropDown Stroke Thickness

Customize the DropDown Item Height

The DropDownItemHeight property is used to modify the height of the dropdown items.

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        Placeholder="Enter Media"
                        DropDownItemHeight="80" />
autocomplete.DropDownItemHeight = 80;

.NET MAUI Autocomplete DropDown Item Height

Customize the DropDownPlacement

The drop-down that shows the filtered items will be placed automatically based on the available space and can also be customized using the DropDownPlacement property.

  • Top - Drop-down will be placed above the text box.

  • Bottom - Drop-down will be placed below the text box.

  • Auto - Drop-down will be placed based on the available space either top or bottom of the text box.

  • None - Drop-down will not be shown with the filtered items.

<editors:SfAutocomplete x:Name="autocomplete"
                         WidthRequest="300"                  
                         ItemsSource="{Binding SocialMedias}"
                         DropDownPlacement="Top"/>
autocomplete.DropDownPlacement = DropDownPlacement.Top;

.NET MAUI Autocomplete Dropdownplacement.

Customize the DropDown ItemPadding

The autocomplete enables the user to provide padding for the items inside dropdown using ItemPadding property.

<editors:SfAutocomplete x:Name="autocomplete"
                           WidthRequest="300"                          
                           ItemsSource="{Binding SocialMedias}"
                           ItemPadding="10,20,0,0"/>
autocomplete.ItemPadding = new Thickness(10,20,0,0);

.NET MAUI Autocomplete Itempadding.

Customize the DropDown Width

The DropdownWidth property is used to modify the Width of the dropdown.

<editors:SfAutocomplete x:Name="autocomplete"
                            WidthRequest="300"                            
                            ItemsSource="{Binding SocialMedias}"                           
                            DropdownWidth="400"/>
autocomplete.DropdownWidth = 400;

.NET MAUI Autocomplete DropDownWidth.

Show suggestion box on focus

Suggestion box can be shown whenever the control receives focus using the ShowSuggestionsOnFocus property. At this time, suggestion list is the complete list of data source.

<editors:SfAutocomplete x:Name="autocomplete"
                              WidthRequest="300"                            
                              ItemsSource="{Binding SocialMedias}"                           
                              ShowSuggestionsOnFocus="True"/>
autocomplete.ShowSuggestionsOnFocus = true;

.NET MAUI Autocomplete OnFocus.

Customize DropDown (suggestion) items based on condition

The ItemTemplate property helps you to decorate drop-down items conditionally based on their content using the custom templates. The default value of the ItemTemplate is null.

//Model.cs
    public class Employee
    {
        public string Name { get; set; }
        public string ProfilePicture { get; set; }
        public string Designation { get; set; }
        public string ID { get; set; }
    }

    //ViewModel.cs
    public class EmployeeViewModel
    {
        public ObservableCollection<Employee> Employees { get; set; }
        public EmployeeViewModel()
        {
            this.Employees = new ObservableCollection<Employee>();
            Employees.Add(new Employee
            {
                Name = "Anne Dodsworth",
                ProfilePicture = "people_circle1.png",
                Designation = "Developer",
                ID = "E001",
            });
            Employees.Add(new Employee
            {
                Name = "Andrew Fuller",
                ProfilePicture = "people_circle8.png", 
                Designation = "Team Lead",
                ID = "E002",
            });
            Employees.Add(new Employee
            {
                Name = "Andrew Fuller",
                ProfilePicture ="people_circle8.png",
                Designation = "Team Lead",
                ID = "E002",
            });
            Employees.Add(new Employee
            {
                Name = "Emilio Alvaro",
                ProfilePicture = "people_circle7.png",
                Designation = "Product Manager",
                ID = "E003"
            });
            Employees.Add(new Employee
            {
                Name = "Janet Leverling",
                ProfilePicture = "people_circle2.png",
                Designation = "HR",
                ID = "E004",
            });
            Employees.Add(new Employee
            {
                Name = "Laura Callahan",
                ProfilePicture = "people_circle10.png",
                Designation = "Product Manager",
                ID = "E005",
            });
        }
    }

    //Template selector
    public class EmployeeTemplateSelector : DataTemplateSelector
    {
        public DataTemplate EmployeeTemplate1 { get; set; }
        public DataTemplate EmployeeTemplate2 { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var employeeName = ((Employee)item).Name;
            {
                if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilio Alvaro" ||
                    employeeName.ToString() == "Laura Callahan")
                {
                    return EmployeeTemplate1;
                }
                else
                {
                    return EmployeeTemplate2;
                }
            }
        }
    }
<Grid>
        <Grid.Resources>
            <DataTemplate x:Key="employeeTemplate1">
                <ViewCell>
                    <Grid Margin="0,5"
                          VerticalOptions="Center"
                          HorizontalOptions="Center"
                          ColumnDefinitions="48,220"
                          RowDefinitions="50">
                            <Image Grid.Column="0"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Source="{Binding ProfilePicture}"
                                   Aspect="AspectFit"/>
                            <StackLayout HorizontalOptions="Start"
                                         VerticalOptions="Center"
                                         Grid.Column="1"
                                         Margin="15,0,0,0">
                                <Label HorizontalTextAlignment="Start"
                                        VerticalTextAlignment="Center"
                                        Opacity=".87"
                                        FontSize="14"
                                        TextColor="Blue"
                                        Text="{Binding Name}"/>
                                <Label HorizontalOptions="Start"
                                        VerticalTextAlignment="Center"
                                        Opacity=".54"
                                        FontSize="12"
                                        TextColor="Coral"
                                        Text="{Binding Designation}"/>
                            </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
            
            <DataTemplate x:Key="employeeTemplate2">
                <ViewCell>
                    <Grid Margin="0,5"
                          VerticalOptions="Center"
                          HorizontalOptions="Center"
                          ColumnDefinitions="48,220"
                          RowDefinitions="50">
                            <Image Grid.Column="0"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Source="{Binding ProfilePicture}"
                                   Aspect="AspectFit"/>
                            <StackLayout HorizontalOptions="Start"
                                         VerticalOptions="Center"
                                         Grid.Column="1"
                                         Margin="15,0,0,0">
                                <Label HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Center"
                                       Opacity=".87"
                                       FontSize="14"
                                       TextColor="Red"
                                       Text="{Binding Name}"/>
                                <Label HorizontalOptions="Start"
                                       VerticalTextAlignment="Center"
                                       Opacity=".54"
                                       FontSize="12"
                                       TextColor="Green"
                                       Text="{Binding Designation}"/>
                            </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>

            <local:EmployeeTemplateSelector x:Key="employeeTemplateSelector"
                                            EmployeeTemplate1="{StaticResource employeeTemplate1}"
                                            EmployeeTemplate2="{StaticResource employeeTemplate2}"/>

        </Grid.Resources>

        <editors:SfAutocomplete Placeholder="Enter an employee"
                                TextMemberPath="Name"
                                DisplayMemberPath="Name"
                                ItemsSource="{Binding Employees}"
                                SelectedItem="{Binding SelectedEmployee,Mode=TwoWay}"
                                WidthRequest="280"
                                HeightRequest="34"
                                x:Name="autoComplete"
                                ItemTemplate="{StaticResource employeeTemplateSelector}">
            <editors:SfAutocomplete.BindingContext>
                <local:EmployeeViewModel/>
            </editors:SfAutocomplete.BindingContext>
        </editors:SfAutocomplete>
    </Grid>
EmployeeViewModel employee = new EmployeeViewModel();

    DataTemplate employeeTemplate1 = new DataTemplate(() =>
    {
        Grid grid = new();
        grid.Margin = new Thickness(0, 5);
        grid.HorizontalOptions = LayoutOptions.Center;
        grid.VerticalOptions = LayoutOptions.Center;
        ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 };
        ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 };
        RowDefinition rowDef = new RowDefinition() { Height = 50 };
        grid.ColumnDefinitions.Add(colDef1);
        grid.ColumnDefinitions.Add(colDef2);
        grid.RowDefinitions.Add(rowDef);

        Image image = new();
        image.HorizontalOptions = LayoutOptions.Center;
        image.VerticalOptions = LayoutOptions.Center;
        image.Aspect = Aspect.AspectFit;
        image.SetBinding(Image.SourceProperty, ("ProfilePicture"));
        Grid.SetColumn(image, 0);

        StackLayout stack = new();
        stack.Orientation = StackOrientation.Vertical;
        stack.Margin = new Thickness(15, 0,0,0);
        stack.HorizontalOptions = LayoutOptions.Start;
        stack.VerticalOptions = LayoutOptions.Center;
        Grid.SetColumn(stack, 1);

        Label label = new();
        label.SetBinding(Label.TextProperty, "Name");
        label.FontSize = 14;
        label.TextColor = Colors.Blue;
        label.VerticalOptions = LayoutOptions.Center;
        label.HorizontalTextAlignment = TextAlignment.Start;
        label.Opacity = .87;

        Label label1 = new();
        label1.SetBinding(Label.TextProperty, "Designation");
        label1.FontSize = 12;
        label1.TextColor = Colors.Coral;
        label1.VerticalOptions = LayoutOptions.Center;
        label1.HorizontalTextAlignment = TextAlignment.Start;
        label1.Opacity = .54;

        stack.Children.Add(label);
        stack.Children.Add(label1);

        grid.Children.Add(image);
        grid.Children.Add(stack);

        return new ViewCell { View = grid };
    });

    DataTemplate employeeTemplate2 = new DataTemplate(() =>
    {
        Grid grid = new();
        grid.Margin = new Thickness(0, 5);
        grid.HorizontalOptions = LayoutOptions.Center;
        grid.VerticalOptions = LayoutOptions.Center;
        ColumnDefinition colDef1 = new ColumnDefinition() { Width = 48 };
        ColumnDefinition colDef2 = new ColumnDefinition() { Width = 220 };
        RowDefinition rowDef = new RowDefinition() { Height = 50 };
        grid.ColumnDefinitions.Add(colDef1);
        grid.ColumnDefinitions.Add(colDef2);
        grid.RowDefinitions.Add(rowDef);

        Image image = new();
        image.HorizontalOptions = LayoutOptions.Center;
        image.VerticalOptions = LayoutOptions.Center;
        image.Aspect = Aspect.AspectFit;
        image.SetBinding(Image.SourceProperty, ("ProfilePicture"));
        Grid.SetColumn(image, 0);

        StackLayout stack = new();
        stack.Orientation = StackOrientation.Vertical;
        stack.Margin = new Thickness(15, 0, 0, 0);
        stack.HorizontalOptions = LayoutOptions.Start;
        stack.VerticalOptions = LayoutOptions.Center;
        Grid.SetColumn(stack, 1);

        Label label = new();
        label.SetBinding(Label.TextProperty, "Name");
        label.FontSize = 14;
        label.TextColor = Colors.Red;
        label.VerticalOptions = LayoutOptions.Center;
        label.HorizontalTextAlignment = TextAlignment.Start;
        label.Opacity = .87;

        Label label1 = new();
        label1.SetBinding(Label.TextProperty, "Designation");
        label1.FontSize = 12;
        label1.TextColor = Colors.Green;
        label1.VerticalOptions = LayoutOptions.Center;
        label1.HorizontalTextAlignment = TextAlignment.Start;
        label1.Opacity = .54;

        stack.Children.Add(label);
        stack.Children.Add(label1);

        grid.Children.Add(image);
        grid.Children.Add(stack);

        return new ViewCell { View = grid };
    });

    EmployeeTemplateSelector employeeTemplateSelector = new EmployeeTemplateSelector();
    employeeTemplateSelector.EmployeeTemplate1 = employeeTemplate1;
    employeeTemplateSelector.EmployeeTemplate2 = employeeTemplate2;

    SfAutocomplete autoComplete = new()
    {
        HeightRequest = 34,
        WidthRequest = 280,
        BindingContext = employee,
        ItemsSource = employee.Employees,
        DisplayMemberPath = "Name",
        Placeholder = "Enter an employee",
        TextMemberPath = "Name", 
        ItemTemplate = employeeTemplateSelector,
    };
    
    this.Content = autoComplete;

The following image illustrates the result of the above code:

.NET MAUI Autocomplete ItemTemplateSelector

Styling token items

The Autocomplete control allows you to customize the style of the TokenItem generated in the selection area by using the TokenItemStyle property.

...
  xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
  xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
 ...

  <editors:SfAutocomplete
   SelectionMode="Multiple"
   WidthRequest="350"
   HeightRequest="50"
   ItemsSource="{Binding SocialMedias}"
   DisplayMemberPath="Name"
   TextMemberPath="Name"    
   x:Name="autoComplete">
       <editors:SfAutocomplete.TokenItemStyle>
           <Style TargetType="core:SfChipGroup">
               <Setter Property="ChipTextColor" Value="White"/>
               <Setter Property="ChipFontAttributes" Value="Bold"/>
               <Setter Property="CloseButtonColor" Value="White"/>
               <Setter Property="ChipBackground" Value="#d3a7ff"/>
               <Setter Property="ChipStroke" Value="#5118e3"/>
               <Setter Property="ChipStrokeThickness" Value="6"/>
               <Setter Property="ChipCornerRadius" Value="18"/>
           </Style>
       </editors:SfAutocomplete.TokenItemStyle>
   </editors:SfAutocomplete>

The following image illustrates the result of the above code:

.NET MAUI Autocomplete with tokenitemstyle

Completed Event

The Completed event is raised when the user finalizes the text in the SfAutocomplete by pressing return key on the keyboard.The handler for the event is a generic event handler, taking the sender and EventArgs(the EventArgs value is string.Empty):

<editors:SfAutocomplete x:Name="autoComplete"
                            WidthRequest="280" 
                            HeightRequest="34"
                            Completed="autoComplete_Completed" />
private async void autoComplete_Completed(object sender, EventArgs e)
    {
        await DisplayAlert("Message", "Text entering Completed", "close");
    }

Completed event can be subscribed in C# also:

autoComplete.Completed+=autoComplete_Completed;

The following image illustrates the result of the above code:

.NET MAUI Autocomplete completed event

NOTE

The Completed event is not supported in the Android platform.

The DropDownOpening event will be fired whenever opening the dropdown menu in the SfAutocomplete. It can cancel dropdown opening with CancelEventArgs that contains the following property:

  • Cancel: Dropdown opening is based on this value.
<editors:SfAutocomplete x:Name="autoComplete"
                            DropdownOpening="Autocomplete_DropdownOpening"
                            WidthRequest="350"
                            HeightRequest="50"
                            ItemsSource="{Binding SocialMedias}"
                            DisplayMemberPath="Name"
                            TextMemberPath="Name">
    </editors:SfAutocomplete>
SfAutocomplete autoComplete = new SfAutocomplete();
    autoComplete.DropdownOpening += Autocomplete_DropdownOpening;
private void Autocomplete_DropdownOpening(object sender, CancelEventArgs e)
 {
     e.Cancel = true; // If you want to restrict the dropdown open then set the e.Cancel is true. 
 }

The DropDownOpened event occurs when the SfAutocomplete drop-down is opened.

<editors:SfAutocomplete x:Name="autoComplete" 
                             DropdownOpened="autoComplete_DropdownOpened"
                             WidthRequest="350"
                             HeightRequest="50"
                             ItemsSource="{Binding SocialMedias}"
                             DisplayMemberPath="Name"
                             TextMemberPath="Name">
     </editors:SfAutocomplete>
SfAutocomplete autoComplete = new SfAutocomplete();

  autoComplete.DropdownOpened += autoComplete_DropdownOpened;
private void autoComplete_DropdownOpened(object sender, EventArgs e)
  {
    
  }

The DropDownClosed event occurs when the SfAutocomplete drop-down is closed.

<autocomplete:SfAutocomplete HeightRequest="40"
                                 x:Name="autoComplete"
                                 ItemSource="{Binding Employees}"
                                 DropDownClosed="SfAutocomplete_DropDownClosed"/>
SfAutocomplete autoComplete = new SfAutocomplete();
    autoComplete.DropDownClosed+=autoComplete_DropDownClosed;
private void SfAutocomplete_DropDownClosed(object sender, EventArgs e)
    {
        await DisplayAlert("Message", "DropDown Closed", "close");
    }

CursorPosition

The cursor position in the input view can be obtained or updated using the CursorPosition property in the SfAutocomplete.

<editors:SfAutocomplete x:Name="autoComplete"
                            WidthRequest="250" 
                            HeightRequest="35"
                            CursorPosition = "4" />
using Syncfusion.Maui.Inputs;

    SfAutocomplete autocomplete = new SfAutocomplete();
    autocomplete.CursorPosition = 4;

NOTE

Two way binding not supported in Android platform.

Border visibility

The ShowBorder property of SfAutocomplete is used to modify the visibility of the border and its default value is true. The following code example demonstrates how to change the border visibility,

<editors:SfAutocomplete x:Name="autoComplete"
                            WidthRequest="200" 
                            HeightRequest="35"
                            ShowBorder = "False" />
using Syncfusion.Maui.Inputs;

    SfAutocomplete autocomplete = new SfAutocomplete();
    autocomplete.WidthRequest = 200;
    autocomplete.HeightRequest = 35;
    autocomplete.ShowBorder = false;

The following image illustrates the result of the above code:

ShowBorder

TextAlignment

The SfAutocomplete provides support to customize the text alignment by using the HorizontalTextAlignment and VerticalTextAlignment properties.

NOTE

Dynamic changes to the HorizontalTextAlignment property may not be functioning as expected on Android platform.

<editors:SfAutocomplete x:Name="autoComplete"
                            WidthRequest="250" 
                            HeightRequest="50"
                            HorizontalTextAlignment="Center" 
                            VerticalTextAlignment="Start"/>
SfAutocomplete autocomplete = new SfAutocomplete();
    autocomplete.WidthRequest = 250;
    autocomplete.HeightRequest = 50;
    autocomplete.HorizontalTextAlignment = TextAlignment.Center;
    autocomplete.VerticalTextAlignment = TextAlignment.Start;

The following image illustrates the result of the above code:

TextAlignment

ReturnType

The ReturnType property specifies the return button (e.g., Next, Done, Go) of the keyboard. It helps manage the flow between multiple input fields by defining what happens when the action button is pressed.

You can define the return key type of SfAutocomplete by using the ReturnType property.

NOTE

Default value of ReturnType is Default.

<editors:SfAutocomplete x:Name="autocomplete"
            ItemsSource="{Binding SocialMedias}"
            DisplayMemberPath="Name"
            TextMemberPath="Name" 
            ReturnType="Next"/>
SfAutocomplete sfAutocomplete = new SfAutocomplete();
sfAutocomplete.ReturnType = ReturnType.Next;

.NET MAUI Autocomplete ReturnType

Clear button customization

The ClearButtonPath property allows users to set the path for customizing the appearance of the SfAutocomplete clear button.

<editors:SfAutocomplete x:Name="autoComplete"
                    ItemsSource="{Binding SocialMedias}"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name">
            <editors:SfAutocomplete.ClearButtonPath>
                <Path Data="M1.70711 0.292893C1.31658 -0.097631 0.683417 -0.097631 0.292893 0.292893C-0.097631 0.683417 -0.097631 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.097631 12.6834 -0.097631 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.097631 12.6834 -0.097631 12.2929 0.292893L7 5.58579L1.70711 0.292893Z" 
                Fill="Red" 
                Stroke="Red"/>
            </editors:SfAutocomplete.ClearButtonPath>
</editors:SfAutocomplete>
private string _customPath = "M1.70711 0.292893C1.31658 -0.097631 0.683417 -0.097631 0.292893 0.292893C-0.097631 0.683417 -0.097631 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.097631 12.6834 -0.097631 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.097631 12.6834 -0.097631 12.2929 0.292893L7 5.58579L1.70711 0.292893Z";

var converter = new PathGeometryConverter();
var path = new Path() 
{ 
    Data = (PathGeometry)converter.ConvertFromInvariantString(_customPath),
    Fill = Colors.Red,
    Stroke = Colors.Red
};

var viewModel = new SocialMediaViewModel();

SfAutocomplte autocomplete = new SfAutocomplte();
autocomplete.ItemsSource = viewModel.SocialMedia;
autocomplete.DisplayMemberPath = "Name";
autocomplete.TextMemberPath = "Name";
autocomplete.ClearButtonPath = path;

The following image illustrates the result of the above code:

.NET MAUI Autocomplete ClearButtonPath

Return Command and Return Command Parameter

  • ReturnCommand, of type ICommand, defines the command to be executed when the return key is pressed.
  • ReturnCommandParameter, of type object, specifies the parameter for the ReturnCommand.
<editors:SfAutocomplete x:Name="autocomplete"
                    ItemsSource="{Binding SocialMedia}"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name"
                    ReturnCommand="{Binding AlertCommand}"
                    ReturnCommandParameter="Return key is pressed"/>
var viewModel = new SocialMediaViewModel();

SfAutocomplte autocomplete = new SfAutocomplte();
autocomplete.ItemsSource = viewModel.SocialMedia;
autocomplete.DisplayMemberPath = "Name";
autocomplete.TextMemberPath = "Name";
autocomplete.ReturnCommand = viewModel.AlertCommand;
autocomplete.ReturnCommandParameter = "Return key is pressed";
public SocialMediaViewModel
{
    public ICommand AlertCommand => new Command<string>(OnAlertCommandExecuted);

    private async void OnAlertCommandExecuted(string parameter)
    {
        await Application.Current.MainPage.DisplayAlert("Alert", parameter, "OK");
    }
}