Back to Details

syncfusion-maui-chips

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing .NET MAUI Chips

实现.NET MAUI Chips控件

The Syncfusion .NET MAUI Chips control provides versatile and feature-rich components (
SfChip
and 
SfChipGroup
) for displaying information in compact, interactive layouts. Chips enable users to view, select, filter, or trigger actions through visually appealing and customizable UI elements.
Syncfusion .NET MAUI Chips控件提供了功能丰富的多用途组件（
SfChip
和
SfChipGroup
），用于在紧凑的交互式布局中展示信息。Chips允许用户通过视觉吸引力强且可自定义的UI元素查看、选择、筛选或触发操作。

When to Use This Skill

何时使用该技能

Use this skill when the user needs to:
  • Display categorical data as compact, interactive chips (tags, labels, categories)
  • Implement selection interfaces with single or multi-select chip groups
  • Create input chips that can be dynamically added or removed by users
  • Build filter interfaces with multi-selection indicators for data filtering
  • Add action chips that execute commands when clicked
  • Customize chip appearance with colors, borders, icons, fonts, and images
  • Handle chip interactions through selection events, click handlers, or removal events
  • Bind chip data from collections using ItemsSource and DisplayMemberPath
当用户需要以下功能时，可使用该技能：
  • 将分类数据显示为紧凑的交互式chips（标签、标记、类别）
  • 实现带有单选或多选chip组的选择界面
  • 创建可由用户动态添加或移除的输入chips
  • 构建带有多选指示器的筛选界面以进行数据筛选
  • 添加点击时可执行命令的操作chips
  • 通过颜色、边框、图标、字体和图像自定义chip外观
  • 通过选择事件、点击处理程序或移除事件处理chip交互
  • 使用ItemsSource和DisplayMemberPath从集合中绑定chip数据

Component Overview

组件概述

SfChip: Individual chip component with text, icon, close button, and customization options.
SfChipGroup: Container that manages multiple chips with support for:
  • Four chip types: Input, Choice, Filter, Action
  • Data binding with ItemsSource
  • Selection modes and visual states
  • Layout customization (FlexLayout, StackLayout, etc.)
  • Event handling for selection and removal
Key Capabilities:
  • Dynamic chip creation and removal
  • Single and multi-selection modes
  • Visual selection indicators
  • Icon and background image support
  • Comprehensive styling options
  • MVVM command support
  • Event-driven interactions
SfChip： 单个chip组件，包含文本、图标、关闭按钮和自定义选项。
SfChipGroup： 管理多个chips的容器，支持：
  • 四种chip类型：输入、选择、筛选、操作
  • 与ItemsSource的数据绑定
  • 选择模式和视觉状态
  • 布局自定义（FlexLayout、StackLayout等）
  • 选择和移除事件处理
核心功能：
  • 动态创建和移除chip
  • 单选和多选模式
  • 视觉选择指示器
  • 图标和背景图片支持
  • 全面的样式设置选项
  • MVVM命令支持
  • 事件驱动的交互

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
When the user needs to:
  • Install and configure Syncfusion .NET MAUI Chips package
  • Register the Syncfusion Core handler in MauiProgram.cs
  • Create first SfChip or SfChipGroup
  • Set up chip layouts (FlexLayout, StackLayout)
  • Understand basic chip setup and configuration
  • See a minimal working example
📄 阅读： references/getting-started.md
当用户需要以下内容时：
  • 安装和配置Syncfusion .NET MAUI Chips包
  • 在MauiProgram.cs中注册Syncfusion Core处理程序
  • 创建第一个SfChip或SfChipGroup
  • 设置chip布局（FlexLayout、StackLayout等）
  • 了解基本的chip设置和配置
  • 查看最小化工作示例

Chip Types and Selection Modes

Chip类型与选择模式

📄 Read: references/chip-types.md
When the user needs to:
  • Understand the four chip types: Input, Choice, Filter, Action
  • Implement Input chips with dynamic add/remove functionality
  • Create Choice chips with single selection (ChoiceMode: Single, SingleOrNone)
  • Build Filter chips with multi-selection and selection indicators
  • Use Action chips with command execution
  • Configure visual states for selected/normal states
  • Choose the appropriate chip type for their use case
