.NET MAUI AutoComplete Templates

Telerik Maui Ninja image

The Templates is part of Telerik UI for .NET MAUI, the most comprehensive UI suite for .NET MAUI! To try it out, sign up for a free 30-day trial and kickstart your cross-platform app development today.

Overview

If the default templates of the control do not suit your needs, you can define a custom template. The available templates for customizing are:

  • NoResultsTemplate(DataTemplate)—Defines the template visualized when there are no suggestions found.
  • ShowMoreTemplate(DataTemplate) for Tokens Support—Defines the template used to create show more view when DisplayMore="Tokens".
  • LoadingTemplate(DataTemplate) for Remote Search functionality—Defines the loading message in RemoteSearch state.
  • TokensTemplate(DataTemplate) for Tokens Support—Defines the template used to visualize the tokens.
  • SuggestionItemTemplate(DataTemplate)—Defines the template that will be used to create each of the suggestions.
  • SuggestionViewTemplate(DataTemplate)—Defines the template used to visualize the filtered items.

Example

NoResults Template

Here is an example how the NoResults Template can be defined:

<telerik:RadAutoComplete.NoResultsTemplate>
    <DataTemplate>
        <Label Text="No match was found for the specific search. Please try again."
                HorizontalOptions="Center"
                VerticalOptions="Center"/>
    </DataTemplate>
</telerik:RadAutoComplete.NoResultsTemplate>

ShowMore Template

XAML definition of ShoWMore Template:

<telerik:RadAutoComplete.ShowMoreTemplate>
    <DataTemplate>
        <Label Text="{Binding Path=., StringFormat='+{0} more'}" 
               VerticalTextAlignment="Center" />
    </DataTemplate>
</telerik:RadAutoComplete.ShowMoreTemplate>

Loading Template

XAML definition of the Loading Template:

<telerik:RadAutoComplete.LoadingTemplate>
    <DataTemplate>
        <HorizontalStackLayout HorizontalOptions="Center"
                                Margin="0, 20, 0, 20">
            <Label Text="Searching... " 
                    FontSize="16" 
                    TextColor="#8E8E93"/>
            <telerik:RadBusyIndicator x:Name="busyIndicator" 
                                        HeightRequest="24" 
                                        WidthRequest="24"
                                        IsBusy="True"
                                        VerticalOptions="Start"
                                        AnimationContentColor="#8660C5"
                                        AnimationType="Animation9"/>
        </HorizontalStackLayout>
    </DataTemplate>
</telerik:RadAutoComplete.LoadingTemplate>

See Also

In this article