maui-404709-chips-customize-appearance.md
DevExpress chip controls for .NET MAUI ship with a wide variety of appearance settings you can use to customize chips in different states. Four states are available for chips: normal, selected, pressed, or disabled (the chip IsEnabled property is set to false).
This section lists options that specify chip text and configure text appearance:
Chip.TextSpecifies text caption for a standalone chip control (Chip).ChipGroup.DisplayMemberSpecifies a data member that stores text for chips in chip groups (ChoiceChipGroup, FilterChipGroup, and InputChipGroup).
Chip.TextColor | ChipGroup.ChipTextColorSpecify the chip text color.Chip.DisabledTextColor | ChipGroup.ChipDisabledTextColorDefine the text color for chips in the disabled state.Chip.SelectedTextColor | SelectableChipGroup.ChipSelectedTextColorDefine the text color for chips in the selected state. Note InputChipGroup does not support this option.Chip.SelectedDisabledTextColor | SelectableChipGroup.ChipSelectedDisabledTextColorSpecify the text color for chips that are selected and disabled. Note InputChipGroup does not support this option.Chip.PressedTextColor | ChipGroup.ChipPressedTextColorSpecify the text color for chips in the pressed state.
Chip.FontFamily | ChipGroup.ChipFontFamilyAllow you to set the font family for chips.Chip.FontSize | ChipGroup.ChipFontSizeAllow you to set the font size for chips.Chip.FontAttributes | ChipGroup.ChipFontAttributesAllow you to set the font attributes for chips.
A chip can display the following icons:
Chip.IconSpecifies an icon for a standalone chip control (Chip).ChipGroup.IconMemberSpecifies a data member that stores icons for chips in chip groups (ChoiceChipGroup, FilterChipGroup, and InputChipGroup).Chip.IconIndent | ChipGroup.ChipIconIndentSpecify the gap between the chip icon and text.Chip.IconSize | ChipGroup.ChipIconSizeSpecify the icon size.Chip.RoundedIcon | ChipGroup.ChipRoundedIconSpecify to round off icon corners.Chip.IsIconVisible | ChipGroup.ChipIsIconVisibleSpecify whether to show the chip icon.
Chip.IconColor | ChipGroup.ChipIconColorSpecify the icon color.Chip.DisabledIconColor | ChipGroup.ChipDisabledIconColorDefine the icon color in the disabled state.Chip.SelectedIconColor | SelectableChipGroup.ChipSelectedIconColorSpecify the icon color in the selected state.Chip.SelectedDisabledIconColor | SelectableChipGroup.ChipSelectedDisabledIconColorSpecify the icon color for chips that are selected and disabled. Note InputChipGroup does not support this option.Chip.PressedIconColor | ChipGroup.ChipPressedIconColorSpecify the icon color in the pressed state.
Chip.CheckIcon | ChipGroup.ChipCheckIconSpecify the check icon’s image source.Chip.IsCheckIconVisibleSpecifies whether to show the check icon in a chip.Chip.CheckIconColor | ChipGroup.ChipCheckIconColorDefine the check icon color.Chip.DisabledCheckIconColor | ChipGroup.ChipDisabledCheckIconColorSpecify the check icon color in the disabled state.Chip.PressedCheckIconColor | ChipGroup.ChipPressedCheckIconColorSpecify the check icon color in the pressed state.
Chip.RemoveIcon | ChipGroup.ChipRemoveIconSpecify the remove icon’s image source.Chip.IsRemoveIconVisibleSpecifies whether to show the remove icon in standalone chips.Chip.RemoveIconColor | ChipGroup.ChipRemoveIconColorDefine the remove icon color.Chip.DisabledRemoveIconColor | ChipGroup.ChipDisabledRemoveIconColorSpecify the remove icon color in the disabled state.Chip.SelectedRemoveIconColor | SelectableChipGroup.ChipSelectedRemoveIconColorSpecify the remove icon color in the selected state. Note InputChipGroup does not support this option.Chip.PressedRemoveIconColor | ChipGroup.ChipPressedRemoveIconColorSpecify the remove icon color in the pressed state.Chip.SelectedDisabledRemoveIconColor | SelectableChipGroup.ChipSelectedDisabledRemoveIconColorSpecify the remove icon color for chips that are selected and disabled. Note InputChipGroup does not support this option.
Chip.BackgroundColor | ChipGroup.BackgroundColorSpecify the color that fills chip background.Chip.DisabledBackgroundColor | ChipGroup.ChipDisabledBackgroundColorSpecify the color that fills chip background in the disabled state.Chip.SelectedBackgroundColor | SelectableChipGroup.ChipSelectedBackgroundColorSpecify the color that fills chip background in the selected state. Note InputChipGroup does not support this option.Chip.PressedBackgroundColor | ChipGroup.ChipPressedBackgroundColorSpecify the color that fills chip background in the pressed state.
Chip.BorderColor | ChipGroup.ChipBorderColorSpecify the chip outline color.Chip.DisabledBorderColor | ChipGroup.ChipDisabledBorderColorSpecify the chip outline color in the disabled state.Chip.SelectedBorderColor | SelectableChipGroup.ChipSelectedBorderColorSpecify the chip outline color in the selected state. Note InputChipGroup does not support this option.Chip.PressedBorderColor | ChipGroup.ChipPressedBorderColorSpecify the chip outline color in the pressed state.Chip.BorderThickness | ChipGroup.ChipBorderThicknessSpecify the chip outline thickness.Chip.CornerRadius | ChipGroup.CornerRadiusDefine the corner radius for chips.
Chip.Padding | ChipGroup.PaddingSpecify the gap between the chip border and chip content.Chip.Margin | ChipGroup.MarginDefine the offset between the chip and other visual controls.
You can show ripple effects over chips when users select and unselect chips. To do so, use the following options:
Chip.UseRippleEffectSpecifies whether to enable ripple effects for the chip.ChipGroup.ChipUseRippleEffectSpecifies whether to enable ripple effects for chips in the chip group.
In chip groups, specify the ChipGroup.BoxMode property to specify whether chips are filled or outlined:
BoxMode = “Outlined” BoxMode = “Filled”
You can create a template that configures the appearance of chip content, and then use the following properties to assign it to chips:
ContentTemplateSpecifies a content template for standalone chips.ChipContentTemplateSpecifies a content template for chips in chip groups. See Also