RadAutoCompleteView Custom Templates

The Custom Templates is part of Telerik UI for Xamarin, a professional grade UI component library for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Overview

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

• NoResults Template(DataTemplate): Defines the template visualised when there are no suggestions found.
• ShowMore Template(DataTemplate) for Tokens Support: Defines the template used to create show more view when DisplayMore="Tokens".
• Loading Template(DataTemplate) for Remote Search functionality: Defines the loading message in RemoteSearch state.
• Tokens Template(DataTemplate) for Tokens Support: Defines the template used to vizualize the tokens.
• SuggestionItem Template(DataTemplate): Defines the template that will be used to create each of the suggestions.
• SuggestionView Template(DataTemplate): Defines the template used to visualize the filtered items.

Example

NoResults Template

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

<telerikInput:RadAutoCompleteView.NoResultsTemplate>
    <DataTemplate>
        <Label Text="No match was found for the specific search. Please try again."/>
    </DataTemplate>
</telerikInput:RadAutoCompleteView.NoResultsTemplate>

ShowMore Template

XAML definition of ShoWMore Template:

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

A sample NoResult and ShowMore Template example can be found in the AutoCompleteView/Features/Tokens folder of the SDK Samples Browser application.

Loading Template

XAML definition of the Loading Template:

<telerikInput:RadAutoCompleteView.LoadingTemplate>
    <DataTemplate>
        <StackLayout Orientation="Horizontal"
                        HorizontalOptions="Center"
                        Margin="0, 20, 0, 20">
            <Label Text="Searching... " FontSize="16" TextColor="#8E8E93"/>
            <telerikPrimitives:RadBusyIndicator x:Name="busyIndicator" 
                                                HeightRequest="24" 
                                                WidthRequest="24"
                                                IsBusy="True"
                                                VerticalOptions="Start"
                                                AnimationContentColor="Accent"
                                                AnimationType="Animation9"/>
        </StackLayout>
    </DataTemplate>
</telerikInput:RadAutoCompleteView.LoadingTemplate>

A sample Loading Template definition can be found in the AutoCompleteView/Features/RemoteSearch folder of the SDK Samples Browser application.

See Also

• Token Template
• SuggestionItem Template
• SuggestionView Template