)
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: June 24, 2019).
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 |
Published Date: February 28, 2018 |
Last Revised Date: June 21, 2019

 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.

token.

  • 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

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:autocomplete="clr-namespace:Syncfusion.SfAutoComplete.XForms;assembly=Syncfusion.SfAutoComplete.XForms"
xmlns:local="clr-namespace:autocomplete" x:Class="autocomplete.autocompletePage">
<ContentPage.Content>
  <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}">
    </autocomplete:SfAutoComplete>
  </StackLayout>
</ContentPage.Content>
</ContentPage>
 
 

 

C#

namespace autocomplete
{
public partial class autocompletePage : ContentPage
{
    EmployeeViewModel vm = new EmployeeViewModel();
    public autocompletePage()
    {
        InitializeComponent();
 
        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.
ADD COMMENT
You must log in to leave a comment
Comments
pau
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

Reply
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.

https://www.syncfusion.com/feedback/6293/load-images-from-url-in-sfautocomplete

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

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
Live Chat Icon