New to Telerik UI for Xamarin? Download free 30-day trial

Suggestion Items Customization

SuggestionItem Template

Whenever the default template does not fit a particular scenario you can use the SuggestionItemTemplate property to define a custom template.

  • SuggestionItemTemplate (DataTemplate): Defines the template that will be used to create each of the suggestions.
  • SuggestionItemTextColor: Defines the Text Color of the suggested item of the component.


Here is an example how to use the RadAutoCompleteView SuggestionItemTemplate:

First, create the needed business objects, for example type Client with the following properties:

public class Client
    public Client(string name, string email, string imageSource)
        this.Name = name;
        this.Email = email;
        this.ImageSource = imageSource;
    public string Name { get; set; }
    public string Email { get; set; }
    public string ImageSource { get; set; }

Then create a ViewModel with a collection of Client objects:

public class ViewModel
    public ObservableCollection<Client> Source { get; set; }
    public ViewModel()
        this.Source = new ObservableCollection<Client>()
            new Client("Freda Curtis", "", "available32.png"),
            new Client("Jeffery Francis", "", "away32.png"),
            new Client("Eva Lawson", "", "available32.png"),
            new Client("Emmett Santos", "", "busy32.png"),
            new Client("Theresa Bryan", "", "available32.png"),
            new Client("Jenny Fuller", "", "busy32.png"),
            new Client("Terrell Norris", "", "away32.png"),
            new Client("Eric Wheeler", "", "away32.png"),
            new Client("Nida Carty", "", "away32.png"),
            new Client("Niki Samaniego", "", "busy32.png")

Finally, use the following snippet to declare a RadAutoCompleteView in XAML:

<telerikInput:RadAutoCompleteView x:Name="AutoComplete"
                                  ItemsSource="{Binding Source}"
                                  Watermark="Search here...">
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    <Label Margin="5"
                           Text="{Binding Name}"
                    <Image Grid.Column="1"
                           Source="{Binding ImageSource}"

Where the telerikInput namespace is the following:


Here is the result:

AutoCompleteView SuggestionItemTemplate Example

A sample SuggestionItemTemplate example can be found in the AutoCompleteView/Features folder of the SDK Samples Browser application.

See Also

In this article