Skip to main content

InputChipGroup Class

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

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

NuGet Package: DevExpress.XamarinForms.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.

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

Chips

<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 Xamarin.Forms;
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.

Text Color

EditorTextColor

Gets or sets text color in the editor.

Font

EditorFontFamily

Gets or sets the font face used to display text in the editor.

EditorFontSize

Gets or sets the size of the font used to display text in the editor.

EditorFontAttributes

Gets or sets whether the font used to display text in the editor is bold, italic, or unmodified.

Editor Size

EditorMinimumWidth

Gets or sets the editor’s minimum width.

EditorMinimumHeight

Gets or sets the editor’s minimum height.

Editor Border

EditorBorderColor

Gets or sets the editor border color.

EditorFocusedBorderColor

Gets or sets the editor border color when it is focused.

EditorBorderThickness

Gets or sets editor border thickness.

Placeholder Text

EditorPlaceholderText

Gets or sets the text displayed in the editor when it is focused but does not contain a value.

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.

VerticalSpacing

Gets or sets the vertical amount of space between chips in this group when they are arranged in multiple rows.

Layout Rows

IsMultiline

Gets or sets whether chips in this group are displayed in single or multiple lines.

Scroll Bar

IsScrollBarVisible

Gets or sets whether the scroll bar is displayed.

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.

ChipTapCommand

Gets or sets a command executed when a user taps a chip in this group.

Double Tap

ChipDoubleTap

Fires when a user double-taps a chip in this group.

ChipDoubleTapCommand

Gets or sets a command executed when a user double-taps a chip in this group.

Long Press

ChipLongPress

Fires when a user taps and holds a chip in this group.

ChipLongPressCommand

Gets or sets a command executed when a user taps and holds a chip in this group.

Remove Icon Click

ChipRemoveIconClicked

Fires when a user clicks the Remove icon in a chip in this group.

ChipRemoveIconClickedCommand

Gets or sets a command executed when a user clicks the Remove icon in a chip in this group.

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.

ChipDisabledTextColor

Gets or sets the text color for chips in this group when they are disabled.

ChipPressedTextColor

Gets or sets the text color for chips in this group when they are pressed.

Text Font

ChipFontFamily

Gets or sets the font face for chips in this group.

ChipFontSize

Gets or sets the font size for chips in this group.

ChipFontAttributes

Gets or sets whether the font used to display text is bold, italic, or unmodified.

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.

ChipIconIndent

Gets or sets the indent of the icon from text for chips in this group.

ChipIconSize

Gets or sets the icon size.

ChipRoundedIcon

Gets or sets whether chip icons in this group are rounded.

ChipIconColor

Gets or sets the icon color for chips in this group.

ChipDisabledIconColor

Gets or sets the icon color for chips in this group when they are disabled.

ChipPressedIconColor

Gets or sets the icon color for chips in this group when they are pressed.

Remove Icon

ChipRemoveIcon

Gets or sets the Remove icon.

ChipRemoveIconColor

Gets or sets the Remove icon color for chips in this group.

ChipDisabledRemoveIconColor

Gets or sets the Remove icon color for chips in this group when they are disabled.

ChipPressedRemoveIconColor

Gets or sets the Remove icon color for chips in this group when they are pressed.

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.

ChipDisabledBackgroundColor

Gets or sets the background color for chips in this group when they are disabled.

ChipPressedBackgroundColor

Gets or sets the background color for chips in this group when they are pressed.

Border Color

ChipBorderColor

Gets or sets the border color for chips when they are in the normal state.

ChipDisabledBorderColor

Gets or sets the border color in the disabled state.

ChipPressedBorderColor

Gets or sets the border color for chips in this group when they are pressed.

Border Thickness

ChipBorderThickness

Gets or sets the border thickness for chips in this group.

Outlined/Filled Box

BoxMode

Gets or sets whether chips in this group are filled or outlined.

Chip Corner

ChipCornerRadius

Gets or sets a corner radius for chips in this group.

Padding

ChipPadding

Gets or sets an amount of space around chips in this group.

Animation

ChipUseRippleEffect

Gets or sets whether a ripple effect is used when a user (un)selects a chip in this group.

Inheritance

Object
ChipGroup
InputChipGroup
See Also