InputChipGroup Class
A chip group that allows users to input a new chip.
Namespace: DevExpress.Maui.Editors
Assembly: DevExpress.Maui.Editors.dll
NuGet Package: DevExpress.Maui.Editors
#Declaration
public class InputChipGroup :
ChipGroup
#Remarks
Input chips display user input as a single piece of information (may be validated, deleted, or modified). They can be used to enter entities like places, activities, roles or used to enter tags or email addresses.
#Item Source
Use the ItemsSource property to bind a chip group to a source of data objects for chips. The DisplayMember and IconMember properties specify data fields that store text and icons for chips.
A chip’s BindingContext
property contains the data object from the ItemsSource collection based on which this chip is generated.
<dxe:InputChipGroup
ItemsSource="{Binding Items}"
DisplayMember="Text"
IconMember="Image"
Padding="0">
</dxe:InputChipGroup>
#Chips Collection
If you do not bind a chip group to a data source, you can populate the ChipGroup.Chips collection with Chip objects. ChipGroup.Chips is a content property. You can skip property tags in the markup.
The markup below shows how to add chips into an input group.
<dxe:InputChipGroup x:Name="inputChipGroup"
Margin="15"
BackgroundColor="Transparent"
IsMultiline="False">
<dxe:Chip Text="Portland"
BackgroundColor="#3010E010"/>
<dxe:Chip Text="Biking"
BackgroundColor="#30FF8000"/>
</dxe:InputChipGroup>
#Editor
An input chip group displays a text editor that allows users to enter text and create a chip. When a user presses Enter, the editor raises the Completed event. This event allows you to validate user input and create a chip. Use the ClearEditorText event argument to specify whether to clear text in the editor.
#Example
The code below shows how to create a chip based on user input.
using Microsoft.Maui.Controls;
using System.Collections.Generic;
public partial class MainPage : ContentPage {
//...
private void OnInputChipGroupCompleted(object sender, CompletedEventArgs e) {
var chipGroup = sender as InputChipGroup;
if (chipGroup.EditorText.Length <= 3) {
e.ClearEditorText = false;
} else {
IList<ChipDataObject> list = chipGroup.ItemsSource as BindingList<ChipDataObject>;
list.Add(new ChipDataObject() { Text = chipGroup.EditorText });
}
}
}
public class ChipDataObject {
public string Text { get; set; }
}
#Editor Appearance
The table below lists properties that allow you to specify and customize the text displayed in the editor.
Visual Element | Property | Description |
---|---|---|
Text | Gets or sets the text displayed in the editor. This is a bindable property. | |
Text Color | Gets or sets text color in the editor. This is a bindable property. | |
Font | Gets or sets the font face used to display text in the editor. This is a bindable property. | |
Gets or sets the size of the font used to display text in the editor. This is a bindable property. | ||
Gets or sets whether the font used to display text in the editor is bold, italic, or unmodified. This is a bindable property. | ||
Editor Size | Gets or sets the editor’s minimum width. This is a bindable property. | |
Gets or sets the editor’s minimum height. This is a bindable property. | ||
Editor Border | Gets or sets the editor border color. This is a bindable property. | |
Gets or sets the editor border color when it is focused. This is a bindable property. | ||
Gets or sets editor border thickness. This is a bindable property. | ||
Placeholder Text | Gets or sets the text displayed in the editor when it is focused but does not contain a value. This is a bindable property. |
#Layout
The table below contains properties that allow you to customize the layout of chips in a group.
Aspect | Property | Description |
---|---|---|
Spacing | Gets or sets the horizontal amount of space between chips in this group. This is a bindable property. | |
Gets or sets the vertical amount of space between chips in this group when they are arranged in multiple rows. This is a bindable property. | ||
Layout Rows | Gets or sets whether chips in this group are displayed in single or multiple lines. This is a bindable property. | |
Scroll Bar | Gets or sets whether the scroll bar is displayed. This is a bindable property. |
#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 a chip in this group. | |
Gets or sets a command executed when a user taps a chip in this group. This is a bindable property. | ||
Double Tap | Fires when a user double-taps a chip in this group. | |
Gets or sets a command executed when a user double-taps a chip in this group. This is a bindable property. | ||
Long Press | Fires when a user taps and holds a chip in this group. | |
Gets or sets a command executed when a user taps and holds a chip in this group. This is a bindable property. | ||
Remove Icon Click | Fires when a user clicks the Remove icon in a chip in this group. | |
Gets or sets a command executed when a user clicks the remove icon in a chip in this group. This is a bindable property. |
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.
#Chip Text
The table below lists properties that allow you to specify and customize the text displayed in a chip.
Visual Element | Property | Description |
---|---|---|
Text Color | Gets or sets the text color for chips in this group. This is a bindable property. | |
Gets or sets the text color for chips in this group when they are disabled. This is a bindable property. | ||
Gets or sets the text color for chips in this group when they are pressed. This is a bindable property. | ||
Text Font | Gets or sets the font family name for chips in this group. This is a bindable property. | |
Gets or sets the font size for chips in this group. This is a bindable property. | ||
Gets or sets whether the font used to display text is bold, italic, or unmodified. This is a bindable property. |
#Chip Icons
A chip can display the following icons:
- Chip Icon—an icon that, along with text, illustrates the chip’s purpose.
- 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 whether chips in this group display an icon. This is a bindable property. | |
Gets or sets the indent of the icon from text for chips in this group. This is a bindable property. | ||
Gets or sets the icon size. This is a bindable property. | ||
Gets or sets whether chip icons in this group are rounded. This is a bindable property. | ||
Gets or sets the icon color for chips in this group. This is a bindable property. | ||
Gets or sets the icon color for chips in this group when they are disabled. This is a bindable property. | ||
Gets or sets the icon color for chips in this group when they are pressed. This is a bindable property. | ||
Remove Icon | Gets or sets the remove icon. This is a bindable property. | |
Gets or sets the remove icon’s color for chips in this group. This is a bindable property. | ||
Gets or sets the remove icon color for chips in this group when they are disabled. This is a bindable property. | ||
Gets or sets the remove icon’s color for chips in this group when they are pressed. This is a bindable property. |
#Chip Appearance
A chip can be in a normal, pressed, or disabled state. The table below contains properties that allow you to customize chip appearance in these states.
Visual Element | Property | Description |
---|---|---|
Background Color | Gets or sets the background color for chips in this group when they are in the normal state. This is a bindable property. | |
Gets or sets the background color for chips in this group when they are disabled. This is a bindable property. | ||
Gets or sets the background color for chips in this group when they are pressed. This is a bindable property. | ||
Border Color | Gets or sets the border color for chips when they are in the normal state. 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 for chips in this group when they are pressed. This is a bindable property. | ||
Border Thickness | Gets or sets the border thickness for chips in this group. This is a bindable property. | |
Outlined/Filled Box | Gets or sets whether chips in this group are filled or outlined. This is a bindable property. | |
Chip Corner | Gets or sets a corner radius for chips in this group. This is a bindable property. | |
Padding | Gets or sets an amount of space around chips in this group. This is a bindable property. | |
Animation | Gets or sets whether the chip groups displays a ripple effect when a user (un)selects a chip in this group. This is a bindable property. |