Customization in .NET MAUI Chips

4 Aug 202624 minutes to read

The .NET MAUI Chips controls support customizing the background color, border color, close button color, selection indicator, text, icons, and more. This page documents the customization properties for both SfChip and SfChipGroup.

  • For SfChipGroup samples that bind ItemsSource to Employees, set the page’s BindingContext to a ViewModel that exposes an ObservableCollection<Employee> (see the Populating Items page for a complete model and ViewModel).
  • For samples that reference an image (e.g., ChipUserContact.png, lion.png, john.png), add the image to the Resources/Images folder of your .NET MAUI project and register it as a MauiImage in the .csproj file.

Prerequisites

Before using the SfChip, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

SfChip Customization

The following properties customize the appearance of an individual SfChip.

ShowCloseButton

The ShowCloseButton property sets the visibility of the close button in SfChip. The default value is false.

<chip:SfChip Text="James"
             ShowCloseButton="True" />
SfChip chip = new SfChip
{
    Text = "James",
    ShowCloseButton = true
};

SfChip with CloseButton

ShowSelectionIndicator

The ShowSelectionIndicator property sets the visibility of the selection indicator in SfChip. The default value is false.

<chip:SfChip Text="James"
             ShowSelectionIndicator="True" />
SfChip chip = new SfChip
{
    Text = "James",
    ShowSelectionIndicator = true
};

SfChip with ShowSelectionIndicator

CloseButtonColor

The CloseButtonColor property customizes the color of the close button in SfChip. The default value is Color.FromArgb("#1C1B1F").

<chip:SfChip Text="James"
             ShowCloseButton="True"
             CloseButtonColor="Red" />
SfChip chip = new SfChip
{
    Text = "James",
    ShowCloseButton = true,
    CloseButtonColor = Colors.Red
};

SfChip with CloseButtonColor

SelectionIndicatorColor

The SelectionIndicatorColor property customizes the selection indicator color in SfChip. The default value is Color.FromArgb("#49454F").

<chip:SfChip Text="James"
             ShowSelectionIndicator="True"
             SelectionIndicatorColor="Yellow" />
SfChip chip = new SfChip
{
    Text = "James",
    ShowSelectionIndicator = true,
    SelectionIndicatorColor = Colors.Yellow
};

SfChip with SelectionIndicatorColor

Background

The Background property customizes the background color of SfChip.

<chip:SfChip Text="James"
             Background="LightCoral" />
SfChip chip = new SfChip
{
    Text = "James",
    Background = Colors.LightCoral
};

SfChip with Background

Stroke

The Stroke property customizes the border color of SfChip.

<chip:SfChip Text="James"
             Stroke="Black" />
SfChip chip = new SfChip
{
    Text = "James",
    Stroke = Colors.Black
};

SfChip with Stroke

StrokeThickness

The StrokeThickness property customizes the border thickness of SfChip on all four sides.

<chip:SfChip Text="James"
             StrokeThickness="7"
             Stroke="Black" />
SfChip chip = new SfChip
{
    Text = "James",
    StrokeThickness = 7,
    Stroke = Colors.Black
};

SfChip with StrokeThickness

CornerRadius

The CornerRadius property customizes the corner radius of SfChip. The default value is new CornerRadius(8).

<chip:SfChip Text="James"
             CornerRadius="25"
             Stroke="Black" />
SfChip chip = new SfChip
{
    Text = "James",
    CornerRadius = 25,
    Stroke = Colors.Black
};

SfChip with CornerRadius

FontAttributes

The FontAttributes property customizes the font style of the text in SfChip.

<chip:SfChip Text="James"
             FontAttributes="Italic" />
SfChip chip = new SfChip
{
    Text = "James",
    FontAttributes = FontAttributes.Italic
};

SfChip with FontAttributes

FontFamily

The FontFamily property customizes the font family of the text in SfChip.

<chip:SfChip Text="James"
             FontFamily="Times New Roman" />
SfChip chip = new SfChip
{
    Text = "James",
    FontFamily = "Times New Roman"
};

SfChip with FontFamily

FontSize

The FontSize property customizes the size of the text in SfChip. The default value is 14d.

<chip:SfChip Text="James"
             FontSize="15" />
SfChip chip = new SfChip
{
    Text = "James",
    FontSize = 15
};

SfChip with FontSize

TextColor

The TextColor property customizes the color of the text in SfChip. The default value is Color.FromArgb("#49454F").

<chip:SfChip Text="James"
             TextColor="Red" />
SfChip chip = new SfChip
{
    Text = "James",
    TextColor = Colors.Red
};

SfChip with TextColor

TextAlignment

The HorizontalTextAlignment and VerticalTextAlignment properties customize the alignment of the text in SfChip. The default values for both are TextAlignment.Center.

<chip:SfChip Text="James"
             ShowCloseButton="True"
             HorizontalTextAlignment="Start"
             VerticalTextAlignment="Center" />
SfChip chip = new SfChip
{
    Text = "James",
    ShowCloseButton = true,
    HorizontalTextAlignment = TextAlignment.Start,
    VerticalTextAlignment = TextAlignment.Center
};

SfChip with TextAlignment

ShowIcon

The ShowIcon property specifies whether the image set in ImageSource is displayed in the SfChip. The default value is false.

<chip:SfChip Text="James"
             ImageSource="ChipUserContact.png"
             ShowIcon="True" />
SfChip chip = new SfChip
{
    Text = "James",
    ImageSource = "ChipUserContact.png",
    ShowIcon = true
};

SfChip with ShowIcon

ImageSource

The ImageSource property customizes the icon image of SfChip by adding a custom image. ShowIcon must be true for the image to render.

<chip:SfChip Text="James"
             ImageSource="ChipUserContact.png"
             ShowIcon="True" />
SfChip chip = new SfChip
{
    Text = "James",
    ImageSource = "ChipUserContact.png",
    ShowIcon = true
};

SfChip with ImageSource

ImageSize

The ImageSize property customizes the size of the icon image in SfChip. ShowIcon must be true for the size to apply. The default value is 18d.

<chip:SfChip Text="James"
             ImageSource="ChipUserContact.png"
             ImageSize="30"
             ShowIcon="True" />
SfChip chip = new SfChip
{
    Text = "James",
    ImageSource = "ChipUserContact.png",
    ImageSize = 30,
    ShowIcon = true
};

SfChip with ImageSize

ImageAlignment

The ImageAlignment property customizes the alignment of the icon image in SfChip. The default value is Alignment.Start.

<chip:SfChip Text="James"
             ImageSource="ChipUserContact.png"
             ImageAlignment="End"
             ShowIcon="True" />
SfChip chip = new SfChip
{
    Text = "James",
    ImageSource = "ChipUserContact.png",
    ImageAlignment = Alignment.End,
    ShowIcon = true
};

SfChip with ImageAlignment

BackgroundImageSource

The BackgroundImageSource property customizes the background image of SfChip.

<chip:SfChip BackgroundImageSource="lion.png" />
SfChip chip = new SfChip
{
    BackgroundImageSource = "lion.png"
};

SfChip with image property

Command

The Command property associates a command with an instance of SfChip. This property is most often set with the MVVM pattern to bind callbacks back into the ViewModel. You can also pass a CommandParameter.

<chip:SfChip x:Name="Chip"
             Text="James"
             WidthRequest="120"
             Background="{Binding Background}"
             Command="{Binding ButtonCommand}" />
public class CommandDemoViewModel : INotifyPropertyChanged
{
    private Color _background = Colors.Violet;

    public Color Background
    {
        get => _background;
        set
        {
            _background = value;
            OnPropertyChanged();
        }
    }

    public ICommand ButtonCommand => new Command(ToggleBackground);

    public CommandDemoViewModel() => Background = Colors.Violet;

