How to add Image and label in the Drop-down Item in .NET MAUI ComboBox?

The following steps will enable you to successfully integrate images and labels into the drop-down items of the .NET MAUI ComboBox (SfComboBox).

Step 1: Set up the ComboBox Sample with Required Assemblies
Create a sample project that incorporates ComboBox for .NET MAUI. Ensure you include all the necessary assemblies to ensure seamless integration.

XAML

<editors:SfComboBox Placeholder="Select an employee"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name"            
                    ItemsSource="{Binding Employees}"
                    WidthRequest="280"
                    HeightRequest="34">    

Step 2: Include Images in the Designated Folder
Prepare the required images and place them in the designated folder within the project. These images will enhance the visual representation of ComboBox items in the drop-down list.

Step 3: Define the Model Class
Craft a Model class that will hold the properties required for assignment to ComboBox items. This class should involve the necessary attributes, such as name and image references, which contribute to the appearance of each item.

Model

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

Step 4: Implement the ViewModel
Create a ViewModel class named EmployeeViewModel within the project. Then, define the Employees property that holds the list of employee details.

ViewModel:

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",});
       Employees.Add(new Employee{Name = "Andrew Fuller", ProfilePicture = "people_circle2.png",});
       Employees.Add(new Employee{Name = "Emilio Alvaro", ProfilePicture = "people_circle4.png",});
       Employees.Add(new Employee{Name = "Janet Laverl",  ProfilePicture = "people_circle5.png",});
       Employees.Add(new Employee{Name = "Laura Challehan",ProfilePicture = "people_circle7.png",});
    }
}

Step 5: Bind the Image within the ItemTemplate
After creating the sample in XAML, place the ItemTemplate within the ComboBox. Add image and label tags in this template, and bind the profile picture and name respectively.
XAML:

        <editors:SfComboBox.ItemTemplate>
            <DataTemplate >
                <ViewCell>
                      <HorizontalStackLayout HeightRequest="60"
                                             Spacing="5"
                                             VerticalOptions="Center"
                                             HorizontalOptions="Start">
                          <Image HorizontalOptions="Center"
                                 VerticalOptions="Center"
                                 Source="{Binding ProfilePicture}" />                                                                          
                          <Label HorizontalTextAlignment="Start"
                                 VerticalTextAlignment="Center"                                 
                                 Text="{Binding Name}"/>
                    </HorizontalStackLayout>                                             
                </ViewCell>
            </DataTemplate>
        </editors:SfComboBox.ItemTemplate>    

Output

Conclusion
I hope you enjoyed learning how to add images and labels in the dropdown item in .NET MAUI ComboBox (SfComboBox).

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

For current customers, check out our .NET MAUI components from the License and download page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI ComboBox 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!