FilterChipGroup Class

A chip group that allows users to select multiple chips.

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

NuGet Package: DevExpress.XamarinForms.Editors

Declaration

public class FilterChipGroup :
    SelectableChipGroup

Remarks

Filter chips allow users to select multiple options from a set. You can use these chips to display filters applied to content or use them to replace toggle buttons/checkboxes.

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

<dxe:FilterChipGroup 
    ItemsSource="{Binding Items}"
    IsMultiline="True"
    DisplayMember="Text"
    IconMember="Image">
</dxe:FilterChipGroup>

C#

public class ChipViewModel {
    public IList<ChipDataObject> Items { get; }
    public ChipViewModel() {
        Items = new List<ChipDataObject>() {
            new ChipDataObject("Elevator"),
            new ChipDataObject("Washer/Dryer"),
            new ChipDataObject("Fireplace"),
            new ChipDataObject("Wheelchair Access"),
            new ChipDataObject("Pet-Friendly")
        };
    }
}

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 a filter group.

XAML

<dxe:FilterChipGroup x:Name="filterChipGroup"
                     Margin="15"
                     BackgroundColor="Transparent"
                     IsMultiline="False">
    <dxe:Chip Icon="incoming" 
              Text="Incoming" 
              BackgroundColor="#3010E010" 
              SelectedBackgroundColor="#8010E010" 
              IsCheckIconVisible="True"/>
    <dxe:Chip Icon="outgoing" 
              Text="Outgoing" 
              BackgroundColor="#30FF8000" 
              SelectedBackgroundColor="#80FF8000" 
              IsCheckIconVisible="True"/>
    <dxe:Chip Icon="missed" 
              Text="Missed" 
              BackgroundColor="#30F01010" 
              SelectedBackgroundColor="#80F01010" 
              IsCheckIconVisible="True"/>
</dxe:FilterChipGroup>

Selected Chips

The SelectedChips property allows you to obtain the selected chips. To get the data objects based on which the selected chips are created, use the SelectedItems property. You can also use the SelectedIndexes property to specify the selected chip indices.

The table below contains properties and events that allow you to respond to selection changes.

Action	Property/Event	Description
Selection Changes	SelectionChanged	Fires when a user (un)selects a chip in this group.
	SelectionChangedCommand	Gets or sets a command executed when a user (un)selects a chip in this group.

You can also use the IsSelectedMember property to store selection states in the bound data source.

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.

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.

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.

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.
	ChipSelectedTextColor	Gets or sets the text color for selected chips in this group.
	ChipDisabledTextColor	Gets or sets the text color for chips in this group when they are disabled.
	ChipSelectedDisabledTextColor	Gets or sets the text color for chips in this group when they are selected and 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 purpose of the chip.
• Check Icon—an icon displayed when a chip is selected (usually, a check 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.
	ChipSelectedIconColor	Gets or sets the icon color for chips in this group when they are selected.
	ChipSelectedDisabledIconColor	Gets or sets the icon color for chips in this group when they are selected and disabled.
	ChipPressedIconColor	Gets or sets the icon color for chips in this group when they are pressed.
Check Icon	ChipCheckIcon	Gets or sets the Check icon.
	ChipCheckIconColor	Gets or sets the color of the Check icon for chips in this group.
	ChipDisabledCheckIconColor	Gets or sets the Check icon color for chips in this group when they are disabled.
	ChipPressedCheckIconColor	Gets or sets the Check icon color for chips in this group when they are pressed.

Chip 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 these different 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.
	ChipSelectedBackgroundColor	Gets or sets the background color for chips in this group when they are selected.
	ChipDisabledBackgroundColor	Gets or sets the background color for chips in this group when they are disabled.
	ChipSelectedDisabledBackgroundColor	Gets or sets the background color for chips in this group when they are selected and 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.
	ChipSelectedBorderColor	Gets or sets the border color for chips in this group when they are selected.
	ChipDisabledBorderColor	Gets or sets the border color in the disabled state.
	ChipSelectedDisabledBorderColor	Gets or sets the border color for chips in this group when they are selected and disabled.
	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.

Implements

IThemeChangingHandler

Inheritance

Object

ChipGroup

SelectableChipGroup

FilterChipGroup