syncfusion-maui-color-picker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

.NET MAUI Color Picker Implementation

.NET MAUI颜色选择器实现

A comprehensive skill for implementing and customizing the Syncfusion .NET MAUI Color Picker (SfColorPicker) control. This control enables users to select colors from palette grids or spectrum gradients, with support for custom colors, recent colors, alpha transparency, and multiple display modes.

这是一份关于实现和自定义Syncfusion .NET MAUI颜色选择器（SfColorPicker）控件的综合指南。该控件支持用户从调色板网格或光谱渐变中选择颜色，同时提供自定义颜色、最近使用颜色、透明度设置以及多种显示模式。

When to Use This Skill

何时使用本指南

Use this skill when you need to:

Install and set up the Syncfusion .NET MAUI Color Picker
Implement color selection UI in .NET MAUI applications
Switch between Palette and Spectrum color modes
Customize color picker appearance (palettes, sliders, buttons)
Display color picker inline or as a popup/dropdown
Handle color selection events (ColorChanging, ColorChanged, ColorSelected)
Configure recent colors panel and custom color collections
Implement alpha/opacity control for colors
Customize display view (icons, templates, dropdown button)
Add localization support for different cultures
Enable modern Liquid Glass effect (.NET 10+)
Troubleshoot color picker implementation issues

当你需要以下功能时使用本指南：

安装并设置Syncfusion .NET MAUI颜色选择器
在.NET MAUI应用中实现颜色选择UI
在调色板模式和光谱模式之间切换
自定义颜色选择器外观（调色板、滑块、按钮）
以内联或弹窗/下拉菜单形式显示颜色选择器
处理颜色选择事件（ColorChanging、ColorChanged、ColorSelected）
配置最近使用颜色面板和自定义颜色集合
实现颜色的透明度/不透明度控制
自定义显示视图（图标、模板、下拉按钮）
添加多语言本地化支持
启用现代液态玻璃效果（.NET 10+）
排查颜色选择器实现过程中的问题

Component Overview

组件概述

The SfColorPicker is a versatile color selection control that provides:

Two color modes: Palette (predefined color grid) and Spectrum (gradient-based selection)
Custom colors: Add/remove custom colors to palette
Recent colors: Automatic tracking of recently selected colors
Alpha control: Adjustable transparency via alpha slider
Manual input: Direct color value entry (RGB, HSV, HEX formats)
Inline & Popup modes: Embed directly in layout or show as dropdown
No color option: Allow users to deselect/clear color
Rich customization: Extensive styling for palettes, sliders, buttons, and indicators
Localization: Multi-language support via resource files
Modern effects: Liquid Glass/Acrylic visual effect (.NET 10+)

SfColorPicker是一个多功能的颜色选择控件，提供以下特性：

两种颜色模式：调色板（预定义颜色网格）和光谱（基于渐变的选择）
自定义颜色：向调色板添加/移除自定义颜色
最近使用颜色：自动跟踪最近选择的颜色
透明度控制：通过透明度滑块调整透明度
手动输入：直接输入颜色值（RGB、HSV、HEX格式）
内联与弹窗模式：直接嵌入布局中或作为下拉菜单显示
无颜色选项：允许用户取消选择/清除颜色
丰富的自定义选项：对调色板、滑块、按钮和指示器进行广泛样式设置
本地化：通过资源文件支持多语言
现代视觉效果：液态玻璃/亚克力视觉效果（.NET 10+）

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation via NuGet package
Handler registration in MauiProgram.cs
Basic SfColorPicker implementation (XAML & C#)
First working color picker example

📄 阅读： references/getting-started.md

通过NuGet包安装
在MauiProgram.cs中注册处理器
基础SfColorPicker实现（XAML & C#）
第一个可用的颜色选择器示例

Color Modes and Selection

颜色模式与选择

📄 Read: references/modes-and-selection.md

ColorMode property (Palette vs Spectrum)
Setting default SelectedColor
Color mode switcher visibility
Recent colors panel (ShowRecentColors)
ClearRecentColors method
ShowNoColor option

📄 阅读： references/modes-and-selection.md

ColorMode属性（调色板vs光谱）
设置默认SelectedColor
颜色模式切换器可见性
最近使用颜色面板（ShowRecentColors）
ClearRecentColors方法
ShowNoColor选项

Customization

自定义配置

📄 Read: references/customization.md

Input area visibility
Alpha slider configuration
Action buttons (Apply/Cancel) visibility and styling
Button background and label styles
Recent colors and spectrum input view label styles
Palette customization (row/column count, spacing, cell shape, size, corner radius)
Custom palette colors (PaletteColors)
Selection indicator customization (radius, stroke, thickness)
Slider thumb customization (fill, radius, stroke, thickness)
Popup customization (IsOpen, background, relative position)

📄 阅读： references/customization.md

输入区域可见性
透明度滑块配置
操作按钮（应用/取消）的可见性和样式设置
按钮背景和标签样式
最近使用颜色和光谱输入视图的标签样式
调色板自定义（行列数、间距、单元格形状、尺寸、圆角半径）
自定义调色板颜色（PaletteColors）
选择指示器自定义（半径、描边、厚度）
滑块滑块自定义（填充色、半径、描边、厚度）
弹窗自定义（IsOpen、背景、相对位置）

Display View Customization

显示视图自定义

📄 Read: references/display-view.md

Selected color icon (SelectedColorIcon)
Selected color icon size
Selected color template (SelectedColorTemplate)
Drop-down button template (DropDownButtonTemplate)
Display view height, stroke, and stroke thickness
Dropdown button width

📄 阅读： references/display-view.md

选中颜色图标（SelectedColorIcon）
选中颜色图标尺寸
选中颜色模板（SelectedColorTemplate）
下拉按钮模板（DropDownButtonTemplate）
显示视图高度、描边和描边厚度
下拉按钮宽度

Inline Rendering

内联渲染

📄 Read: references/inline-rendering.md

IsInline property
When to use inline vs popup mode
Inline color picker implementation
Use cases for embedded color pickers

📄 阅读： references/inline-rendering.md

IsInline属性
何时使用内联模式vs弹窗模式
内联颜色选择器实现
嵌入颜色选择器的使用场景

Events and Interaction

事件与交互

📄 Read: references/events-and-interaction.md

ColorChanging event (with cancellation support)
ColorChanged event (behavior with action buttons)
ColorSelected event
ColorChangedCommand
Event arguments and properties
Practical examples with UI updates

📄 阅读： references/events-and-interaction.md

ColorChanging事件（支持取消操作）
ColorChanged事件（与操作按钮的交互行为）
ColorSelected事件
ColorChangedCommand
事件参数与属性
结合UI更新的实用示例

Advanced Features

高级特性

📄 Read: references/advanced-features.md

Localization setup and configuration
Setting CurrentUICulture
Resource file structure
Liquid Glass effect (EnableLiquidGlassEffect)
Platform requirements (.NET 10+, iOS 26, macOS 26)
Visual tips and best practices

📄 阅读： references/advanced-features.md

本地化设置与配置
设置CurrentUICulture
资源文件结构
液态玻璃效果（EnableLiquidGlassEffect）
平台要求（.NET 10+、iOS 26、macOS 26）
视觉技巧与最佳实践