Latest DotNetBar for WPF 5.2 that is coming out really soon includes 5 new color related controls:

1. ColorInput control which is text-box style control that allows you to type the color in RGB format, for example #FE20DE. It also includes drop-down color picker and a color chooser dialog.
2. ColorItemSelector, is a color selector with Office style colors that you can use as standalone control, or combine with ColorPickerButton control.
3. ColorComb control, a comb style color selector.
4. ColorBlender, a palette style color selector.
5. ColorPickerButton, a button that can be used on Ribbon and that you combine with ColorItemSelector to select pre-defined color.

ColorInput Control

ColorInput control allows you to enter the color using RGB format or to choose color from drop-down color picker. You can also use built-in color selection dialog to choose the color.

Here is how ColorInput control looks like:

With drop-down showing Office style colors:

ColorInput control key properties and events:

• Value – indicates the selected color value. It may be null if there is no color selected.
• EditColorAlphaComponent – Indicates whether control shows alpha transparency component in edit portion of control. Default value is false.
• ShowDropDown – Indicates whether drop-down button on the right-hand side of control is shown.
• ShowCheckBox – Indicates whether check-box is shown which allows end-user to make control read-only.
• WatermarkText – Indicates the watermark text to be displayed in control when there is no value.
• WatermarkAlignment – Indicates the watermark text alignment within the control.
• WatermarkBehavior – Indicates whether watermark text is hidden when control gets input focus or when it has valid value.
• WatermarkBrush – Indicates the brush used to render watermark text.
• WatermarkEnabled – Indicates whether watermark is enabled.
• MoreColorsButtonVisibility – Indicates whether drop-down color picker displays the “More Colors…” button.
• ValueChanged bubbling event – Occurs when Value property changes.

Ribbon Styling

ColorInput control provides built-in style to blend into the Ribbon. Simply assign following Style to the ColorInput control:

<de:ColorInput Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=de:ColorInput, ResourceId=Ribbon}}"

Localization of system strings

One of the most common tasks when working with input controls is the localization or customization of system strings used by the control. All system strings that color input controls are using are defined as string resources and you can customize them as such easily by providing your own string resource. The string resource key ID’s are all available as static members of StringKeys class. Here is how to define custom string resources:

1.  Define namespace so you can use string type:

 <Window x:Class="Editors.Window1"

 xmlns:s="clr-namespace:System;assembly=mscorlib"

2.  Define custom string resources as such:

 <Window.Resources>

 <s:String x:Key="{ComponentResourceKey {x:Type de:StringKeys}, {x:Static de:StringKeys.MoreColorsButton}}">More Colors Custom</s:String>

 </Window.Resources>

That’s it. Note that you can define these resources in XAML by creating resource dictionary and then merging this to the application resources so customizations are application wide. You can also define them per control as well.

Customizing Colors On Drop-Down

To customize colors displayed on drop-down part of the ColorInput control, you need to define new style for ColorItemSelector control that is used by ColorInput control. Click here to download the XAML file which has sample style that you can re-use and modify to suite your needs.

Tomorrow, rest of the controls…