How to add a search icon in .NET MAUI Autocomplete?

4 mins read

This article shows how to integrate a search icon into the .NET MAUI Autocomplete control. By incorporating a search icon, you can enhance the user experience and allow for quick searches directly from the Autocomplete input.

While the Autocomplete control does not have built-in support for adding a custom icon, we can use a workaround for the Autocomplete control at the sample level. In our provided sample, we disable the Autocomplete border by setting ShowBorder to False. Then, we encapsulate the Autocomplete control and a Label within a Border to create a customized Autocomplete featuring the desired icon. Here’s how to achieve this:

XAML

<VerticalStackLayout Spacing="10" Padding="20">
    <!-- Title Label -->
    <Label Text="AutoComplete With Search Icon" 
           HorizontalOptions="Center"
           FontSize="14"
           FontAttributes="Bold"/>

    <!-- AutoComplete with Search Icon -->
    <Border  
        WidthRequest="270" 
        StrokeShape="RoundRectangle 6" 
        StrokeThickness="1" 
        Stroke="LightGray"
        BackgroundColor="White"
        HorizontalOptions="Center">

        <Grid ColumnDefinitions="*,40">
            <!-- SfAutocomplete -->
            <editors:SfAutocomplete ShowBorder="False"
                                     IsClearButtonVisible="False"
                                     x:Name="autocomplete"
                                     BackgroundColor="Transparent"
                                     DisplayMemberPath="Name"
                                     DropdownWidth="270"
                                     ItemsSource="{Binding SocialMedias}"
                                     VerticalOptions="Center"/>

            <!-- Search Icon -->
            <Label Text="" 
                   Grid.Column="1" 
                   FontSize="20"  
                   VerticalTextAlignment="Center" 
                   HorizontalTextAlignment="Center"
                   FontFamily="MaterialDesignIcons"
                   TextColor="Gray"
                   BackgroundColor="Transparent">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </Label.GestureRecognizers>
            </Label>
        </Grid>
    </Border>
</VerticalStackLayout>

private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
    // You can perform your search operation here
    DisplayAlert("Search Text", $"You searched for: {autocomplete.Text}", "OK");
}

Output:

Download the complete sample from the GitHub.

Conclusion

In this example, you learned how to incorporate a search icon into the .NET MAUI Autocomplete control. The icon can trigger a search action, improving the functionality of your application.

You can refer to our .NET MAUI Autocomplete’s feature tour page to learn about its other innovative features. For more information on data presentation and manipulation, explore our .NET MAUI Autocomplete documentation.

If you are a current customer, you can access our .NET MAUI components from the License and Downloads page. New users can try our 30-day free trial to explore the .NET MAUI Autocomplete and other components.

Feel free to leave any questions or requests for clarification in the comments section below. You can also reach us through our support forums, Direct-Trac, or feedback portal. We’re always here to help!

Let me know if you need any further adjustments!

Did you find this information helpful?

Yes

Comments (0)

How to add a search icon in .NET MAUI Autocomplete?

Access denied