InputChipGroup Class

A chip group that allows users to input a new chip.

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.

Input Chip Group

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.

XAML
C#

<dxe:InputChipGroup 
    ItemsSource="{Binding Items}"
    DisplayMember="Text"
    IconMember="Image"
    Padding="0">
</dxe:InputChipGroup>

public class ChipViewModel {
    public IList<ChipDataObject> Items { get; }
    public ChipViewModel() {
        Items = new List<ChipDataObject>() {
            new ChipDataObject("Portland"),
            new ChipDataObject("Biking")
        };
    }
}

public class ChipDataObject {
    public ImageSource Image { get; }
    public string Text { get; }
    public ChipDataObject(string text) {
        Text = text;
    }
}

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.

Chips

XAML

<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	EditorText	Gets or sets the text displayed in the editor. This is a bindable property.
Text Color	EditorTextColor	Gets or sets text color in the editor. This is a bindable property.
Font	EditorFontFamily	Gets or sets the font face used to display text in the editor. This is a bindable property.
	EditorFontSize	Gets or sets the size of the font used to display text in the editor. This is a bindable property.
	EditorFontAttributes	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	EditorMinimumWidth	Gets or sets the editor’s minimum width. This is a bindable property.
Editor Size	EditorMinimumHeight	Gets or sets the editor’s minimum height. This is a bindable property.
Editor Border	EditorBorderColor	Gets or sets the editor border color. This is a bindable property.
	EditorFocusedBorderColor	Gets or sets the editor border color when it is focused. This is a bindable property.
	EditorBorderThickness	Gets or sets editor border thickness. This is a bindable property.
Placeholder Text	EditorPlaceholderText	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	HorizontalSpacing	Gets or sets the horizontal amount of space between chips in this group. This is a bindable property.
Spacing	VerticalSpacing	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	IsMultiline	Gets or sets whether chips in this group are displayed in single or multiple lines. This is a bindable property.
Scroll Bar	IsScrollBarVisible	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	ChipTap	Fires when a user taps a chip in this group.
Tap	ChipTapCommand	Gets or sets a command executed when a user taps a chip in this group. This is a bindable property.
Double Tap	ChipDoubleTap	Fires when a user double-taps a chip in this group.
Double Tap	ChipDoubleTapCommand	Gets or sets a command executed when a user double-taps a chip in this group. This is a bindable property.
Long Press	ChipLongPress	Fires when a user taps and holds a chip in this group.
Long Press	ChipLongPressCommand	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	ChipRemoveIconClicked	Fires when a user clicks the Remove icon in a chip in this group.
Remove Icon Click	ChipRemoveIconClickedCommand	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	ChipTextColor	Gets or sets the text color for chips in this group. This is a bindable property.
	ChipDisabledTextColor	Gets or sets the text color for chips in this group when they are disabled. This is a bindable property.
	ChipPressedTextColor	Gets or sets the text color for chips in this group when they are pressed. This is a bindable property.
Text Font	ChipFontFamily	Gets or sets the font family name for chips in this group. This is a bindable property.
	ChipFontSize	Gets or sets the font size for chips in this group. This is a bindable property.
	ChipFontAttributes	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	ChipIsIconVisible	Gets or sets whether chips in this group display an icon. This is a bindable property.
	ChipIconIndent	Gets or sets the indent of the icon from text for chips in this group. This is a bindable property.
	ChipIconSize	Gets or sets the icon size. This is a bindable property.
	ChipRoundedIcon	Gets or sets whether chip icons in this group are rounded. This is a bindable property.
	ChipIconColor	Gets or sets the icon color for chips in this group. This is a bindable property.
	ChipDisabledIconColor	Gets or sets the icon color for chips in this group when they are disabled. This is a bindable property.
	ChipPressedIconColor	Gets or sets the icon color for chips in this group when they are pressed. This is a bindable property.
Remove Icon	ChipRemoveIcon	Gets or sets the remove icon. This is a bindable property.
	ChipRemoveIconColor	Gets or sets the remove icon’s color for chips in this group. This is a bindable property.
	ChipDisabledRemoveIconColor	Gets or sets the remove icon color for chips in this group when they are disabled. This is a bindable property.
	ChipPressedRemoveIconColor	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	ChipBackgroundColor	Gets or sets the background color for chips in this group when they are in the normal state. This is a bindable property.
	ChipDisabledBackgroundColor	Gets or sets the background color for chips in this group when they are disabled. This is a bindable property.
	ChipPressedBackgroundColor	Gets or sets the background color for chips in this group when they are pressed. This is a bindable property.
Border Color	ChipBorderColor	Gets or sets the border color for chips when they are in the normal state. This is a bindable property.
	ChipDisabledBorderColor	Gets or sets the border color in the disabled state. This is a bindable property.
	ChipPressedBorderColor	Gets or sets the border color for chips in this group when they are pressed. This is a bindable property.
Border Thickness	ChipBorderThickness	Gets or sets the border thickness for chips in this group. This is a bindable property.
Outlined/Filled Box	BoxMode	Gets or sets whether chips in this group are filled or outlined. This is a bindable property.
Chip Corner	ChipCornerRadius	Gets or sets a corner radius for chips in this group. This is a bindable property.
Padding	ChipPadding	Gets or sets an amount of space around chips in this group. This is a bindable property.
Animation	ChipUseRippleEffect	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.