Chip Class
A chip that allows users to trigger an action.
Namespace: DevExpress.Maui.Editors
Assembly: DevExpress.Maui.Editors.dll
NuGet Package: DevExpress.Maui.Editors
#Declaration
public class Chip :
View,
IDXViewController,
IAppearanceOwner
#Related API Members
The following members return Chip objects:
#Remarks
Action chips are similar to compact buttons that 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.
<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: Choice
#Text
The table below lists properties that allow you to specify and customize text displayed in a chip.
Visual Element | Property | Description |
---|---|---|
Text | Gets or sets the text displayed in the chip. | |
Text Color | Gets or sets the text color. | |
Gets or sets the text color when the chip is disabled. This is a bindable property. | ||
Gets or sets the text color when the chip is selected. | ||
Gets or sets the text color when the chip is selected and disabled. | ||
Gets or sets the text color when the chip is pressed. | ||
Text Font | Gets or sets the font face used to display text within the chip. | |
Gets or sets the size of the font used to display text in the chip. | ||
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 | Gets or sets the icon displayed in the chip. | |
Gets or sets whether the icon is visible. | ||
Gets or sets the indent between the icon and text. | ||
Gets or sets the icon size. | ||
Gets or sets whether the chip icons are rounded. | ||
Gets or sets the color of the icon displayed in the chip. | ||
Gets or sets the icon color in the disabled state. This is a bindable property. | ||
Gets or sets the icon color when this chip is checked (selected). | ||
Gets or sets the icon color when the chip is pressed. | ||
Gets or sets the icon color when the chip is selected and disabled. | ||
Check Icon | Gets or sets the icon that indicates the selection state. This is a bindable property. | |
Gets or sets whether the Check icon is visible when this chip is selected. | ||
Gets or sets the color of the icon displayed when the chip is in the checked state. This is a bindable property. | ||
Gets or sets the check icon’s color in the disabled state. This is a bindable property. | ||
Gets or sets the Check icon color when the chip is pressed. | ||
Remove Icon | Gets or sets the icon that allows users to remove the chip. | |
Gets or sets whether the icon that allows users to remove the chip is visible. | ||
Gets or sets the Remove icon color. | ||
Gets or sets the remove icon’s color when the chip is disabled. This is a bindable property. | ||
Gets or sets the Remove icon color when the chip is selected. | ||
Gets or sets the Remove icon color when the chip is pressed. | ||
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 | Fires when a user taps the chip. | |
Gets or sets a command invoked when a user taps this chip. | ||
Gets or sets a parameter passed to the Tap | ||
Double Tap | Fires when a user double-taps the chip. | |
Gets or sets a command invoked when a user double-taps the chip. | ||
Gets or sets a parameter passed to the Double | ||
Long Press | Fires when a user presses and holds the chip. | |
Gets or sets a command executed when a user presses and holds the chip. | ||
Gets or sets a parameter passed to the Long | ||
Remove Icon Click | Fires when the Remove icon is clicked. | |
Gets or sets a command executed when a user taps the Remove icon. | ||
Gets or sets a parameter passed to the Remove |
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 | Gets or sets whether the chip is checked (selected). | |
Selection State Changes | Fires when the selection state changes. | |
Gets or sets a command executed when a user (un)selects this chip. | ||
Gets or sets a parameter passed to the Selection |
#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 |
| Gets or sets the color that fills the background. |
Gets or sets the background color in the disabled state. This is a bindable property. | ||
Gets or sets the background color when the chip is selected. | ||
Gets or sets the background color when the chip is pressed. | ||
Border Color | Gets or sets the border color. This is a bindable property. | |
Gets or sets the border color in the disabled state. This is a bindable property. | ||
Gets or sets the border color when the chip is selected. | ||
Gets or sets the border color when the chip is pressed. | ||
Border Thickness | Gets or sets the border thickness. This is a bindable property. | |
Chip Corner | Gets or sets the corner radius. This is a bindable property. | |
Padding | Gets or sets the amount of space around the chip. | |
Animation | Gets or sets whether to use a ripple effect to change the selection state. |
#Related Scenario
The following featured scenario shows how you can use the Chip class:
Candlestick Financial Chart with Volume Bars, Indicators and Time Frames