Chip Class

A chip that allows users to trigger an action.

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

NuGet Package: DevExpress.XamarinForms.Editors

Declaration

public class Chip :
    View

Related API Members

The following members return Chip objects:

• ChipEventArgs.Chip
• ChipGroup.GetChipByItem(Object)
• ChoiceChipGroup.SelectedChip

Remarks

Action chips are like compact buttons and allow users to invoke an action related to primary content. For example, an action chip may be used to display documents attached to emails. Use the Chip class to create an action chip.

XAML

<StackLayout Orientation="Horizontal" 
             Margin="15">
    <dxe:Chip Text="Turn on lights" 
              Icon="baseline_lightbulb_24" 
              IsIconVisible="True" 
              IconColor="#3D3F42"/>
    <dxe:Chip Text="Set alarm" 
              Icon="baseline_alarm_24" 
              IsIconVisible="True" 
              IconColor="#3D3F42"/>
</StackLayout>

Tip

You can also create a chip group and populate it with chips based on a bound data source. See the following topics for more information: ChoiceChipGroup, FilterChipGroup, and InputChipGroup.

Text

The table below lists properties that allow you to specify and customize the text displayed in a chip.

Visual Element	Property	Description
Text	Text	Gets or sets the text displayed in the chip.
Text Color	TextColor	Gets or sets the text color.
	DisabledTextColor	Gets or sets the text color when the chip is disabled.
	SelectedTextColor	Gets or sets the text color when the chip is selected.
	SelectedDisabledTextColor	Gets or sets the text color when the chip is selected and disabled.
	PressedTextColor	Gets or sets the text color when the chip is pressed.
Text Font	FontFamily	Gets or sets the font face used to display text within the chip.
	FontSize	Gets or sets the size of the font used to display text in the chip.
	FontAttributes	Gets or sets whether the font used to display text is bold, italic, or unmodified.

Icons

A chip can display the following icons:

• Chip Icon—an icon that, along with text, illustrates the purpose of the chip.
• Check Icon—an icon displayed when a chip is selected (usually, a check mark).
• Remove Icon—an icon that allows a user to remove a chip (usually, a cross mark).

The table below contains properties that allow you to customize these icons.

Visual Element	Property	Description
Chip Icon	Icon	Gets or sets the icon displayed in the chip.
	IsIconVisible	Gets or sets whether the icon is visible.
	IconIndent	Gets or sets the indent between the icon and text.
	IconSize	Gets or sets the icon size.
	RoundedIcon	Gets or sets whether the chip icons are rounded.
	IconColor	Gets or sets the color of the icon displayed in the chip.
	DisabledIconColor	Gets or sets the icon color in the disabled state.
	SelectedIconColor	Gets or sets the icon color when this chip is checked (selected).
	PressedIconColor	Gets or sets the icon color when the chip is pressed.
	SelectedDisabledIconColor	Gets or sets the icon color when the chip is selected and disabled.
Check Icon	CheckIcon	Gets or sets the icon that indicates the selection state.
	IsCheckIconVisible	Gets or sets whether the Check icon is visible when this chip is selected.
	CheckIconColor	Gets or sets the color of the icon displayed when the chip is in the checked state.
	DisabledCheckIconColor	Gets or sets the Check icon color in the disabled state.
	PressedCheckIconColor	Gets or sets the Check icon color when the chip is pressed.
Remove Icon	RemoveIcon	Gets or sets the icon that allows users to remove the chip.
	IsRemoveIconVisible	Gets or sets whether the icon that allows users to remove the chip is visible.
	RemoveIconColor	Gets or sets the Remove icon color.
	DisabledRemoveIconColor	Gets or sets the Remove icon color when the chip is disabled.
	SelectedRemoveIconColor	Gets or sets the Remove icon color when the chip is selected.
	PressedRemoveIconColor	Gets or sets the Remove icon color when the chip is pressed.
	SelectedDisabledRemoveIconColor	Gets or sets the Remove icon color when the chip is selected and disabled.

User Interaction

The table below contains properties and events that allow you to respond to user interaction.

Action	Property/Event	Description
Tap	Tap	Fires when a user taps the chip.
	TapCommand	Gets or sets a command invoked when a user taps this chip.
	TapCommandParameter	Gets or sets a parameter passed to the TapCommand.
Double Tap	DoubleTap	Fires when a user double-taps the chip.
	DoubleTapCommand	Gets or sets a command invoked when a user double-taps the chip.
	DoubleTapCommandParameter	Gets or sets a parameter passed to the DoubleTapCommand.
Long Press	LongPress	Fires when a user presses and holds the chip.
	LongPressCommand	Gets or sets a command executed when a user presses and holds the chip.
	LongPressCommandParameter	Gets or sets a parameter passed to the LongPressCommand.
Remove Icon Click	RemoveIconClicked	Fires when the Remove icon is clicked.
	RemoveIconClickedCommand	Gets or sets a command executed when a user taps the Remove icon.
	RemoveIconClickedCommandParameter	Gets or sets a parameter passed to the RemoveIconClickedCommand.

If chips are generated based on data objects in the ItemsSource collection, the default parameter passed to a command is the corresponding data object. If chips are created manually, the default parameter is the chip’s BindingContext property value.

Selected Chips

Users can select a chip. That selected chip will then display a check mark and apply corresponding appearance settings. The table below contains properties and events related to selected chips.

State/Action	Property/Event	Description
Selection State	IsSelected	Gets or sets whether the chip is checked (selected).
Selection State Changes	SelectionChanged	Fires when the selection state changes.
	SelectionChangedCommand	Gets or sets a command executed when a user (un)selects this chip.
	SelectionChangedCommandParameter	Gets or sets a parameter passed to the SelectionChangedCommand.

Appearance

A chip can be in a normal, selected, pressed, or disabled state. The table below contains properties that allow you to customize chip appearance in different states.

Visual Element	Property	Description
Background Color	BackgroundColor	Gets or sets the color that fills the background.
	DisabledBackgroundColor	Gets or sets the background color in the disabled state.
	SelectedBackgroundColor	Gets or sets the background color when the chip is selected.
	PressedBackgroundColor	Gets or sets the background color when the chip is pressed.
Border Color	BorderColor	Gets or sets the border color.
	DisabledBorderColor	Gets or sets the border color in the disabled state.
	SelectedBorderColor	Gets or sets the border color when the chip is selected.
	PressedBorderColor	Gets or sets the border color when the chip is pressed.
Border Thickness	BorderThickness	Gets or sets the border thickness.
Chip Corner	CornerRadius	Gets or sets the corner radius.
Padding	Padding	Gets or sets the amount of space around the chip.
Animation	UseRippleEffect	Gets or sets whether to use a ripple effect to change the selection state.

Inheritance

Object

Chip