颜色选取器

#颜色选取器| 来源: 网络整理| 查看: 265

颜色选取器项目 06/02/2023

颜色选取器用于浏览和选择颜色。默认情况下，它允许用户浏览光谱上的颜色，或在红-绿-蓝 (RGB) 、色调饱和度值 (HSV) 或十六进制文本框中指定颜色。

这是正确的控件吗？

使用颜色选取器可使用户可以应用中选择颜色。例如，使用它可更改颜色设置，如字体颜色、背景或应用主题颜色。

如果应用是用于绘图或使用触笔的类似任务，请考虑使用墨迹书写控件以及颜色选取器。

建议考虑哪种颜色选取体验适合你的应用。某些方案可能无需精细的颜色选取，可受益于简化选取器若要获得最准确的颜色选取体验，请使用正方形色谱并确保它至少是 256x256 像素，或是包含文本输入字段以便让用户可以优化其所选颜色。在浮出控件中使用时，在色谱中点击或单独调整滑块不应提交颜色选择。若要提交选择，请执行以下操作：提供提交和取消按钮以应用或取消选择。点击后退按钮或在浮出控件外部点击会清除它，而不保存用户选择。或者，通过在浮出控件外部点击或点击后退按钮，在清除浮出控件时提交选择。 UWP 和 WinUI 2

重要

本文中的信息和示例针对使用 Windows 应用 SDK 和 WinUI 3 的应用进行优化，但通常适用于使用 WinUI 2 的 UWP 应用。有关特定于平台的信息和示例，请参阅 UWP API 参考。

本部分包含你在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

UWP 应用的 ColorPicker 控件作为 Windows UI 库 2 的一部分包含在内。有关详细信息（包括安装说明），请参阅 Windows UI 库。此控件的 API 同时存在于 Windows.UI.Xaml.Controls 和 Microsoft.UI.Xaml.Controls 命名空间中。

UWP API：ColorPicker 类、 Color 属性、 ColorChanged 事件 WinUI 2 Apis：ColorPicker 类， Color 属性， ColorChanged 事件打开 WinUI 2 库应用，查看 ColorPicker 的实际应用。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 来获取所有控件的最新样式、模板和功能。 WinUI 2.2 或更高版本包含此控件的新模板，该模板使用圆角。有关详细信息，请参阅圆角半径。

若要将本文中的代码与 WinUI 2 配合使用，请使用 XAML 中的别名 (我们使用 muxc) 来表示项目中包含的 Windows UI 库 API。有关详细信息，请参阅 WinUI 2 入门。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 创建颜色选取器重要 API：ColorPicker 类、 Color 属性、 ColorChanged 事件

打开 WinUI 3 库应用，查看 ColorPicker 的实际应用。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

此示例演示如何在 XAML 中创建默认颜色选取器。

默认情况下，颜色选取器在色谱旁的矩形栏中显示所选颜色的预览。可以使用 ColorChanged 事件或 Color 属性访问所选颜色并在应用中使用它。有关详细代码，请参阅下面的示例。

绑定到所选颜色

当颜色选择应立即生效时，可以使用数据绑定绑定到 Color 属性，或处理 ColorChanged 事件以在代码中访问所选颜色。

在此示例中，会将用作 Rectangle 的 Fill 的 SolidColorBrush 的 Color 属性直接绑定到颜色选取器的所选颜色。对颜色选取器进行的任何更改都会导致绑定属性发生实时更改。

此示例使用只带有圆形和滑块的简化颜色选取器，这是常用的“非正式”颜色选取体验。当颜色更改可以进行显示并在受影响对象上实时发生时，无需显示颜色预览栏。有关详细信息，请参阅自定义颜色选取器部分。

保存所选颜色

在某些情况下，你不想立即应用颜色更改。例如，在浮出控件中托管颜色选取器时，建议仅在用户确认选择或关闭浮出控件后应用所选颜色。还可以保存所选颜色值以供将来使用。

在此示例中，在具有“确认”和“取消”按钮的浮出控件中承载颜色选取器。当用户确认其颜色选择时，保存所选颜色以便将来在应用中使用。

private Color myColor; private void confirmColor_Click(object sender, RoutedEventArgs e) { // Assign the selected color to a variable to use outside the popup. myColor = myColorPicker.Color; // Close the Flyout. colorPickerButton.Flyout.Hide(); } private void cancelColor_Click(object sender, RoutedEventArgs e) { // Close the Flyout. colorPickerButton.Flyout.Hide(); } 配置颜色选取器

使用户可以选取颜色并不一定需要所有字段，因此颜色选取器十分灵活。它提供了各种选项，使你可以配置控件以符合需求。

例如，当用户无需精确控制时（如在笔记应用中选取荧光笔颜色），则可以使用简化 UI。可以隐藏文本输入字段，并将色谱更改为圆形。

当用户需要精确控制时（如在图形设计应用中），可以为颜色的每个方面都显示滑块和文本输入字段。

显示圆形色谱

此示例演示如何使用 ColorSpectrumShape 属性将颜色选取器配置为使用圆形色谱而不是默认的正方形。

必须在正方形与圆形色谱之间进行选择时，一个主要考虑因素是准确性。用户在使用正方形选择特定颜色时会拥有更多控制权，因为会显示更多色域。应将圆形色谱视为更多“非正式”颜色选择体验。

显示 alpha 通道

在此示例中，会在颜色选取器上启用不透明度滑块和文本框。

显示简单选取器

此示例演示如何配置具有简单 UI 的颜色选取器以进行“非正式”使用。会显示圆形色谱并隐藏默认文本输入框。当颜色更改可以进行显示并在受影响对象上实时发生时，无需显示颜色预览栏。否则，应让颜色预览保持可见。

指定布局方向

使用 Orientation 属性来指定 ColorPicker 应垂直对齐还是水平对齐。这会影响编辑控件相对于色谱的位置。默认情况下，方向为 Vertical。

注意

如果“方向”设置为“水平”，则 ColorPicker 不会应用 IsMoreButtonVisible 属性。

显示或隐藏其他功能

下表显示可以用于配置 ColorPicker 控件的所有选项。

功能 “属性” 色谱 IsColorSpectrumVisible、ColorSpectrumShape、ColorSpectrumComponents 颜色预览 IsColorPreviewVisible 颜色值 IsColorSliderVisible、IsColorChannelTextInputVisible 不透明度值 IsAlphaEnabled、IsAlphaSliderVisible、IsAlphaTextInputVisible 十六进制值 IsHexInputVisible

注意

IsAlphaEnabled 必须为 true，才能显示不透明度文本框和滑块。随后可以使用 IsAlphaTextInputVisible 和 IsAlphaSliderVisible 属性修改输入控件的可见性。有关详细信息，请参阅 API 文档。

获取示例代码 WinUI 库示例 - 以交互式格式查看所有 XAML 控件。相关文章 Windows 应用中的笔和触笔交互墨迹书写

【本文地址】

颜色选取器

颜色选取器

今日新闻

推荐新闻