RainbowSlider Control

Yesterday I’ve posted the article on the OpacitySlider Control. The RainbowSlider is one else control to the bug of Color Picker related components.

RainbowSlider control is designed as the mean to select a Color from the color spectrum given. It’s the extension of the Slider control.

RainbowSlider control overrides the default template of the parent Slider control and looks like follows:

i.e. its style redefines the slider background and the constituent Thumb control template.

As you can see at the figure above the RainbowSlider control takes into account the parent Slider control Orientation property and can be presented as the horizontal or the vertical bar.

Read-only SelectedColor Dependency Property of the RainbowSlider used to get the value of the Color selected. This property value is synchronized with Minimum, Maximum and Value properties values of the parent Slider control. To set the SelectedColor value the caller can set the Value property value to the position of the color in the spectrum (linear interpolation over the Rainbow color sequence involved). Another way to change the SelectedColor property from the code is the RainbowSlider.TrySetSelectedColor method. It gets the color argument and tries to find that color in the Rainbow. On success it sets the selector position accordingly and returns true; otherwise it returns false. When the SelectedColor changes the RainbowSlider raises the SelectedColorChanged event.

The Rainbow Dependency Property allows to get or set the color spectrum. It’s of the GradientStopCollection type i.e. represents the sequence of colors along with the position of the color in the spectrum. By default the spectrum is the sequence of equally spaced Red, Orange, Yellow, Lime, Blue, Indigo, Violet, Red colors. When the Rainbow property changes the RainbowSlider tries to find the current SelectedColor value in the new Rainbow. On success it sets the selector position accordingly; otherwise it sets the selector position to the minimum and changes its SelectedColor to the value corresponding to that position.

The direction the SelectedColor value changes depends on the value of IsDirectionReversed property. If it’s false (the default) the initial spectrum color is at the left or at the bottom of the control depending on the orientation.

The code

You can download the code and the samples here:


The archive contains my WPFGears library with samples, tests, etc. It’s the Visual Studio 2008 SP1 solution targeted to .NET Framework 3.5.

You’ll find RainbowSliderSample project there. RainbowSlider element code is in the WPFGears library project ColorPickerControls folder.

Oleg V. Polikarpotchkin

Technorati Теги: ,,,

About ovpwp

I am engaged in programming, maintenance and supply of computing technique since 1970. Started with the computers M, BESM, Minsk series and received appropriate education in the least, in which it was then possible in THE USSR. Then he went the usual way - ES series, IBM 360/370, Sun Spark, Ibm Power & PS2, PC. Programming started in the code (machine commands), then were sorts of assemblers, Algol, FORTRAN, PL/1, C, C , VB, C#. It is only the ones that I used the production scale; but there were, of course, others like List, Modula, Pascal, Java, etc. Currently I prefer .NET platform for desktop development. I don't really like web-programming (probably because of the inability for quality design), but I have enough experience in site building in LAMP environment using PHP.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s