📄 阅读： references/chip-types.md
当用户需要以下内容时：
  • 了解四种chip类型：输入、选择、筛选、操作
  • 实现可动态添加/移除的输入chips
  • 创建带有单选功能的选择chips（选择模式：Single、SingleOrNone）
  • 构建带有多选和选择指示器的筛选chips
  • 使用可执行命令的操作chips
  • 配置选中/正常状态的视觉样式
  • 为使用场景选择合适的chip类型

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md
When the user needs to:
  • Customize individual SfChip appearance
    • Show/hide close button and selection indicator
    • Change colors (background, text, border, close button, selection indicator)
    • Modify border properties (stroke thickness, corner radius)
    • Style text (font size, family, attributes, color, alignment)
    • Configure icons (show, source, size, alignment)
    • Add background images
  • Customize SfChipGroup styling
    • Set chip and selected chip colors
    • Configure border and padding
    • Adjust item height and text size
    • Style selection indicators
  • Implement commands for MVVM pattern
  • Apply consistent theming across chip groups
📄 阅读： references/customization.md
当用户需要以下内容时：
  • 自定义单个SfChip的外观
    • 显示/隐藏关闭按钮和选择指示器
    • 更改颜色（背景、文本、边框、关闭按钮、选择指示器）
    • 修改边框属性（边框厚度、圆角半径）
    • 设置文本样式（字体大小、字体族、属性、颜色、对齐方式）
    • 配置图标（显示、来源、大小、对齐方式）
    • 添加背景图片
  • 自定义SfChipGroup的样式
    • 设置chip和选中chip的颜色
    • 配置边框和内边距
    • 调整项高度和文本大小
    • 设置选择指示器样式
  • 为MVVM模式实现命令
  • 在chip组中应用一致的主题

Populating Data

数据填充

📄 Read: references/populating-data.md
When the user needs to:
  • Bind business objects to chips using ItemsSource
  • Use DisplayMemberPath to specify the text property
  • Use ImageMemberPath to bind icon images
  • Create model and ViewModel classes for chip data
  • Populate chips with SfChip items directly using Items collection
  • Add InputView for dynamic chip creation
  • Implement data binding best practices
  • Handle AOT publishing considerations with [Preserve] attribute
📄 阅读： references/populating-data.md
当用户需要以下内容时：
  • 使用ItemsSource将业务对象绑定到chips
  • 使用DisplayMemberPath指定文本属性
  • 使用ImageMemberPath绑定图标图片
  • 为chip数据创建模型和ViewModel类
  • 使用Items集合直接填充SfChip项
  • 添加InputView以动态创建chip
  • 实现数据绑定最佳实践
  • 使用[Preserve]属性处理AOT发布注意事项

Events and Interactions

事件与交互

📄 Read: references/events.md
When the user needs to:
  • Handle SelectionChanging event (cancellable, before selection)
  • Handle SelectionChanged event (after selection completes)
  • Respond to ChipClicked events
  • Handle ItemRemoved events for Input type chips
  • Capture CloseButtonClicked events
  • Understand event arguments and properties
  • Know which events are supported for each chip type
📄 阅读： references/events.md
当用户需要以下内容时：
  • 处理SelectionChanging事件（可取消，在选择前触发）
  • 处理SelectionChanged事件（选择完成后触发）
  • 响应ChipClicked事件
  • 处理输入类型chip的ItemRemoved事件
  • 捕获CloseButtonClicked事件
  • 了解事件参数和属性
  • 了解每种chip类型支持的事件

Advanced Features

高级功能

📄 Read: references/advanced-features.md
When the user needs to:
  • Apply font icons to chips (custom icon fonts)
  • Use DataTemplateSelector for custom chip templates
  • Implement Liquid Glass visual effects
  • Programmatically control selection with IsSelected property
  • Handle AOT publishing requirements
  • Apply platform-specific customizations
📄 阅读： references/advanced-features.md
当用户需要以下内容时：
  • 为chips应用字体图标（自定义图标字体）
  • 使用DataTemplateSelector创建自定义chip模板
  • 实现Liquid Glass视觉效果
  • 通过IsSelected属性以编程方式控制选择
  • 处理AOT发布要求
  • 应用特定平台的自定义设置