如何为颜色选择器（wpf）创建颜色画布

Question

我想在 Visual Studio 或 Blend 或此处 (http://www.codeproject.com/Articles/779105/Color-Canvas-and-Color-Picker-WPF-Toolkit) 中创建自定义颜色选择器。 我有一个问题。我不知道如何像上面的链接那样创建彩色画布。 （可能不是画布。它是别的东西） 我看起来像一个非常不寻常的渐变画布......我不知道如何在 xaml 中制作它。我试图在 Visual Studio 中绘制它，但没有运气...... 任何帮助将不胜感激。

提前致谢

Answer 1

可以使用常规LinearGradientBrush 创建色调条。水平/饱和度面板可以使用适当颜色的LinearGradientBrush 沿 X 轴完成，另一个作为不透明蒙版沿 Y 轴完成，整个事物在黑色背景下绘制。

<Window.Resources>

    <!-- Change this to any pure hue i.e. no more than 2 rgb components set and at least 1 set to FF -->
    <Color x:Key="CurrentColor">#00FF00</Color>

    <LinearGradientBrush x:Key="HueBrush" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FF0000" Offset="0" />
            <GradientStop Color="#FFFF00" Offset="0.167" />
            <GradientStop Color="#00FF00" Offset="0.333" />
            <GradientStop Color="#00FFFF" Offset="0.5" />
            <GradientStop Color="#0000FF" Offset="0.667" />
            <GradientStop Color="#FF00FF" Offset="0.833" />
            <GradientStop Color="#FF0000" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <VisualBrush x:Key="LevelSaturationBrush" TileMode="None">
        <VisualBrush.Visual>
            <Canvas Background="Black" Width="1" Height="1" SnapsToDevicePixels="True">
                <Rectangle Width="1" Height="1" SnapsToDevicePixels="True">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="{DynamicResource CurrentColor}" Offset="1" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Canvas>
        </VisualBrush.Visual>
    </VisualBrush>

</Window.Resources>

<StackPanel Orientation="Horizontal">
    <Rectangle Fill="{StaticResource LevelSaturationBrush}" Width="200" Height="200" Margin="10" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" />
    <Rectangle Fill="{StaticResource HueBrush}" Width="20" Height="200" Margin="10" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" />
</StackPanel>

结果：