We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customise the token in AutoComplete

Platform: Xamarin.Forms |
Control: SfAutoComplete

 Auto complete provides support for customizing tokens when selecting multiple items.


To customize tokens :


Step 1:   Add the required assemblies to get the view of AutoComplete.

Step 2: Set the MultiSelectMode to Token. Token representation consists of two modes to wrap the selected items. They are Wrap and None.


  • Wrap - When `TokensWrapMode` is set to `Wrap` the selected items will be wrap to the next line of the SfAutoComplete.
  • None - When `TokensWrapMode` is set to `None` the selected item will be wrap in horizontal orientation.


Step 3: We can customise the token with various properties associated with it. The below are the list of properties that are used for customizing the tokens.


  • FontFamily -  sets the Font family for the text inside the token.


  • BackgroundColor - sets the background color of the token.


  • SelectedBackgroundColor - sets the background color of the token when it is selected.


  • IsCloseButtonVisible - Enables and disables the close button inside SfAutoComplete.


  • DeleteButtonColor - sets the color of the close button inside SfAutoComplete.


  • CornerRadius - sets the corner radius for the token
  • FontSize – sets the Text size for the topken



Step 4: Create the instance for TokenSettings class and enable the above properties for customizing the tokens on it.


The following code illustrates how to achieve this method.



<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:autocomplete" x:Class="autocomplete.autocompletePage">
  <StackLayout VerticalOptions="Start" HorizontalOptions="Start" Padding="30">
    <autocomplete:SfAutoComplete HeightRequest="40" x:Name="autoComplete" DropDownItemHeight="50" DisplayMemberPath="Name" ImageMemberPath="Image" MultiSelectMode="Token" TokensWrapMode="Wrap" DataSource="{Binding EmployeeCollection}">



namespace autocomplete
public partial class autocompletePage : ContentPage
    EmployeeViewModel vm = new EmployeeViewModel();
    public autocompletePage()
        TokenSettings tokensetting = new TokenSettings();
        tokensetting.FontSize = 16;
        tokensetting.BackgroundColor = Color.FromHex("#d3d3d3");
        tokensetting.TextColor = Color.Red;
        tokensetting.SelectedBackgroundColor = Color.FromHex("#ffffe0");
        tokensetting.DeleteButtonColor = Color.Brown;
        tokensetting.IsCloseButtonVisible = true;
        tokensetting.CornerRadius = 3;
        autoComplete.TokenSettings = tokensetting;
        this.BindingContext = vm;
public class Employee
    private string image;
    public string Image
        get { return image; }
        set { image = value; }
    private string name;
    public string Name
        get { return name; }
        set { name = value; }
public class EmployeeViewModel
    private ObservableCollection<Employee> employeeCollection;
    public ObservableCollection<Employee> EmployeeCollection
        get { return employeeCollection; }
        set { employeeCollection = value; }
    public EmployeeViewModel()
        employeeCollection = new ObservableCollection<Employee>();
        employeeCollection.Add(new Employee() { Image = "a0.png", Name = "John" });
        employeeCollection.Add(new Employee() { Image = "a1.png", Name = "James" });
        employeeCollection.Add(new Employee() { Image = "a2.png", Name = "Jacob" });
        employeeCollection.Add(new Employee() { Image = "a3.png", Name = "Joy" });
        employeeCollection.Add(new Employee() { Image = "a4.png", Name = "Justin" });
        employeeCollection.Add(new Employee() { Image = "a5.png", Name = "Jerome" });
        employeeCollection.Add(new Employee() { Image = "b0.png", Name = "Jessica" });
        employeeCollection.Add(new Employee() { Image = "b1.png", Name = "Victoria" });



Image after customizing token:




  C:\Users\prabhakaran.palanisa\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screen Shot 2018-02-28 at 2.49.02 PM.PNG




2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
May 10, 2019

Hi, Is it possible that instead of ImageMemberPath reading local images, read images that are on the web? Like this by example: https://image.flaticon.com/icons/svg/70/70965.svg or this https://image.flaticon.com/icons/png/512/33/33447.png

Muneesh Kumar G [Syncfusion]
May 13, 2019

Hi Pau,

We have checked your requirement from our side and in our current implementation, we currently do not have "Support for loading images from URL". We have logged a feature report for the same. You can find the feedback link details from below.


Please cast your vote to make it count. We will prioritize the features every release based on the demands.

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.

Regards, Muneesh Kumar G

Nov 19, 2021

Hi, is it possible to set the token's backgroud color individually? A would expect BackgroundColorMemberPath property to be available. A also tried this:

  <autocomplete:TokenSettings BackgroundColor="{Binding Color}"/>

But it looks like token settings propertiest are not bindable.

Thank you.

Nov 26, 2021

Hi, Is it possible that instead of ImageMemberPath reading resource images, read images that are on the local app data directory? Like this by example on Android: /data/user/0/myapp/cache/ColorImages/de14de.png or this /data/user/0/myapp/files/ColorImages/de14de.png


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile