Class SfChipGroup

Represents a grouping control which adds SfChip control to a layout and grouped them for selection.

Inheritance
System.Object
SfChipGroup
Namespace: Syncfusion.Maui.Toolkit.Chips
Assembly: Syncfusion.Maui.Toolkit.dll
Syntax
public class SfChipGroup : ContentView, IParentThemeElement, IThemeElement

Constructors

SfChipGroup()

Initializes a new instance of the SfChipGroup class. This is constructor of the SfChipGroup class.

Declaration
public SfChipGroup()

Fields

ChipBackgroundProperty

Identifies the ChipBackground bindable property.

Declaration
public static readonly BindableProperty ChipBackgroundProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipBackground property determines the background color of the chip in the chip group.

ChipCornerRadiusProperty

Identifies the ChipCornerRadius bindable property.

Declaration
public static readonly BindableProperty ChipCornerRadiusProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipCornerRadius property determines the corner radius of the chip in the chip group.

ChipFontAttributesProperty

Identifies the ChipFontAttributes bindable property.

Declaration
public static readonly BindableProperty ChipFontAttributesProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipFontAttributes property determines the font attributes (bold or italic) for the chip text.

ChipFontFamilyProperty

Identifies the ChipFontFamily bindable property.

Declaration
public static readonly BindableProperty ChipFontFamilyProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipFontFamily property determines the font family for the chip in the chip group.

ChipImageSizeProperty

Identifies the ChipImageSize bindable property.

Declaration
public static readonly BindableProperty ChipImageSizeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipImageSize property determines the width and height of the chip image.

ChipLayoutProperty

Identifies the ChipLayout bindable property.

Declaration
public static readonly BindableProperty ChipLayoutProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipLayout property determines the layout for all the chips in the chip group.

ChipPaddingProperty

Identifies the ChipPadding bindable property.

Declaration
public static readonly BindableProperty ChipPaddingProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipPadding property determines the spacing between the chips.

ChipStrokeProperty

Identifies the ChipStroke bindable property.

Declaration
public static readonly BindableProperty ChipStrokeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipStroke property determines the border color of the chip in the chip group.

ChipStrokeThicknessProperty

Identifies the ChipStrokeThickness bindable property.

Declaration
public static readonly BindableProperty ChipStrokeThicknessProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipStrokeThickness property determines the border width of the chips.

ChipTextColorProperty

Identifies the ChipTextColor bindable property.

Declaration
public static readonly BindableProperty ChipTextColorProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipTextColor property determines the text color of the chip in the chip group.

ChipTextSizeProperty

Identifies the ChipTextSize bindable property.

Declaration
public static readonly BindableProperty ChipTextSizeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipTextSize property determines the text size for the chip in the chip group.

ChipTypeProperty

Identifies the ChipType bindable property.

Declaration
public static readonly BindableProperty ChipTypeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChipType property determines the type of the chips in the chip group.

ChoiceModeProperty

Identifies the ChoiceMode bindable property.

Declaration
public static readonly BindableProperty ChoiceModeProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ChoiceMode property determines the choice mode of the chip group.

CloseButtonColorProperty

Identifies the CloseButtonColor bindable property.

Declaration
public static readonly BindableProperty CloseButtonColorProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The CloseButtonColor property determines the color of the close button in the chip.

CommandProperty

Identifies the Command bindable property.

Declaration
public static readonly BindableProperty CommandProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The Command property determines the command to be set for the chip group.

DisplayMemberPathProperty

Identifies the DisplayMemberPath bindable property.

Declaration
public static readonly BindableProperty DisplayMemberPathProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The DisplayMemberPath property determines the member path for the display text in the chip.

ImageMemberPathProperty

Identifies the ImageMemberPath bindable property.

Declaration
public static readonly BindableProperty ImageMemberPathProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ImageMemberPath property determines the member path for the icon image in the chip.

InputViewProperty

Identifies the InputView bindable property.

Declaration
public static readonly BindableProperty InputViewProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The InputView property determines the input view or editor in the Input chip group.

ItemHeightProperty

Identifies the ItemHeight bindable property.

Declaration
public static readonly BindableProperty ItemHeightProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ItemHeight property determines the height of the chips in the group.

ItemsProperty

Identifies the Items bindable property.

Declaration
public static readonly BindableProperty ItemsProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The Items property determines the items to be set in the chip group.

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration
public static readonly BindableProperty ItemsSourceProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ItemsSource property determines the items source for the chip group.

ItemTemplateProperty

Identifies the ItemTemplate bindable property.

Declaration
public static readonly BindableProperty ItemTemplateProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ItemTemplate property determines the custom content for data items in the chip group control.

SelectedChipBackgroundProperty

Identifies the SelectedChipBackground bindable property.

Declaration
public static readonly BindableProperty SelectedChipBackgroundProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The SelectedChipBackground property determines the background color of the selected chip in the chip group.

SelectedChipTextColorProperty

Identifies the SelectedChipTextColor bindable property.

Declaration
public static readonly BindableProperty SelectedChipTextColorProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The SelectedChipTextColor property determines the text color for the selected chip in the chip group.

SelectedItemProperty

Identifies the SelectedItem bindable property.

Declaration
public static readonly BindableProperty SelectedItemProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The SelectedItem property determines the selected item in the Choice chip group.

SelectionIndicatorColorProperty

Identifies the SelectionIndicatorColor bindable property.

Declaration
public static readonly BindableProperty SelectionIndicatorColorProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The SelectionIndicatorColor property determines the color of the selection indicator in the chip.

ShowIconProperty

Identifies the ShowIcon bindable property.

Declaration
public static readonly BindableProperty ShowIconProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The ShowIcon property determines whether the icon is visible in the chip.

Properties

ChipBackground

Gets or sets the value of ChipBackgroundColor. This property can be used to change the background color of the chip in the chip group.

