All docs
V21.2
21.2
21.1
The page you are viewing does not exist in version 21.1. This link will take you to the root page.
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.

Chip Class

A chip that allows users to trigger an action.

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

Declaration

public class Chip :
    View

The following members accept/return Chip objects:

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.

Action Chips

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

Implements

Xamarin.Forms.IAnimatable
Xamarin.Forms.ITabStopElement
Xamarin.Forms.IViewController
Xamarin.Forms.IVisualElementController
Xamarin.Forms.IElementController
Xamarin.Forms.Internals.IGestureController
Xamarin.Forms.IGestureRecognizers

Inheritance

Object
Xamarin.Forms.BindableObject
Xamarin.Forms.Element
Xamarin.Forms.NavigableElement
Xamarin.Forms.VisualElement
View
Chip
See Also