syncfusion-winui-color-picker

用途

本技能专门用于在 WinUI 应用中实现 Syncfusion 的 SfColorPicker 颜色选择器控件，而非通用的取色方案。当用户需要在 WinUI 应用中构建颜色选择界面、选择纯色、创建渐变画刷、定制颜色光谱、控制透明度或处理颜色变更事件时，可使用本技能。

主要能力

纯色选择：支持 RGB、HSV、HSL、CMYK 色彩模型，并提供十六进制编辑器。
渐变画刷：支持线性渐变与径向渐变画刷，可包含多个色标（GradientStop）。
颜色光谱：提供可交互的颜色选择区域，形状可选方形（Box）或环形（Ring）。
透明度控制：通过滑块和文本输入调整 Alpha 通道。
模式切换：可在纯色与渐变模式之间动态切换。
事件通知：提供实时的颜色选择变更事件。

关键命名空间：using Syncfusion.UI.Xaml.Editors; NuGet 包：Syncfusion.Editors.WinUI

使用方式

技能按主题提供参考文档，按需查阅：

入门（references/getting-started.md）：安装与 NuGet 包配置、基本控件实现、命名空间与程序集引用、首个可运行的 XAML + C# 示例、控件结构与初始化排错。
纯色选择（references/solid-color-selection.md）：SelectedBrush 属性、ColorChannelOptions（RGB/HSV/HSL/CMYK）、BrushTypeOptions 限制纯色模式、AlphaInputOptions、IsHexInputVisible、ColorChannelInputOptions、ColorEditorsVisibilityMode、SelectedBrushChanged 事件。
渐变颜色选择（references/gradient-color-selection.md）：LinearGradientBrush（GradientStop、StartPoint、EndPoint）、RadialGradientBrush（GradientOrigin、Center、RadiusX、RadiusY）、交互式渐变创建、AxisInputOption（Simple/Advanced）、色标增删与排序、渐变透明度、渐变变更事件。
UI 定制与模式（references/ui-customization.md）：BrushTypeOptions 配置、画刷模式下拉行为、ColorSpectrumShape（Box/Ring）、ColorSpectrumComponents、常见定制模式。
最佳实践与排错（references/best-practices.md）：纯色与渐变的选择建议、渐变性能优化、常见用例模式、渲染问题排错、无障碍考虑、集成模式（浮出控件、对话框、属性面板）。

快速开始示例：

XAML：

<Page
    x:Class="ColorPickerApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors">

    <Grid>
        <editors:SfColorPicker
            x:Name="colorPicker"
            SelectedBrush="Blue"
            BrushTypeOptions="All"
            SelectedBrushChanged="ColorPicker_SelectedBrushChanged" />
    </Grid>
</Page>

C# 代码隐藏：

using Syncfusion.UI.Xaml.Editors;
using Microsoft.UI.Xaml.Media;

private void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs args)
{
    if (args?.NewBrush is SolidColorBrush solidBrush)
    {
        var color = solidBrush.Color; // Access R, G, B, A
    }
    else if (args?.NewBrush is LinearGradientBrush linearBrush)
    {
        var stops = linearBrush.GradientStops;
    }
    else if (args?.NewBrush is RadialGradientBrush radialBrush)
    {
        var stops = radialBrush.GradientStops;
    }
}

常见模式：

仅纯色选择器：

<editors:SfColorPicker
    BrushTypeOptions="SolidColorBrush"
    ColorChannelOptions="RGB"
    IsHexInputVisible="True" />

仅渐变编辑器：

<editors:SfColorPicker
    BrushTypeOptions="LinearGradientBrush,RadialGradientBrush"
    AxisInputOption="Simple" />

以编程方式选择颜色：

// 纯色
colorPicker.SelectedBrush = new SolidColorBrush(Colors.Red);

// 线性渐变
var linearGradient = new LinearGradientBrush();
linearGradient.StartPoint = new Point(0, 0);
linearGradient.EndPoint = new Point(1, 1);
linearGradient.GradientStops.Add(new GradientStop() { Color = Colors.Yellow, Offset = 0.0 });
linearGradient.GradientStops.Add(new GradientStop() { Color = Colors.Red, Offset = 1.0 });
colorPicker.SelectedBrush = linearGradient;

自定义光谱形状：

<editors:SfColorPicker
    ColorSpectrumShape="Ring"
    ColorSpectrumComponents="HueSaturation" />

关键属性：SelectedBrush（Brush，默认 Blue）、BrushTypeOptions（默认 All）、ColorChannelOptions（默认 RGB）、ColorSpectrumShape（默认 Box）、ColorSpectrumComponents（默认 SaturationValue）、AlphaInputOptions（默认 All）、IsHexInputVisible（bool，默认 true）、ColorChannelInputOptions（默认 All）、ColorEditorsVisibilityMode（默认 Inline）、AxisInputOption（默认 Simple）。

关键事件：SelectedBrushChanged，参数为 SelectedBrushChangedEventArgs，包含 OldBrush（先前选择）与 NewBrush（新选择）。

适用场景

主题色选择器：让用户自定义应用主题颜色。
绘图工具：为图形/绘图应用提供取色。
样式编辑器：在设计工具中定制 UI 元素颜色。
渐变背景编辑器：创建渐变背景或视觉效果。
调色板管理器：在创意应用中管理调色板。

限制

本技能仅针对 Syncfusion WinUI Color Picker（SfColorPicker）控件，不适用于通用取色方案。使用前需安装 Syncfusion.Editors.WinUI NuGet 包并引用 Syncfusion.UI.Xaml.Editors 命名空间。关于收费、价格、平台支持范围等具体信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制