Declaration
public Brush ChipBackground { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.Brush

Specifies the chip background color. The default value is SolidColorBrush(Colors.Transparent).
Examples

Here is an example of how to set the ChipBackground property

<local:SfChipGroup ChipBackground="Yellow" />

ChipCornerRadius

Gets or sets the value of ChipCornerRadius. This property can be used to customize the corners of the chip control.

Declaration
public CornerRadius ChipCornerRadius { get; set; }
Property Value
Type Description
Microsoft.Maui.CornerRadius

Specifies the corner radius. The default value is CornerRadius(8).
Examples

Here is an example of how to set the ChipCornerRadius property

<local:SfChipGroup ChipCornerRadius="10" />

ChipFontAttributes

Gets or sets the value of ChipFontAttributes. This property can be used to change the font of the chip text in either bold or italic in the chip group.

Declaration
public FontAttributes ChipFontAttributes { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.FontAttributes

Specifies the chip text font attributes. The default value is Microsoft.Maui.Controls.FontAttributes.None.
Examples

Here is an example of how to set the ChipFontAttributes property

<local:SfChipGroup ChipFontAttributes="Bold" />

ChipFontFamily

Gets or sets the font family for the chip text.

Declaration
public string ChipFontFamily { get; set; }
Property Value
Type Description
System.String

A System.String representing the font family to be used for the chip text. The default value is string.Empty.
Examples

Here is an example of how to set the ChipFontFamily property

<local:SfChipGroup ChipFontFamily="Arial" />

ChipImageSize

Gets or sets the value of the ChipImageSize. This property can be used to customize the width and height of the chip image. This is a bindable property.

Declaration
public double ChipImageSize { get; set; }
Property Value
Type Description
System.Double

Specifies the chip image size. The default value is 18d.
Examples

Here is an example of how to set the ChipImageSize property

<local:SfChipGroup ChipImageSize="30" />

ChipLayout

Gets or sets the value of ChipLayout. This property can be used to add all the chips in a chip group.

Declaration
public Layout ChipLayout { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.Layout

Specifies the chip layout. The default value is null.
Examples

Here is an example of how to set the ChipLayout property

<local:SfChipGroup>
   <local:SfChipGroup.ChipLayout>
      <StackLayout Orientation="Horizontal" />
   </local:SfChipGroup.ChipLayout>
</local:SfChipGroup>

ChipPadding

Gets or sets the value of ChipPadding. This chip padding is used for arranging the items with padding.

Declaration
public Thickness ChipPadding { get; set; }
Property Value
Type Description
Microsoft.Maui.Thickness

Specifies the chip padding. The default value is Thickness(2d, 1d, 1d, 1d).
Examples

Here is an example of how to set the ChipPadding property

<local:SfChipGroup ChipPadding="10,5,10,5" />

ChipStroke

Gets or sets the value of the ChipStroke. This property can be used to change the border color of the chip in the chip group.

Declaration
public Brush ChipStroke { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.Brush

Specifies the chip stroke color. The default value is SolidColorBrush(Color.FromArgb("#79747E")).
Examples

Here is an example of how to set the ChipStroke property

<local:SfChipGroup ChipStroke="Red" />

ChipStrokeThickness

Gets or sets the value of the ChipStrokeThickness. This property can be used to change the border width of chips.

Declaration
public double ChipStrokeThickness { get; set; }
Property Value
Type Description
System.Double

Specifies the chip border width. The default value is 1d.
Examples

Here is an example of how to set the ChipStrokeThickness property

<local:SfChipGroup ChipStrokeThickness="2" />

ChipTextColor

Gets or sets the value of ChipTextColor. This property can be used to change the text color of the chip in the chip group.

Declaration
public Color ChipTextColor { get; set; }
Property Value
Type Description
Microsoft.Maui.Graphics.Color

Specifies the chip text color. The default value is Color.FromArgb("#49454F").
Examples

Here is an example of how to set the ChipTextColor property

<local:SfChipGroup ChipTextColor="Blue" />

ChipTextSize

Gets or sets the value of ChipTextSize. This property can be used to change the text size for the chip in the chip group.

Declaration
public double ChipTextSize { get; set; }
Property Value
Type Description
System.Double

Specifies the chip text size. The default value is 14d.
Examples

Here is an example of how to set the ChipTextSize property

<local:SfChipGroup ChipTextSize="16" />

ChipType

Gets or sets the value of ChipType. This property can be used to set the type of the chips in the chip group.

Declaration
public SfChipsType ChipType { get; set; }
Property Value
Type Description
SfChipsType

Specifies the chip type. The default value is Input.
Examples

Here is an example of how to set the ChipType property

<local:SfChipGroup ChipType="Choice" />

ChoiceMode

Gets or sets a value that indicates the selection mode of chip item in the Choice type.

Declaration
public ChoiceMode ChoiceMode { get; set; }
Property Value
Type Description
ChoiceMode

Specifies the choice mode. The default value is Single.
Remarks

This property is applicable for Choice only.

Examples

Here is an example of how to set the ChoiceMode property

<local:SfChipGroup ChoiceMode="Multiple" />

CloseButtonColor

Gets or sets the value of CloseButtonColor. Using this property, you can change the color of the close button in chip.

Declaration
public Color CloseButtonColor { get; set; }
Property Value
Type Description
Microsoft.Maui.Graphics.Color

Specifies the close button color. The default value is Color.FromArgb("#1C1B1F").
Examples

Here is an example of how to set the CloseButtonColor property

<local:SfChipGroup CloseButtonColor="Red" />

Command

Gets or sets the value of Command. This property can be used to give command to chip group.

Declaration
public ICommand Command { get; set; }
Property Value
Type Description
System.Windows.Input.ICommand

Specifies the command. The default value is null.
Examples

Here is an example of how to set the Command property

<local:SfChipGroup Command="{Binding ChipCommand}" />

DisplayMemberPath

Gets or sets the value of DisplayMemberPath, which is the member path value of the display text in the chip.

Declaration
public string DisplayMemberPath { get; set; }
Property Value
Type Description
System.String

Specifies the display member path. The default value is string.Empty.
Examples

Here is an example of how to set the DisplayMemberPath property

<local:SfChipGroup DisplayMemberPath="Name" />

ImageMemberPath

Gets or sets the value of ImageMemberPath. It is the member path for the icon image of the chip in a chip group.

Declaration
public string ImageMemberPath { get; set; }
Property Value
Type Description
System.String

Specifies the image member path. The default value is string.Empty.
Examples

Here is an example of how to set the ImageMemberPath property

<local:SfChipGroup ImageMemberPath="Icon" />

InputView

Gets or sets the value of InputView. This property can be used to set input view or editor in the input chip group.

Declaration
public View InputView { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.View

Specifies the input view. The default value is null.
Examples

Here is an example of how to set the InputView property

<local:SfChip ChipType="Input" >
	<local:SfChip.InputView>
		<Entry Placeholder="Enter Name" />
	</local:SfChip.InputView>
</local:SfChip>

ItemHeight

Gets or sets the value of the ItemHeight. This property can be used to customize the height of the chips in the group.

Declaration
public double ItemHeight { get; set; }
Property Value
Type Description
System.Double

Specifies the height of the item. The default value is double.NaN.
Examples

Here is an example of how to set the ItemHeight property

<local:SfChipGroup ItemHeight="50" />

Items

Gets or sets the value of the ChipCollection. This chip collection of SfChip is used to generate the chips in SfChipGroup.

Declaration
public ChipCollection Items { get; set; }
Property Value
Type Description
ChipCollection

The collection used to populate the chip items. The default is null.
Examples

Here is an example of how to set the Items property

<local:SfChipGroup>
  <local:SfChipGroup.Items>
     <local:SfChip Text="Chip1" />
         <local:SfChip Text="Chip2" />
  </local:SfChipGroup.Items>
</local:SfChipGroup>

ItemsSource

Gets or sets the value of ItemsSource. It is a collection of items to generate the chips in SfChipGroup.

Declaration
public IList ItemsSource { get; set; }
Property Value
Type Description
System.Collections.IList

The collection used to populate the items. The default is null.
Examples

Here is an example of how to set the ItemsSource property

<local:SfChipGroup ItemsSource="{Binding ChipItems}" />

ItemTemplate

Gets or sets the value of ItemTemplate. This property can be used to set custom content for data item in the chip group control.

Declaration
public DataTemplate ItemTemplate { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.DataTemplate

A DataTemplate object that is used to display the custom content. The default is null.
Examples

Here is an example of how to set the ItemTemplate property

<local:SfChipGroup>
   <local:SfChipGroup.ItemTemplate>
       <DataTemplate>
           <local:SfChip Text="{Binding Name}" />
       </DataTemplate>
   </local:SfChipGroup.ItemTemplate>
</local:SfChipGroup>

SelectedChipBackground

Gets or sets a color value that can be used to customize the background color of the selected chips in the chip group.

Declaration
public Brush SelectedChipBackground { get; set; }
Property Value
Type Description
Microsoft.Maui.Controls.Brush

Specifies the background color of the selected chips. The default value is SolidColorBrush(Color.FromArgb("#E8DEF8")).
Examples

Here is an example of how to set the SelectedChipBackground property

<local:SfChipGroup SelectedChipBackground="LightBlue" />

SelectedChipTextColor

Gets or sets a color value that can be used to customize the text color of the selected chips in the chip group.

Declaration
public Color SelectedChipTextColor { get; set; }
Property Value
Type Description
Microsoft.Maui.Graphics.Color

Specifies the text color of the selected chips. The default value is Color.FromArgb("#1D192B").
Examples

Here is an example of how to set the SelectedChipTextColor property

<local:SfChipGroup SelectedChipTextColor="Red" />

SelectedItem

Gets or sets the value of SelectedItem. This property can be used to select a particular item in the choice and fliter chip group.

Declaration
public object SelectedItem { get; set; }
Property Value
Type Description
System.Object

Specifies the selected item. The default value is null.
Examples

Here is an example of how to set the SelectedItem property

<local:SfChipGroup SelectedItem="{Binding SelectedChip}" />

SelectionIndicatorColor

Gets or sets the value of SelectionIndicatorColor. Using this property, you can change the color of the selection indicator in chip.

Declaration
public Color SelectionIndicatorColor { get; set; }
Property Value
Type Description
Microsoft.Maui.Graphics.Color

Specifies the selection indicator color. The default value is Color.FromArgb("#49454F").
Examples

Here is an example of how to set the SelectionIndicatorColor property

<local:SfChipGroup SelectionIndicatorColor="Green" />

ShowIcon

Gets or sets a value indicating whether an icon is shown in chips. The icon is in the visible state when the ShowIcon property is true; otherwise, icons will be collapsed.

Declaration
public bool ShowIcon { get; set; }
Property Value
Type Description
System.Boolean

Specifies whether to show the icon. The default value is false.
Examples

Here is an example of how to set the ShowIcon property

<local:SfChipGroup ShowIcon="True" />

Methods

GetChips()

This method returns a read-only collection of chips in SfChipGroup.

Declaration
public ReadOnlyCollection<SfChip> GetChips()
Returns
Type Description
System.Collections.ObjectModel.ReadOnlyCollection<SfChip>

A System.Collections.ObjectModel.ReadOnlyCollection<> of SfChip representing the children.
Remarks

This method ensures that the collection of chips is not modifiable from outside the class.

Examples

The following XAML demonstrates how to define a SfChipGroup:

    <local:SfChipGroup x:Name="chipGroup">
        <local:SfChip Text="Chip 1" />
        <local:SfChip Text="Chip 2" />
        <local:SfChip Text="Chip 3" />
    </local:SfChipGroup>

The following C# code demonstrates how to use the GetChips() method:

ReadOnlyCollection<SfChip> chips = chipGroup.GetChips();

Events

ChipClicked

Raised when the item in SfChips control is tapped.

Declaration
public event EventHandler<EventArgs> ChipClicked
Event Type
Type
System.EventHandler<System.EventArgs>
Examples

Here is an example of how to register the ChipClicked event.

SfChipGroup chipGroup = new SfChipGroup();
chipGroup.ChipClicked += chipgroup_ChipClicked;

private void chipgroup_ChipClicked(object sender, EventArgs e)
{
}

ItemRemoved

Occurs when the user clicked the close button in SfChipGroup.

Declaration
public event EventHandler<SelectionChangedEventArgs> ItemRemoved
Event Type
Type
System.EventHandler<SelectionChangedEventArgs>
Remarks

This event support for Input type SfChipGroup only.

Examples

Here is an example of how to register the ItemRemoved event.

SfChipGroup chipGroup = new SfChipGroup();
chipGroup.ItemRemoved += Chipgroup_ItemRemoved;

private void Chipgroup_ItemRemoved(object? sender, Toolkit.Chips.SelectionChangedEventArgs e)
{
}

SelectionChanged

Occurs when the user selects an item from unselected items.

Declaration
public event EventHandler<SelectionChangedEventArgs> SelectionChanged
Event Type
Type
System.EventHandler<SelectionChangedEventArgs>
Examples

Here is an example of how to register the SelectionChanged event.

SfChipGroup chipGroup = new SfChipGroup();
chipGroup.SelectionChanged += Chipgroup_SelectionChanged;

private void Chipgroup_SelectionChanged(object? sender, Toolkit.Chips.SelectionChangedEventArgs e)
{
}

SelectionChanging

Occurs when the user selects an item from unselected items.

Declaration
public event EventHandler<SelectionChangingEventArgs> SelectionChanging
Event Type
Type
System.EventHandler<SelectionChangingEventArgs>
Examples

Here is an example of how to register the SelectionChanging event.

SfChipGroup chipGroup = new SfChipGroup();
chipGroup.SelectionChanging += Chipgroup_SelectionChanging;

private void Chipgroup_SelectionChanging(object? sender, Toolkit.Chips.SelectionChangingEventArgs e)
{
}