ExtendedOfficeColorPicker
A drop-down colour picker in the style of Microsoft Office: a box showing the chosen colour, and a palette of theme colours, their tints and shades, and standard colours, with a "More Colors" window for any named colour or an exact A/R/G/B value.
public class ExtendedOfficeColorPicker : Control
Inherits from / implements: Control
Remarks
Use it wherever the user chooses a colour – text and highlight colours in an editor, the
series colours of a chart, a category colour in a calendar, a theme setting. The chosen colour is
SelectedColorBrush, and SelectedColorChanged tells you when the user
chooses another.
What the user sees
- The face: a swatch of the selected colour, the colour's values as text
(
SelectedColorName) and a drop-down button. - The palette, opened by the button: a row of ten theme colours with five rows of their tints and shades, a row of ten standard colours, and a "More Colors" row. One click on a swatch chooses it and closes the palette.
- The "More Colors" window, opened by the "..." button on that row: every named WPF colour as a swatch, and boxes to type an exact alpha, red, green and blue value (0 to 255), set with the "Set" button or Enter. A colour chosen here is also kept on the palette's "More Colors" row, to be chosen again with one click.
Appearance
Every part has its own colours: the face (Control.Background,
Control.BorderBrush, SelectedColorTextForeground), the drop-down button
(DropDownButtonBackground, DropDownArrowFill), the palette
(PopupWindowBackground, ColorBoxMouseOverBorderBrush) and the "More
Colors" window (CustomColorsPopupInternalViewBackground and the other
CustomColorsPopup* properties). The defaults given on each property are the ones the
default style sets with no Binarymission skin in force; with a skin in force they follow the skin,
and a brush set on the control wins over both. Every caption – ThemeColorsLabelText,
MoreColorsLabelText and the rest – can be replaced, for example to translate the
control.
The default style makes the control 172 by 24 logical pixels; set
FrameworkElement.Width and FrameworkElement.Height to change it.
Examples
A text-colour picker in a formatting toolbar, applying the chosen colour to the selected text.
<Window x:Class="Editor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:pickers="clr-namespace:Binarymission.WPF.Controls.Pickers;assembly=Binarymission.WPF.Controls.ExtendedColorPicker"
Title="Editor" Width="800" Height="500">
<DockPanel>
<ToolBar DockPanel.Dock="Top">
<TextBlock Text="Font colour:" VerticalAlignment="Center" Margin="4,0" />
<pickers:ExtendedOfficeColorPicker x:Name="FontColour"
SelectedColorBrush="#1A3E72"
ShouldDisplayAlphaValue="False"
IsControlWindowCurvedEdged="True"
SelectedColorChanged="OnFontColourChanged" />
</ToolBar>
<RichTextBox x:Name="Document" />
</DockPanel>
</Window>The handler.
using System.Windows;
using System.Windows.Documents;
private void OnFontColourChanged(object sender, RoutedEventArgs e)
{
Document.Selection.ApplyPropertyValue(TextElement.ForegroundProperty, FontColour.SelectedColorBrush);
Document.Focus();
}See also
Members at a glance
| Properties | |
|---|---|
AnimationType | Gets or sets how the palette and the "More Colors" window appear when they open. |
ColorBoxMouseOverBorderBrush | Gets or sets the colour of the outline drawn round a palette swatch while the pointer is over it. |
ColorsWindowPopupBorderBrush | Gets or sets the colour of the outer frame round the palette. |
ColorsWindowPopupBorderThickness | Gets or sets the width of a second, outer frame round the palette, outside
ColorsWindowPopupContentBorderBrush. |
ColorsWindowPopupContentBorderBrush | Gets or sets the colour of the frame round the palette. |
ColorsWindowPopupContentBorderThickness | Gets or sets the width of the frame round the palette. |
CustomColorsPopupInternalViewBackground | Gets or sets the background of the "More Colors" window. |
CustomColorsPopupWindowBorderBrush | Gets or sets the colour of the frame round the "More Colors" window. |
CustomColorsPopupWindowBorderThickness | Gets or sets the width of the frame round the "More Colors" window. |
CustomColorsPopupWindowCustomColorSetCommandVisualText | Gets or sets the caption of the button that applies the A/R/G/B values typed in the "More Colors" window. |
CustomColorsPopupWindowLabelTextAlternativeInstruction | Gets or sets the caption above the A/R/G/B entry row in the "More Colors" window. |
CustomColorsPopupWindowLabelTextSelectColorInstruction | Gets or sets the caption above the named-colour swatches in the "More Colors" window. |
CustomColorsPopupWindowRgbPanelBorderBrush | Gets or sets the colour of the frame round the A/R/G/B entry row in the "More Colors" window. |
DropDownArrowFill | Gets or sets the colour of the arrow on the drop-down button. |
DropDownButtonBackground | Gets or sets the background of the button on the face that opens the palette. |
DropDownButtonOnHoverBackground | Gets or sets the background of the drop-down button while the pointer is over it. |
IsColorPaletteWindowCurvedEdged | Gets or sets whether the palette has rounded corners. |
IsControlWindowCurvedEdged | Gets or sets whether the face of the control has rounded corners. |
IsEnabledBorderAroundSelectedColorIndicatorFill | Gets or sets whether an outline is drawn round the colour swatch on the face of the control. |
IsHostBorderDrawingEnabledForCustomColorsWindow | Gets or sets whether the "More Colors" window's frame is drawn at
CustomColorsPopupWindowBorderThickness rather than one pixel wide. |
MoreColorsLabelText | Gets or sets the caption of the palette's last row, which opens the "More Colors" window. |
PopupWindowBackground | Gets or sets the background of the palette. |
SelectedColorBrush | Gets or sets the colour that is chosen, shown on the face of the control. |
SelectedColorIndicatorFillBorderBrush | Gets or sets the colour of the outline round the colour swatch on the face of the control. |
SelectedColorIndicatorIndicatorBorderThickness | Gets or sets the width of the outline round the colour swatch on the face of the control. |
SelectedColorName | Gets the chosen colour as the face of the control shows it in text. |
SelectedColorTextForeground | Gets or sets the colour of the text on the face of the control that gives the chosen colour's values. |
ShouldDisplayAlphaValue | Gets or sets whether the colour's opacity (alpha) value is shown in the text on the face, as well as its red, green and blue values. |
StandardColorsLabelText | Gets or sets the caption above the row of standard colours in the palette. |
ThemeColorsLabelText | Gets or sets the caption above the theme colours and their tints and shades in the palette. |
| Methods | |
OnApplyTemplate | Connects the face, the drop-down button and the palette in the template, and shows the chosen colour's text. |
| Events | |
SelectedColorChanged | Occurs when the user chooses a colour, from the palette or the "More Colors" window. |
| Fields | |
AnimationTypeProperty | Identifies the AnimationType dependency property. |
ColorBoxMouseOverBorderBrushProperty | Identifies the ColorBoxMouseOverBorderBrush dependency property. |
ColorsWindowPopupBorderBrushProperty | Identifies the ColorsWindowPopupBorderBrush dependency property. |
ColorsWindowPopupBorderThicknessProperty | Identifies the ColorsWindowPopupBorderThickness dependency property. |
ColorsWindowPopupContentBorderBrushProperty | Identifies the ColorsWindowPopupContentBorderBrush dependency property. |
ColorsWindowPopupContentBorderThicknessProperty | Identifies the ColorsWindowPopupContentBorderThickness dependency property. |
CustomColorsPopupInternalViewBackgroundProperty | Identifies the CustomColorsPopupInternalViewBackground dependency property. |
CustomColorsPopupWindowBorderBrushProperty | Identifies the CustomColorsPopupWindowBorderBrush dependency property. |
CustomColorsPopupWindowBorderThicknessProperty | Identifies the CustomColorsPopupWindowBorderThickness dependency property. |
CustomColorsPopupWindowCustomColorSetCommandVisualTextProperty | Identifies the CustomColorsPopupWindowCustomColorSetCommandVisualText dependency property. |
CustomColorsPopupWindowLabelTextAlternativeInstructionProperty | Identifies the CustomColorsPopupWindowLabelTextAlternativeInstruction dependency property. |
CustomColorsPopupWindowLabelTextSelectColorInstructionProperty | Identifies the CustomColorsPopupWindowLabelTextSelectColorInstruction dependency property. |
CustomColorsPopupWindowRgbPanelBorderBrushProperty | Identifies the CustomColorsPopupWindowRgbPanelBorderBrush dependency property. |
DropDownArrowFillProperty | Identifies the DropDownArrowFill dependency property. |
DropDownButtonBackgroundProperty | Identifies the DropDownButtonBackground dependency property. |
DropDownButtonOnHoverBackgroundProperty | Identifies the DropDownButtonOnHoverBackground dependency property. |
IsColorPaletteWindowCurvedEdgedProperty | Identifies the IsColorPaletteWindowCurvedEdged dependency property. |
IsControlWindowCurvedEdgedProperty | Identifies the IsControlWindowCurvedEdged dependency property. |
IsEnabledBorderAroundSelectedColorIndicatorFillProperty | Identifies the IsEnabledBorderAroundSelectedColorIndicatorFill dependency property. |
IsHostBorderDrawingEnabledForCustomColorsWindowProperty | Identifies the IsHostBorderDrawingEnabledForCustomColorsWindow dependency property. |
MoreColorsLabelTextProperty | Identifies the MoreColorsLabelText dependency property. |
PopupWindowBackgroundProperty | Identifies the PopupWindowBackground dependency property. |
SelectedColorBrushProperty | Identifies the SelectedColorBrush dependency property. |
SelectedColorChangedEvent | Identifies the SelectedColorChanged routed event. |
SelectedColorIndicatorFillBorderBrushProperty | Identifies the SelectedColorIndicatorFillBorderBrush dependency property. |
SelectedColorIndicatorIndicatorBorderThicknessProperty | Identifies the SelectedColorIndicatorIndicatorBorderThickness dependency property. |
SelectedColorTextForegroundProperty | Identifies the SelectedColorTextForeground dependency property. |
ShouldDisplayAlphaValueProperty | Identifies the ShouldDisplayAlphaValue dependency property. |
StandardColorsLabelTextProperty | Identifies the StandardColorsLabelText dependency property. |
ThemeColorsLabelTextProperty | Identifies the ThemeColorsLabelText dependency property. |
Properties
AnimationType
Gets or sets how the palette and the "More Colors" window appear when they open.
- Value
- One of the
PopupAnimationvalues. The default style setsSlide; the value registered on the property isNone.
Remarks
Windows shows popup animations only when its menu animation setting is on.
ColorBoxMouseOverBorderBrush
Gets or sets the colour of the outline drawn round a palette swatch while the pointer is over it.
- Value
- The default is yellow.
Remarks
Choose a colour that stands out against PopupWindowBackground and against
most swatches.
ColorsWindowPopupBorderBrush
Gets or sets the colour of the outer frame round the palette.
- Value
- The default style sets
Transparent.
Remarks
Nothing is drawn until ColorsWindowPopupBorderThickness is set.
See also
ColorsWindowPopupBorderThickness
Gets or sets the width of a second, outer frame round the palette, outside
ColorsWindowPopupContentBorderBrush.
- Value
- A width in whole logical pixels (1/96 inch). The default is
0: no outer frame.
See also
ColorsWindowPopupContentBorderBrush
Gets or sets the colour of the frame round the palette.
- Value
- The default is black.
Remarks
Its width is ColorsWindowPopupContentBorderThickness.
See also
ColorsWindowPopupContentBorderThickness
Gets or sets the width of the frame round the palette.
- Value
- A width in whole logical pixels (1/96 inch). The default style sets
1.
See also
CustomColorsPopupInternalViewBackground
Gets or sets the background of the "More Colors" window.
- Value
- The default style sets white; the value registered on the property is light grey.
Remarks
Applies the next time the window opens.
CustomColorsPopupWindowBorderBrush
Gets or sets the colour of the frame round the "More Colors" window.
- Value
- The default style sets black; the value registered on the property is a pale blue-grey
(
#CADAE2).
Remarks
Applies the next time the window opens.
See also
CustomColorsPopupWindowBorderThickness
Gets or sets the width of the frame round the "More Colors" window.
- Value
- A width in logical pixels (1/96 inch). The default style sets
1; the value registered on the property is8.
Remarks
Used only while IsHostBorderDrawingEnabledForCustomColorsWindow is on. Applies
the next time the window opens.
See also
CustomColorsPopupWindowCustomColorSetCommandVisualText
Gets or sets the caption of the button that applies the A/R/G/B values typed in the "More Colors" window.
- Value
- The default style sets
"Set".
Remarks
Pressing Enter in any of the four boxes does the same. Each value must be a whole number from 0 to 255; if one is not, it is selected for the user to correct and nothing is applied.
CustomColorsPopupWindowLabelTextAlternativeInstruction
Gets or sets the caption above the A/R/G/B entry row in the "More Colors" window.
- Value
- The default style sets
"Or alternatively, set a custom color value:".
See also
CustomColorsPopupWindowLabelTextSelectColorInstruction
Gets or sets the caption above the named-colour swatches in the "More Colors" window.
- Value
- The default style sets
"Select a color from the palette:".
See also
CustomColorsPopupWindowRgbPanelBorderBrush
Gets or sets the colour of the frame round the A/R/G/B entry row in the "More Colors" window.
- Value
- The default is light salmon.
DropDownArrowFill
Gets or sets the colour of the arrow on the drop-down button.
- Value
- The default is black.
See also
DropDownButtonBackground
Gets or sets the background of the button on the face that opens the palette.
- Value
- The default is light salmon.
See also
DropDownButtonOnHoverBackground
Gets or sets the background of the drop-down button while the pointer is over it.
- Value
- The default is orange-red.
See also
IsColorPaletteWindowCurvedEdged
Gets or sets whether the palette has rounded corners.
- Value
truefor corners rounded by 4 logical pixels at the top and 2 at the bottom;falsefor square corners. The default isfalse.
See also
IsControlWindowCurvedEdged
Gets or sets whether the face of the control has rounded corners.
- Value
truefor corners rounded by 6 logical pixels;falsefor square corners. The default isfalse.
See also
IsEnabledBorderAroundSelectedColorIndicatorFill
Gets or sets whether an outline is drawn round the colour swatch on the face of the control.
- Value
- The default style sets
true.
Remarks
The default template does not read this property: the outline is controlled by
SelectedColorIndicatorIndicatorBorderThickness, which is 0 by default.
See also
IsHostBorderDrawingEnabledForCustomColorsWindow
Gets or sets whether the "More Colors" window's frame is drawn at
CustomColorsPopupWindowBorderThickness rather than one pixel wide.
- Value
trueto useCustomColorsPopupWindowBorderThickness. The default istrue.
Remarks
With the property off the frame is one logical pixel wide, in
CustomColorsPopupWindowBorderBrush. The window is built when it is opened, so a
change applies the next time it opens.
MoreColorsLabelText
Gets or sets the caption of the palette's last row, which opens the "More Colors" window.
- Value
- The default style sets
"More Colors...".
Remarks
The row also shows a swatch of the current colour, or of the last colour chosen in the "More Colors" window, which can be clicked to choose it again.
PopupWindowBackground
Gets or sets the background of the palette.
- Value
- The default is white.
Remarks
The palette's captions are drawn in the control's Control.Foreground, so
set that too if the background is dark.
SelectedColorBrush
Gets or sets the colour that is chosen, shown on the face of the control.
- Value
- A solid colour brush. The default style sets black; the value registered on the property is the system's window text colour.
Remarks
The user's choice replaces it, from the palette or the "More Colors" window, and
SelectedColorChanged is raised. Setting it from code or a binding changes the face but
does not raise the event. It can be bound two-way to a view model's brush.
Set to null, the face shows no swatch and the text None.
Example
// Start on the category's current colour, and save the user's choice.
picker.SelectedColorBrush = new SolidColorBrush(category.Colour);
picker.SelectedColorChanged += (sender, e) => category.Colour = picker.SelectedColorBrush.Color;See also
SelectedColorIndicatorFillBorderBrush
Gets or sets the colour of the outline round the colour swatch on the face of the control.
- Value
- The default is black.
Remarks
Nothing is drawn until SelectedColorIndicatorIndicatorBorderThickness is set
above 0.
SelectedColorIndicatorIndicatorBorderThickness
Gets or sets the width of the outline round the colour swatch on the face of the control.
- Value
- A width in whole logical pixels (1/96 inch). The default is
0: no outline.
Remarks
An outline of 1, in SelectedColorIndicatorFillBorderBrush, keeps a
pale colour such as white visible against the face.
See also
SelectedColorName
Gets the chosen colour as the face of the control shows it in text.
- Value
- The alpha, red, green and blue values, as
(255) 26, 62, 114, or only the last three whenShouldDisplayAlphaValueis off;NonewhenSelectedColorBrushisnull.
Remarks
A plain property, so it raises no change notification; read it again after
SelectedColorChanged.
SelectedColorTextForeground
Gets or sets the colour of the text on the face of the control that gives the chosen colour's values.
- Value
- The default is black.
See also
ShouldDisplayAlphaValue
Gets or sets whether the colour's opacity (alpha) value is shown in the text on the face, as well as its red, green and blue values.
- Value
trueto show(A) R, G, B, such as(255) 26, 62, 114;falseto showR, G, Bonly. The default istrue.
Remarks
Turn it off when every colour the user can choose is opaque – as all the palette's colours are – so the text is shorter. The A box of the "More Colors" window is shown either way.
See also
StandardColorsLabelText
Gets or sets the caption above the row of standard colours in the palette.
- Value
- The default style sets
"Standard Colors".
ThemeColorsLabelText
Gets or sets the caption above the theme colours and their tints and shades in the palette.
- Value
- The default style sets
"Theme Colors".
Methods
OnApplyTemplate
Connects the face, the drop-down button and the palette in the template, and shows the chosen colour's text.
Remarks
A custom template provides a Button named
PART_ColorsWindowDropDownButton, a Popup named PART_ColorsWindowPopup
whose Rectangles are the swatches, and a
TextBlock named PART_ColorTextBlock; optionally a Button named
paletteLoadButton to open the "More Colors" window. Any part left out simply does not
work.
Events
SelectedColorChanged
Occurs when the user chooses a colour, from the palette or the "More Colors" window.
Remarks
The new colour is already in SelectedColorBrush. The event is raised for every
choice, even of the colour that was already chosen, and not when
SelectedColorBrush is set from code or by a binding.
A bubbling routed event, so a parent element can handle it for several pickers.
Example
highlightPicker.SelectedColorChanged += (sender, e) =>
Document.Selection.ApplyPropertyValue(TextElement.BackgroundProperty, highlightPicker.SelectedColorBrush);Fields
AnimationTypeProperty static
Identifies the AnimationType dependency property.
ColorBoxMouseOverBorderBrushProperty static
Identifies the ColorBoxMouseOverBorderBrush dependency property.
ColorsWindowPopupBorderBrushProperty static
Identifies the ColorsWindowPopupBorderBrush dependency property.
ColorsWindowPopupBorderThicknessProperty static
Identifies the ColorsWindowPopupBorderThickness dependency property.
ColorsWindowPopupContentBorderBrushProperty static
Identifies the ColorsWindowPopupContentBorderBrush dependency property.
ColorsWindowPopupContentBorderThicknessProperty static
Identifies the ColorsWindowPopupContentBorderThickness dependency property.
CustomColorsPopupInternalViewBackgroundProperty static
Identifies the CustomColorsPopupInternalViewBackground dependency property.
CustomColorsPopupWindowBorderBrushProperty static
Identifies the CustomColorsPopupWindowBorderBrush dependency property.
CustomColorsPopupWindowBorderThicknessProperty static
Identifies the CustomColorsPopupWindowBorderThickness dependency property.
CustomColorsPopupWindowCustomColorSetCommandVisualTextProperty static
Identifies the CustomColorsPopupWindowCustomColorSetCommandVisualText dependency property.
CustomColorsPopupWindowLabelTextAlternativeInstructionProperty static
Identifies the CustomColorsPopupWindowLabelTextAlternativeInstruction dependency property.
CustomColorsPopupWindowLabelTextSelectColorInstructionProperty static
Identifies the CustomColorsPopupWindowLabelTextSelectColorInstruction dependency property.
CustomColorsPopupWindowRgbPanelBorderBrushProperty static
Identifies the CustomColorsPopupWindowRgbPanelBorderBrush dependency property.
DropDownArrowFillProperty static
Identifies the DropDownArrowFill dependency property.
DropDownButtonBackgroundProperty static
Identifies the DropDownButtonBackground dependency property.
DropDownButtonOnHoverBackgroundProperty static
Identifies the DropDownButtonOnHoverBackground dependency property.
IsColorPaletteWindowCurvedEdgedProperty static
Identifies the IsColorPaletteWindowCurvedEdged dependency property.
IsControlWindowCurvedEdgedProperty static
Identifies the IsControlWindowCurvedEdged dependency property.
IsEnabledBorderAroundSelectedColorIndicatorFillProperty static
Identifies the IsEnabledBorderAroundSelectedColorIndicatorFill dependency property.
IsHostBorderDrawingEnabledForCustomColorsWindowProperty static
Identifies the IsHostBorderDrawingEnabledForCustomColorsWindow dependency property.
MoreColorsLabelTextProperty static
Identifies the MoreColorsLabelText dependency property.
PopupWindowBackgroundProperty static
Identifies the PopupWindowBackground dependency property.
SelectedColorBrushProperty static
Identifies the SelectedColorBrush dependency property.
SelectedColorChangedEvent static
Identifies the SelectedColorChanged routed event.
SelectedColorIndicatorFillBorderBrushProperty static
Identifies the SelectedColorIndicatorFillBorderBrush dependency property.
SelectedColorIndicatorIndicatorBorderThicknessProperty static
Identifies the SelectedColorIndicatorIndicatorBorderThickness dependency property.
SelectedColorTextForegroundProperty static
Identifies the SelectedColorTextForeground dependency property.
ShouldDisplayAlphaValueProperty static
Identifies the ShouldDisplayAlphaValue dependency property.
StandardColorsLabelTextProperty static
Identifies the StandardColorsLabelText dependency property.
ThemeColorsLabelTextProperty static
Identifies the ThemeColorsLabelText dependency property.