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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customise the token in AutoComplete

 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.


XAML code to customize token:



Code behind code:




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




Article ID: Published Date: Last Revised Date: Platform: Control:
8517 02/28/2018 03/06/2018 Xamarin.Forms SfAutoComplete
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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