Color Selection

The ActiproSoftware.Windows.Controls.ColorSelection namespace contains several controls for performing color selection similar to that found in Adobe Photoshop or Microsoft Expression Blend.

The SpectrumColorPicker Control

The SpectrumColorPicker is a control that allows for visual color selection. It uses the SpectrumSlice and SpectrumSlider controls that are also included in the Shared libary.

The SpectrumColorPicker control with some TextBoxes bound to its selected color

This control has these important properties:

TextBox controls can be bound to the SpectrumColorPicker to provide text entry of the various color values. For web color entry (e.g., "#FF0000"), we have supplied a ColorToStringConverter class that can be used in a binding.

This XAML code shows how to create the color picker displayed above with all the bounds TextBox controls:

<Window x:Class="Sample.Application.Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
        >
	<Grid>
		<Grid.Resources>
			<shared:ColorToStringConverter x:Key="ColorToStringConverter" />
		</Grid.Resources>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="Auto" />
		</Grid.ColumnDefinitions>

		<shared:SpectrumColorPicker x:Name="spectrumColorPicker" Grid.RowSpan="5" Margin="0,0,10,0" InitialColor="Red" SelectedColor="Purple" />

		<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">R:</Label>
		<TextBox Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3"
		         Text="{Binding ElementName=spectrumColorPicker, Path=R}" />
		<Label Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">G:</Label>
		<TextBox Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3"
		         Text="{Binding ElementName=spectrumColorPicker, Path=G}" />
		<Label Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">B:</Label>
		<TextBox Grid.Row="2" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3"
		         Text="{Binding ElementName=spectrumColorPicker, Path=B}"></TextBox>
		<TextBox Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Center"
		         Margin="0,0,0,21" MinWidth="70" MaxLength="9"
		         Text="{Binding ElementName=spectrumColorPicker, Path=SelectedColor, Converter={StaticResource ColorToStringConverter}, ConverterParameter=False}" />

	</Grid>
</Window>

The SpectrumSlice Control

The SpectrumSlice control is part of the SpectrumColorPicker control and is used to display a slice of saturation/brightness colors for a particular hue on the left side of the color picker. However, this control may be used on its own.

This control has these important properties:

The SpectrumSlider Control

The SpectrumSlider control is part of the SpectrumColorPicker control and is used to display a hue spectrum on the right side of the color picker. However, this control may be used on its own.

The Value of the control may be in the range of 0 to 360 and specifies the hue component in the HSB color space.

The ColorComponentSlider Control

The ColorComponentSlider control can be used in conjunction with or independently of the SpectrumColorPicker control to modify a single component of the ARGB color.

Four instances of ColorComponentSlider each bound to a different component of the same color

The Value of the control may be in the range of 0 to 255 and specifies the component value based on the ColorComponentSlider.Component property. The ColorComponentSlider.SelectedColor property can be used to set or get the selected color of the slider.

The GradientBrushSlider Control

The GradientBrushSlider control can be used to modify the offsets of the gradient stops of a LinearGradientBrush or RadialGradientBrush. Each gradient stop is represented by a Thumb, which can be selected by the user. The selected gradient stop is represented by the SelectedStop property can allows it's color to be bound to an editor, such as the SpectrumColorPicker.

This control has these important members:

Mouse Interaction

The offsets of the gradient stops can be adjusted by dragging the associated Thumb along the slider. New gradient stops can be added by clicking on the slider background. Finally, gradient stops can be removed by dragging the Thumb below (horizontal) or to the right (vertical) the slider.

Commands

The GradientBrushSlider.AddStopCommand routed command can be executed on the GradientBrushSlider to add a gradient stop. Similarly, the GradientBrushSlider.RemoveStopCommand routed command can be used to remove the selected stop.