How to add images and buttons in Dropdown items of .NET MAUI Autocomplete?

This article demonstrates how to customize the drop-down items in the .NET MAUI Autocomplete (SfAutocomplete). Utilize the ItemTemplate property to style dropdown items using custom templates.

Steps

Step 1: Populate Data in ViewModel

Create a model class named Employee that contains the employee’s image and name. Then, generate a collection of employee data within the ViewModel class.

public class Employee
{
    public string Name { get; set; }
    public string Image { get; set; }
}

public class EmployeeViewModel
{
    public ObservableCollection<Employee> Employees { get; set; }

    public EmployeeViewModel()
    {
        this.Employees = new ObservableCollection<Employee>()
        {
            new Employee{ Name = "Anne Dodsworth", Image = "anne_dodsworth.png"},
            new Employee{ Name = "Andrew Fuller", Image = "andrew_fuller.png"},
            new Employee{ Name = "Emilio Alvaro", Image = "emilio_alvaro.png" },
            new Employee{ Name = "Janet Leverling", Image = "janet_leverling.png" },
            new Employee{ Name = "Jennifer", Image = "jennifer.png"},
            new Employee{ Name = "Jackson", Image = "jackson.png"},
            new Employee{ Name = "Jacob", Image = "jacob.png"}
        };
    }
}

Step 2: Bind the data

Bind the Employees property to the ItemsSource property of the SfAutocomplete. Use the TextMemberPath property path to display a value in the selection box when an item is selected. The DisplayMemberPath property path specifies the name or path of the property displayed for each data item in the dropdown list.

XAML

<ContentPage.BindingContext>
    <local:EmployeeViewModel />
</ContentPage.BindingContext>
<editors:SfAutocomplete Placeholder="Enter an employee"
                        TextMemberPath="Name"
                        DisplayMemberPath="Name"
                        ItemsSource="{Binding Employees}"
                        WidthRequest="280">
    ...
</editors:SfAutocomplete>e>   

Step 3: Customize the Dropdown items

Customize the dropdown items of the SfAutocomplete using the ItemTemplate. Add images and button controls within this template.

<editors:SfAutocomplete Placeholder="Enter an employee"
                        TextMemberPath="Name"
                        DisplayMemberPath="Name"
                        ItemsSource="{Binding Employees}"
                        WidthRequest="280">
    <editors:SfAutocomplete.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout HeightRequest="50"
                                   Spacing="10"
                                   Padding="0,5">
                <Image Source="{Binding Image}"
                       Aspect="AspectFit"/>
                <Button Text="{Binding Name}"
                        WidthRequest="220"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </editors:SfAutocomplete.ItemTemplate>
</editors:SfAutocomplete>

Download the complete sample from GitHub.

Output

Conclusion
I hope you enjoyed learning how to add images and buttons to the dropdown items of the .NET MAUI Autocomplete [SfAutocomplete].

For more features, visit our .NET MAUI Autocomplete’s feature tour and the .NET MAUI Autocomplete documentation.

For current customers, access our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial for an experience with .NET MAUI Autocomplete and other components.

For questions or clarification, comment below or contact us via our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!