DotNetBar for WPF 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:

WPF ColorInput Control

With drop-down showing Office style colors:

WPF ColorInput Control with Color Selection Drop-Down

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.

ColorItemSelector Control

ColorItemSelector is a control that provides list of Office style colors available for selection. It is used by ColorInput control on its drop-down, but you can use it as standalone control too. Here is screenshot of ColorItemSelector control:

ColorItemSelector

ColorItemSelector control key properties and events:

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • MoreColorsButtonVisibility – Indicates visibility of “More Colors…” button that opens the color selection dialog.
  • SelectedColorChanged event, occurs when selected color has changed.

ColorComb control

ColorComb control is another color selection tool that displays colors in a comb pattern. Here is screenshot of the ColorComb control:

ColorComb

ColorComb control key properties and events:

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • SelectedColorChanged event, occurs when selected color has changed.

ColorBlender control

ColorBlender is color selection tool that displays color palette and allows selection using mouse. Here is screenshot of the ColorBlender control:

ColorBlender

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • SelectedColorChanged event, occurs when selected color has changed.

ColorPickerButton control

ColorPickerButton control is design to be used on Ribbon and combined with ColorItemSelector. ColorPickerButton is contained in Ribbon assembly.

ColorPickerButton

This is XAML code that you can use to setup ColorPickerButton:

<dc:ColorPickerButton>

<de:ColorItemSelector SelectedColor=”{Binding Path=SelectedColor, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dc:ColorPickerButton}}}” />

</dc:ColorPickerButton>

ColorPickerButton control key properties and events:

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • SelectedColorChanged event, occurs when selected color has changed.
  • ColorSwatchWidth indicates the width of color swatch preview that is displayed on button face
  • ColorSwatchHeight indicates the height of color swatch preview that is displayed on button face
  • ColorSwatchPosition indicates the position of color swatch in relation to the image, if one is specified
  • ColorSwatchBorder indicates whether border is draw around the color swatch

Related posts:

  1. How to change WPF Office 2007 Color Scheme
  2. How to customize WPF Office 2007 Color Schemes
  3. How to re-use the brushes and colors used by Ribbon and other WPF controls
  4. How to build Office 2010 style Backstage application menu with DotNetBar for WPF
  5. How to right-align controls added to the Ribbon Tab area