WPF：使用扩展 WPF 工具包中的颜色画布和颜色选择器
3.38/5 (6投票s)
示例 WPF 应用程序，用于演示 Extended WPF Toolkit 中的 Color Canvas 和 Color Picker。
引言
前几天，我有机会使用 Extended WPF Toolkit 来进行 WPF 开发，我对他们提供的控件印象深刻。我将通过这篇文章来演示如何实现 Extended WPF Toolkit 中的 Color Canvas 和 Color Picker。如果您正计划在您的 WPF 应用程序中添加颜色选择功能，我希望这篇文章能对您有所帮助。
Extended WPF Toolkit
Extended WPF Toolkit™ 包含了一系列用于创建下一代 Windows 应用程序的 WPF 控件、组件和实用工具。使用它可以构建专业、现代化且易于使用的业务线应用程序。免费的开源 Community Edition 提供了许多有用的控件，而 Plus 版本则包含一些额外的控件。
如果您想探索 Extended WPF Toolkit，可以在线找到 Live Explorer 应用程序，它是一个 Click Once 应用程序。 立即尝试！
在本文中，我们将介绍 Color Canvas 和 Color Picker 控件。
Color Canvas
Color Canvas 允许您通过高级颜色画布、设置 HexadecimalString 或设置 ARGB 值来选择颜色。
点击此处 阅读关于 Color Canvas 控件的属性和事件。
颜色选择器
Color Picker 是一个编辑器，允许用户从预定义的颜色列表中选择颜色。默认情况下，有 140 种可用颜色和 10 种预定义的标准颜色。您可以设置 AvailableColors 和 StandardColors 属性来自定义您的颜色列表。您还可以通过 RecentColors 属性获取/设置最近使用的颜色。
点击此处 阅读关于 Color Picker 控件的属性和事件。
示例 WPF 应用程序
让我们创建一个新的 WPF 应用程序来体验实现。我使用的是 **Visual Studio 2010** 和 **Extended WPF Toolkit - 2.1.0**。在这个示例代码中，我将从初学者的角度解释 Color Canvas 和 Color Picker 的实现。
使用 Visual Studio 创建新的 WPF 应用程序
首先，我将创建一个名为 'ColorPickerSample' 的 WPF 应用程序。
创建项目后，我们需要将 Toolkit DLL 引用添加到我们的应用程序中。可以通过直接在应用程序中添加引用，或者使用 **NuGet** 来实现。
如果通过 **添加引用** 菜单添加引用，请确保您拥有 WPF Toolkit 的二进制文件。
您可以从 https://wpftoolkit.codeplex.com/ 下载二进制文件。
下载文件并将其解压到某个文件夹后。
在新建项目中，转到 **添加引用** 菜单（右键单击 _References_ 文件夹）
从解压的文件夹中选择 _Xceed.Wpf.Toolkit.dll_
现在，我们的应用程序已添加了引用。
如果您想通过 **NuGet** 安装，请转到 **工具** 菜单下的 **管理解决方案的 NuGet 程序包**，或者右键单击解决方案的 _References_ 文件夹（或者在 **程序包管理器控制台** 中输入 Install-Package Extended.Wpf.Toolkit）。
现在我们可以开始我们的示例应用程序了。
Color Canvas 示例
我将向应用程序添加一个新的 WPF 窗口。我将文件名命名为 'ColorCanvasSample.xaml'，并将 XAML 代码替换为以下代码：
<Window x:Class="ColorPickerSample.ColorCanvasSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="Color Canvas Sample" Height="300" Width="275">
<Grid>
<xctk:ColorCanvas />
</Grid>
</Window>
很简单，我们就为窗口添加了一个功能齐全的颜色画布。
为了使其工作，我添加了一个 xmlns，如下所示：
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
以及一个颜色画布控件，如下所示：
<xctk:ColorCanvas />
现在我们可以运行此应用程序来查看输出。在运行之前，我们需要将此窗口设置为启动窗口。为此，我们需要更新 _App.xaml_，如下所示：
<Application x:Class="ColorPickerSample.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="ColorCanvasSample.xaml">
<Application.Resources>
</Application.Resources>
</Application>
运行应用程序时，您将看到以下屏幕：
Color Picker 示例
现在，让我们添加另一个名为 'ColorPickerDropdownSample.xaml' 的 WPF 窗口。只需将 XAML 内容替换为以下代码：
<Window x:Class="ColorPickerSample.ColorPickerDropdownSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="ColoerPickerDropdownSample" Height="300" Width="300">
<Grid>
<xctk:ColorPicker x:Name="_colorPicker"
VerticalAlignment="Top" />
</Grid>
</Window>
为了使其工作，我添加了一个 xmlns，如下所示：
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
以及一个颜色选择器控件，如下所示：
<xctk:ColorPicker x:Name="_colorPicker"
VerticalAlignment="Top" />
将此窗口设置为启动窗口并运行，以查看以下输出：
组合示例
现在，我添加了一个名为 'ColorCanvasAndPicker.xaml' 的新 WPF 窗口，我将添加 Extended WPF Toolkit 中提供的示例代码，以了解主要属性和事件。
<Window x:Class="ColorPickerSample.ColorCanvasAndPicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="Color Canvas and Color Picker">
<Window.Resources>
<Style x:Key="controlInError"
TargetType="xctk:IntegerUpDown">
<Style.Triggers>
<Trigger Property="Validation.HasError"
Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors).CurrentItem.ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
<ObjectDataProvider x:Key="ColorModeOptions" MethodName="GetValues"
ObjectType="{x:Type sys:Enum}">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="xctk:ColorMode" />
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GroupBox Grid.Column="0"
Grid.Row="0"
Header="ColorCanvas Features"
HorizontalAlignment="Stretch">
<Grid>
<Grid.Resources>
<Style x:Key="alignStyle"
TargetType="{x:Type FrameworkElement}">
<Setter Property="Margin"
Value="5" />
</Style>
<Style TargetType="{x:Type TextBlock}"
BasedOn="{StaticResource alignStyle}" />
<Style TargetType="{x:Type TextBox}"
BasedOn="{StaticResource alignStyle}" />
<Style TargetType="{x:Type CheckBox}"
BasedOn="{StaticResource alignStyle}" />
<Style TargetType="{x:Type xctk:IntegerUpDown}"
BasedOn="{StaticResource alignStyle}">
<Setter Property="Width"
Value="45" />
<Setter Property="Minimum"
Value="0" />
<Setter Property="Maximum"
Value="255" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
Orientation="Horizontal">
<TextBlock Text="R:" />
<xctk:IntegerUpDown x:Name="_R"
Value="{Binding ElementName=_colorCanvas,
Path=R, Mode=TwoWay}"
Minimum="0"
Maximum="255"
Style="{StaticResource controlInError}" />
<TextBlock Text="G:"
Margin="5" />
<xctk:IntegerUpDown x:Name="_G"
Value="{Binding ElementName=_colorCanvas,
Path=G, Mode=TwoWay}"
Minimum="0"
Maximum="255"
Style="{StaticResource controlInError}" />
<TextBlock Text="B:"
Margin="5" />
<xctk:IntegerUpDown x:Name="_B"
Value="{Binding ElementName=_colorCanvas,
Path=B, Mode=TwoWay}"
Minimum="0"
Maximum="255"
Style="{StaticResource controlInError}" />
<TextBlock Text="A:"
Margin="5" />
<xctk:IntegerUpDown x:Name="_A"
Value="{Binding ElementName=_colorCanvas,
Path=A, Mode=TwoWay}"
Minimum="0"
Maximum="255"
Style="{StaticResource controlInError}" />
</StackPanel>
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="UsingAlphaChannel: " />
<CheckBox Grid.Column="1"
Grid.Row="1"
x:Name="_usingAlphaChannel"
IsChecked="{Binding ElementName=_colorCanvas,
Path=UsingAlphaChannel, Mode=TwoWay}" />
<TextBlock Grid.Column="0"
Grid.Row="2"
Text="HexadecimalString: " />
<TextBox Grid.Column="1"
Grid.Row="2"
IsEnabled="False"
Text="{Binding ElementName=_colorCanvas,
Path=HexadecimalString}" />
</Grid>
</GroupBox>
<TextBlock Text="ColorCanvas Usage: "
Grid.Row="1"
Margin="0,10,0,0"
/>
<xctk:ColorCanvas x:Name="_colorCanvas"
Grid.Row="2"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
SelectedColorChanged="_colorCanvas_SelectedColorChanged" />
</Grid>
<Grid Grid.Column="1"
Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GroupBox Grid.Column="0"
Grid.Row="0"
Header="ColorPicker Features"
HorizontalAlignment="Stretch"
Margin="10">
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Margin"
Value="3" />
<Setter Property="VerticalAlignment"
Value="Center" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin"
Value="3" />
</Style>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Margin"
Value="3" />
</Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Margin"
Value="3" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="ColorMode:" />
<ComboBox Grid.Column="1"
Grid.Row="0"
ItemsSource="{Binding Source={StaticResource ColorModeOptions}}"
SelectedItem="{Binding ElementName=_colorPicker,
Path=ColorMode, Mode=TwoWay}"
Height="22"/>
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="AvailableColorsHeader:" />
<TextBox Grid.Column="1"
Grid.Row="1"
Text="{Binding ElementName=_colorPicker,
Path=AvailableColorsHeader, Mode=TwoWay}" />
<TextBlock Grid.Column="0"
Grid.Row="2"
Text="RecentColorsHeader:" />
<TextBox Grid.Column="1"
Grid.Row="2"
Text="{Binding ElementName=_colorPicker,
Path=RecentColorsHeader, Mode=TwoWay}" />
<TextBlock Grid.Column="0"
Grid.Row="3"
Text="StandardColorsHeader:" />
<TextBox Grid.Column="1"
Grid.Row="3"
Text="{Binding ElementName=_colorPicker,
Path=StandardColorsHeader, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="5"
Grid.ColumnSpan="2"
Content="DisplayColorAndName"
IsChecked="{Binding ElementName=_colorPicker,
Path=DisplayColorAndName, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="6"
Grid.ColumnSpan="2"
Content="ShowAdvancedButton"
IsChecked="{Binding ElementName=_colorPicker,
Path=ShowAdvancedButton, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="7"
Grid.ColumnSpan="2"
Content="ShowAvailableColors"
IsChecked="{Binding ElementName=_colorPicker,
Path=ShowAvailableColors, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="8"
Grid.ColumnSpan="2"
Content="ShowDropDownButton"
IsChecked="{Binding ElementName=_colorPicker,
Path=ShowDropDownButton, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="9"
Grid.ColumnSpan="2"
Content="ShowRecentColors"
IsChecked="{Binding ElementName=_colorPicker,
Path=ShowRecentColors, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="10"
Grid.ColumnSpan="2"
Content="ShowStandardColors"
IsChecked="{Binding ElementName=_colorPicker,
Path=ShowStandardColors, Mode=TwoWay}" />
<CheckBox Grid.Column="0"
Grid.Row="11"
Grid.ColumnSpan="2"
Content="UsingAlphaChannel"
IsChecked="{Binding ElementName=_colorPicker,
Path=UsingAlphaChannel, Mode=TwoWay}" />
<TextBlock Grid.Column="0"
Grid.Row="12"
Text="SelectedColorText:" />
<TextBox Grid.Column="1"
Grid.Row="12"
IsEnabled="False"
Text="{Binding ElementName=_colorPicker,
Path=SelectedColorText}" />
</Grid>
</GroupBox>
<TextBlock Text="ColorPicker Usage: "
Grid.Row="1" />
<xctk:ColorPicker x:Name="_colorPicker"
Grid.Row="2"
VerticalAlignment="Top"
SelectedColorChanged="_colorPicker_SelectedColorChanged" />
</Grid>
</Grid>
</Window>
而 _xaml.cs_ 文件与以下代码相同：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace ColorPickerSample
{
/// <summary>
/// Interaction logic for ColorCanvasAndPicker.xaml
/// </summary>
public partial class ColorCanvasAndPicker : Window
{
public ColorCanvasAndPicker()
{
InitializeComponent();
}
private void _colorCanvas_SelectedColorChanged
(object sender, RoutedPropertyChangedEventArgs<Color> e)
{
_colorPicker.SelectedColor = _colorCanvas.SelectedColor;
}
private void _colorPicker_SelectedColorChanged
(object sender, RoutedPropertyChangedEventArgs<Color> e)
{
_colorCanvas.SelectedColor = _colorPicker.SelectedColor;
}
}
}
在 _xaml.cs_ 中，我为 color canvas 和 color picker 添加了 SelectedColorChanged 事件，以便两者都能反映相同的颜色。窗口输出如下所示：
其他所有控件都已添加，以演示属性及其用法。如果您查看下面的代码，您会发现我已经添加了与 Color Canvas 控件的 Text 绑定以及 HexadecimalString 属性。
<TextBox Grid.Column="1"
Grid.Row="2"
IsEnabled="False"
Text="{Binding ElementName=_colorCanvas, Path=HexadecimalString}" />
摘要
在本文中，我介绍了 Extended WPF Toolkit 中的 Color Canvas 和 Color Picker。如果我遗漏了任何内容或需要任何更正，请告诉我。希望您喜欢这篇文章，并从中获得了一些知识的增值。
历史
- 2014 年 5 月 29 日：初始版本