Category / Section
How to customise the token in AutoComplete
2 mins read
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:
|