    private void ToggleBackground()
    {
        Background = Background == Colors.DeepSkyBlue ? Colors.Violet : Colors.DeepSkyBlue;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string name = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChip with Command

SfChipGroup Customization

The chip group supports customizing the chip’s background color, border color, text color, and more. The chip group can be customized using the following properties.

InputView

The InputView property provides a view to the input chip. In this example, an Entry is added as the InputView so users can type a new chip’s text. The InputView is only visible for the Input ChipType. The default value is null.

<chip:SfChipGroup x:Name="chipGroup"
                  ItemsSource="{Binding Employees}"
                  ChipPadding="8,8,0,0"
                  ChipType="Input"
                  DisplayMemberPath="Name">
    <chip:SfChipGroup.InputView>
        <Entry x:Name="entry"
               Placeholder="Enter Name"
               Margin="10,10,0,0"
               WidthRequest="110" />
    </chip:SfChipGroup.InputView>
</chip:SfChipGroup>
var entry = new Entry
{
    Placeholder = "Enter Name",
    Margin = new Thickness(10, 10, 0, 0),
    WidthRequest = 110
};

var chipGroup = new SfChipGroup
{
    InputView = entry,
    DisplayMemberPath = "Name",
    ChipPadding = new Thickness(8, 8, 0, 0),
    ChipType = SfChipsType.Input
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with InputView

ChipBackground

The ChipBackground property customizes the background color of the unselected chips in SfChipGroup. The default value is Colors.Transparent.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipTextColor="White"
                  CloseButtonColor="White"
                  ChipBackground="#512dcd" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipBackground = Color.FromArgb("#512dcd"),
    ChipTextColor = Colors.White,
    CloseButtonColor = Colors.White
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
this.Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipBackground

To customize the background color of the selected chip, set ChipType="Choice" or ChipType="Filter" and use the VisualStateManager:

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipType="Choice">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="ChipBackground" 
                            Value="White" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Selected">
                <VisualState.Setters>
                    <Setter Property="ChipBackground" 
                            Value="#502cd5" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</chip:SfChipGroup>
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipType = SfChipsType.Choice
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");

var visualStateGroupList = new VisualStateGroupList();
var commonStateGroup = new VisualStateGroup();

var normalState = new VisualState { Name = "Normal" };
normalState.Setters.Add(new Setter { Property = SfChipGroup.ChipBackgroundProperty, Value = Colors.White });

var selectedState = new VisualState { Name = "Selected" };
selectedState.Setters.Add(new Setter { Property = SfChipGroup.ChipBackgroundProperty, Value = Color.FromArgb("#502cd5") });

commonStateGroup.States.Add(normalState);
commonStateGroup.States.Add(selectedState);
visualStateGroupList.Add(commonStateGroup);
VisualStateManager.SetVisualStateGroups(chipGroup, visualStateGroupList);
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with SelectedChipBackground

SelectedChipBackground

The SelectedChipBackground property customizes the background color of the selected chips in Filter and Choice ChipType values, without using a VisualState.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipTextColor="White"
                  ChipBackground="#512dcd"
                  ChipType="Filter"
                  SelectedChipBackground="#E8DEF8" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipBackground = Color.FromArgb("#512dcd"),
    ChipTextColor = Colors.White,
    ChipType = SfChipsType.Filter,
    SelectedChipBackground = Color.FromArgb("#E8DEF8")
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with SelectedChipBackground

ChipTextColor

The ChipTextColor property customizes the text color of the unselected chips in SfChipGroup. The default value is Color.FromArgb("#49454F").

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipTextColor="Red" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipTextColor = Colors.Red
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipTextColor

To customize the text color of the selected chip, set ChipType="Choice" or ChipType="Filter" and use the VisualStateManager:

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipType="Choice">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="ChipTextColor" 
                            Value="Black" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Selected">
                <VisualState.Setters>
                    <Setter Property="ChipTextColor" 
                            Value="Green" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</chip:SfChipGroup>
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipType = SfChipsType.Choice
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");

var visualStateGroupList = new VisualStateGroupList();
var commonStateGroup = new VisualStateGroup();

var normalState = new VisualState { Name = "Normal" };
normalState.Setters.Add(new Setter { Property = SfChipGroup.ChipTextColorProperty, Value = Colors.Black });

var selectedState = new VisualState { Name = "Selected" };
selectedState.Setters.Add(new Setter { Property = SfChipGroup.ChipTextColorProperty, Value = Colors.Green });

commonStateGroup.States.Add(normalState);
commonStateGroup.States.Add(selectedState);
visualStateGroupList.Add(commonStateGroup);
VisualStateManager.SetVisualStateGroups(chipGroup, visualStateGroupList);
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with SelectedChipTextColor

SelectedChipTextColor

The SelectedChipTextColor property customizes the text color of the selected chips in Filter and Choice ChipType values, without using a VisualState. The default value is Color.FromArgb("#1D192B").

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipBackground="LightGray"
                  ChipType="Filter"
                  SelectionIndicatorColor="White"
                  SelectedChipBackground="#512dcd"
                  SelectedChipTextColor="White" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipBackground = Colors.LightGray,
    ChipType = SfChipsType.Filter,
    SelectionIndicatorColor = Colors.White,
    SelectedChipBackground = Color.FromArgb("#512dcd"),
    SelectedChipTextColor = Colors.White
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with SelectedChipTextColor

ChipStroke

The ChipStroke property customizes the border color of the chips in SfChipGroup. The default value is Color.FromArgb("#79747E").

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipStroke="Red"
                  ChipBackground="LightYellow" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipStroke = Colors.Red,
    ChipBackground = Colors.LightYellow
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipStroke

ChipTextSize

The ChipTextSize property customizes the text size of the chips in SfChipGroup. The default value is 14d.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipTextSize="10" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipTextSize = 10
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipTextSize

ChipFontAttributes

The ChipFontAttributes property customizes the font style of the chip text in SfChipGroup. The default value is FontAttributes.None.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipFontAttributes="Bold"
                  ChipType="Choice" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipType = SfChipsType.Choice,
    ChipFontAttributes = FontAttributes.Bold
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipFontAttributes

ChipFontFamily

The ChipFontFamily property customizes the font family of the chip text in SfChipGroup. The default value is string.Empty.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipFontFamily="OpenSans-Semibold" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipFontFamily = "OpenSans-Semibold"
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipFontFamily

ChipPadding

The ChipPadding property sets the spacing between each chip in SfChipGroup.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  DisplayMemberPath="Name"
                  ChipPadding="8,0,0,0" />
SfChipGroup chipGroup = new SfChipGroup
{
    ChipPadding = new Thickness(8, 0, 0, 0),
    DisplayMemberPath = "Name"
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipPadding

ChipStrokeThickness

The ChipStrokeThickness property customizes the border width of the chips in SfChipGroup. The default value is 1d.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  ChipStrokeThickness="7"
                  DisplayMemberPath="Name"
                  ChipStroke="Red" />
SfChipGroup chipGroup = new SfChipGroup
{
    ChipStrokeThickness = 7,
    DisplayMemberPath = "Name",
    ChipStroke = Colors.Red
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipStrokeThickness

ChipLayout

The SfChipGroup creates a chip for each item and arranges the chips in a StackLayout with horizontal orientation by default. Use the ChipLayout property to provide a custom layout (such as a FlexLayout) for the chips.

<Grid>
    <chip:SfChipGroup DisplayMemberPath="Name" 
                      ItemsSource="{Binding Employees}">
        <chip:SfChipGroup.ChipLayout>
            <FlexLayout HorizontalOptions="Start"
                        VerticalOptions="Center" />
        </chip:SfChipGroup.ChipLayout>
    </chip:SfChipGroup>
</Grid>
var layout = new FlexLayout
{
    HorizontalOptions = LayoutOptions.Start,
    VerticalOptions = LayoutOptions.Center
};

var chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ChipLayout = layout
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");

Content = new Grid
{
    Children = { chipGroup }
};
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

ItemHeight

The ItemHeight property customizes the height of the items in SfChipGroup.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  ItemHeight="60"
                  DisplayMemberPath="Name" />
BindingContext = new EmployeeViewModel();
SfChipGroup chipGroup = new SfChipGroup
{
    ItemHeight = 60,
    DisplayMemberPath = "Name"
};
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ItemHeight

ShowIcon

The ShowIcon property specifies whether any image is displayed on the chips in SfChipGroup. The default value is false.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  ChipPadding="8,8,0,0"
                  ImageMemberPath="Image"
                  ChipImageSize="30"
                  ShowIcon="True"
                  DisplayMemberPath="Name" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ImageMemberPath = "Image",
    ChipImageSize = 30,
    ShowIcon = true,
    ChipPadding = new Thickness(8, 8, 0, 0)
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
public class Person
{
    public string Name { get; set; }
    public string Image { get; set; }
}

public class ChipsViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Person> employees;

    public ObservableCollection<Person> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public ChipsViewModel()
    {
        Employees = new ObservableCollection<Person>
        {
            new Person { Image = "jhon.png", Name = "John" },
            new Person { Image = "james.png", Name = "James" },
            new Person { Image = "alexandar.png", Name = "Alexandar" },
            new Person { Image = "liam.png", Name = "Liam" }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ShowIcon

CloseButtonColor

The CloseButtonColor property customizes the color of the close button in SfChipGroup.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  CloseButtonColor="Red"
                  ChipBackground="LightYellow"
                  DisplayMemberPath="Name" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    CloseButtonColor = Colors.Red
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with CloseButtonColor

SelectionIndicatorColor

The SelectionIndicatorColor property customizes the selection indicator color in SfChipGroup.

<chip:SfChipGroup x:Name="sfChipGroup"
                  ItemsSource="{Binding Employees}"
                  SelectionIndicatorColor="White"
                  DisplayMemberPath="Name" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    SelectionIndicatorColor = Colors.White
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with SelectionIndicatorColor

ChipImageSize

The ChipImageSize property customizes the size of the icon image in SfChipGroup. The default value is 18d.

<chip:SfChipGroup ItemsSource="{Binding Employees}"
                  ImageMemberPath="Image"
                  ChipImageSize="50"
                  ShowIcon="True"
                  DisplayMemberPath="Name" />
SfChipGroup chipGroup = new SfChipGroup
{
    DisplayMemberPath = "Name",
    ImageMemberPath = "Image",
    ChipImageSize = 50,
    ShowIcon = true
};
BindingContext = new EmployeeViewModel();
chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, "Employees");
Content = chipGroup;
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

SfChipGroup with ChipImageSize

IsSelected

The IsSelected property of SfChip indicates whether a chip is selected in the Choice and Filter ChipType values. Set IsSelected="True" to mark a chip as selected by default.

See Also