WPF实现简单的颜色调色板功能

最新推荐文章于 2023-06-25 15:52:20 发布

原创

最新推荐文章于 2023-06-25 15:52:20 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#WPF #ColorSelector

本文介绍了如何在WPF中不依赖System.Windows.Forms，而是利用Canvas等控件手动创建一个简单的颜色调色板。虽然效果可能不如Winform的ColorDialog，但通过此方法可以自定义更多的功能，如调整颜色数值和添加缩放参数。目前实现的功能有限，未来可考虑增加RGB数值绑定等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Winform有自带的ColorDialog功能，WPF可以通过引用System.Windows.Forms的方式来创建调色板，在这里仅使用Canvas等控件来实现简单的调色板。效果如下：

gif录制的比较渣，实际效果图：

1、窗体xaml

<Window x:Class="ColorSelectorDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ColorSelectorDemo"
        mc:Ignorable="d" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
        Title="ColorSelector" Height="215" Width="260">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="20"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!--调色板-->
        <Border Grid.Column="0" Grid.Row="0" BorderBrush="#d3d3d3" BorderThickness="1" Width="197" Height="135" HorizontalAlignment="Left">
            <Canvas>
                <Image x:Name="imgColor" Stretch="Fill" Width="195" Height="133" MouseDown="imgColor_MouseDown" MouseUp="imgColor_MouseUp"></Image>
                <Ellipse x:Name="ellColor" Canvas.Left="-4" Canvas.Bottom="-4" Width="8" Height="8" Fill="Transparent" Opacity="0.5" Stroke="White" StrokeThickness="1"/>
            </Canvas>
        </Border>
        <!--颜色选择器-->
        <Border Grid.Column="1" BorderBrush="#d3d3d3" BorderThickness="1" Width="20" Height="135">
            <Canvas>
                <Image x:Name="imgColorSelector" Stretch="Fill" Width="18" Height="133" MouseDown="imgColorSelector_MouseDown" MouseUp="imgColorSelector_MouseUp"></Image>
                <Rectangle x:Name="rectColorSelector" Canvas.Left="0" Canvas.Top="129" Height="4" Width="18" Stroke="Red"></Rectangle>
            </Canvas>
        </Border>
        <Border x:Name="SelectColor" Grid.Row="1" Grid.ColumnSpan="2" Height="20" BorderBrush="#d3d3d3" BorderThickness="1"></Border>
    </Grid>
</Window&g