UWP添加XamlControlsResources后如何缩小ColorSpectrum内选择器尺寸

在添加XamlControlsResources后，ColorPicker采用了WinUI的默认样式，ColorSpectrum的选择器尺寸可以通过以下两种方式调整：

方法一：覆盖内置资源（推荐） #

WinUI为ColorSpectrum的选择器尺寸定义了专门的资源键，直接在资源字典中重新定义这些值即可，无需修改完整样式：

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
    <!-- 调整选择器的宽高 -->
    <x:Double x:Key="ColorSpectrumPickerWidth">12</x:Double>
    <x:Double x:Key="ColorSpectrumPickerHeight">12</x:Double>
</Application.Resources>

如果使用的是WinUI 2.x版本，资源键为ColorPickerSpectrumPointerSize，可以这样设置：

<x:Double x:Key="ColorPickerSpectrumPointerSize">12</x:Double>

方法二：修改ColorSpectrum的默认样式 #

如果需要更精细的控制（比如修改选择器的形状、颜色等），可以提取并修改完整样式：

1. 在Visual Studio中，右键页面中的ColorPicker控件 → 编辑模板 → 编辑副本，选择将样式保存到App.xaml或当前页面的资源中。
2. 在生成的样式中找到名为SpectrumPicker的元素（通常是Ellipse或Path），调整其Width和Height属性：

<Ellipse x:Name="SpectrumPicker"
         Width="12"
         Height="12"
         Fill="{ThemeResource ColorPickerSpectrumPickerFill}"
         Stroke="{ThemeResource ColorPickerSpectrumPickerStroke}"
         StrokeThickness="{ThemeResource ColorPickerSpectrumPickerStrokeThickness}"/>

3. 保存后，ColorSpectrum的选择器尺寸会自动应用新的设置。

注意：修改样式后，建议测试选择器的交互逻辑，确保点击光谱区域时选择器能准确定位到对应颜色。

内容的提问来源于stack exchange，提问作者tAMBI99