How to customize the appearance of dropdown in .NET MAUI Autocomplete?

This article guides you on how to customize the appearance of the drop-down for the .NET MAUI Autocomplete control in a .NET MAUI application using Theme keys. The customization includes setting the border color and thickness, the selection background color, and the font size for the drop-down items. Below is an example of how to customize the SfAutoComplete drop-down using Theme keys.

XAML

<ContentPage 
 xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
 xmlns:themes="clr-namespace:Syncfusion.Maui.Core.Themes;assembly=Syncfusion.Maui.Inputs">
 
    <ContentPage.BindingContext>
        <local:EmployeeViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <themes:SfAutocompleteStyles></themes:SfAutocompleteStyles>
            <ResourceDictionary>
                <x:String x:Key="SfAutoCompleteTheme">CommonTheme</x:String>
                <x:Double x:Key="SfAutocompleteNormalDropdownStrokeThickness">5</x:Double>
                <x:Double x:Key="SfAutocompleteNormalDropdownItemsFontSize">22</x:Double>
                <Color x:Key="SfAutocompleteDropdownBorder">Pink</Color>
                <Color x:Key="SfAutocompleteNormalDropdownSelectionBackground">Brown</Color>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</ContentPage.Resources>

    <StackLayout Spacing="10" VerticalOptions="Center">
        <editors:SfAutocomplete Placeholder="Enter an employee"
                                TextMemberPath="Name"
                                DisplayMemberPath="Name"
                                ItemsSource="{Binding Employees}"
                                WidthRequest="300"
                                HeightRequest="40" 
                                x:Name="autoComplete">
        </editors:SfAutocomplete>
    </StackLayout>
</ContentPage>

Theme keys details

• SfAutocompleteNormalDropdownStrokeThickness: Sets the stroke thickness of the dropdown border.

• SfAutocompleteNormalDropdownItemsFontSize: Sets the font size of the dropdown items.

• SfAutocompleteDropdownBorder: Sets the color of the dropdown border.

• SfAutocompleteNormalDropdownSelectionBackground: Sets the background color of the selected item in the dropdown.

Output

Conclusion

I hope you enjoyed learning how to customize the appearance of dropdown in .NET MAUI AutoComplete.

You can refer to the .NET MAUI Autocomplete feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Autocomplete example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

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