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:
|
