PopupEditor
An editor with a drop-down that can hold any control you like: a read-only text box showing a value, and a button beside it that opens a resizable pop-up containing your own content – a calendar, a tree of categories, a colour grid, a filter panel.
public class PopupEditor : Control
Inherits from / implements: Control
Remarks
Use it where a combo box is the right shape but a list is the wrong content. You supply the
content as any Control in PopupContentHost; when the user has made a choice
in it, set DisplayText to show the result and call ClosePopup.
The two halves
The text box takes DisplayTextVisualToTotalSizeRatio per cent of the width (80 by
default) and the button the rest. The text box is styled with the TextDisplayVisual...
properties; the button with the PopupCommandVisual... properties – its colours in the normal,
hover and pressed states, and either a down-arrow image (built in, or your own) or a short text.
The drop-down
A click on the button calls Show, which opens the drop-down under the editor (or at
DisplayLocation) at DropDownSize; a second click closes it, as does a click
anywhere else. With EnableDropDownResizing on, a strip along its foot lets the user drag
it taller or, from the corner, larger, and the size they choose is kept for next time
(ShouldRememberUserSizedDropDownSize). DropDownPopupOpened,
DropDownPopupClosing and DropDownPopupClosed follow it.
Examples
A "Due date" editor whose drop-down is a MonthCalendar.
using System;
using System.Drawing;
using System.Windows.Forms;
using Binarymission.WinForms.Controls.ContainerPopups;
public class TaskForm : Form
{
private readonly PopupEditor _dueDate = new PopupEditor();
private readonly MonthCalendar _calendar = new MonthCalendar { MaxSelectionCount = 1 };
public TaskForm()
{
_dueDate.Location = new Point(16, 16);
_dueDate.Size = new Size(220, 30);
_dueDate.DisplayText = "Choose a date";
_dueDate.TextDisplayVisualFont = new Font("Segoe UI", 10f);
_dueDate.PopupCommandVisualNormalBackColor = Color.SteelBlue;
_dueDate.PopupCommandVisualBorderColor = Color.SteelBlue;
_dueDate.PopupCommandVisualHoveredBackColor = Color.RoyalBlue;
_dueDate.PopupCommandVisualBorderColorOnHover = Color.RoyalBlue;
_dueDate.TextDisplayVisualBorderColor = Color.SteelBlue;
_dueDate.PopupContentHost = _calendar;
_dueDate.EnableDropDownResizing = false;
_calendar.DateSelected += (sender, e) =>
{
_dueDate.DisplayText = e.Start.ToString("ddd d MMM yyyy");
_dueDate.ClosePopup();
};
Controls.Add(_dueDate);
}
}Members at a glance
| Constructors | |
|---|---|
PopupEditor | Initialises a new popup editor with a chocolate-coloured drop-down button showing a white down arrow, and no drop-down content yet. |
| Properties | |
BorderThickness | Gets or sets the width of the border round the text box half of the editor. |
DisplayLocation | Gets or sets where on the screen the drop-down opens. |
DisplayText | Gets or sets the text shown in the editor's text box – the value chosen in the drop-down. |
DisplayTextVisualToTotalSizeRatio | Gets or sets how much of the editor's width the text box takes, the drop-down button having the rest. |
DropDownContentPadding | Gets or sets the space between the edge of the drop-down and its content. |
DropDownResizeGripperColor | Gets or sets the colour of the gripper lines drawn on the drop-down's resize strip. |
DropDownResizeSectionBorderColor | Gets or sets a border colour for the drop-down's resize section. |
DropDownResizeSectionFillColor | Gets or sets the background colour of the resize strip along the foot of the drop-down. |
DropDownSize | Gets or sets the size of the drop-down's content area. |
EnableDropDownResizing | Gets or sets whether the user can resize the drop-down by dragging the strip along its foot. |
PopupCommandVisualBorderColor | Gets or sets the colour of the one-pixel border of the drop-down button at the right of the editor. |
PopupCommandVisualBorderColorOnHover | Gets or sets the border colour of the drop-down button at the right of the editor while the pointer is over it. |
PopupCommandVisualBorderColorOnPressed | Gets or sets the border colour of the drop-down button at the right of the editor while it is pressed. |
PopupCommandVisualFont | Gets or sets the font of the text on the drop-down button at the right of the editor. |
PopupCommandVisualHoverStateImage | Gets or sets an image for the drop-down button at the right of the editor while the pointer is over it. |
PopupCommandVisualHoveredBackColor | Gets or sets the fill colour of the drop-down button at the right of the editor while the pointer is over it. |
PopupCommandVisualMaximumInternalImageDrawingSize | Gets or sets the largest size the image on the drop-down button at the right of the editor is drawn at. |
PopupCommandVisualNormalBackColor | Gets or sets the fill colour of the drop-down button at the right of the editor. |
PopupCommandVisualNormalStateImage | Gets or sets the image shown on the drop-down button at the right of the editor, in place of the built-in white down arrow. |
PopupCommandVisualPressedBackColor | Gets or sets the fill colour of the drop-down button at the right of the editor while it is pressed. |
PopupCommandVisualPressedStateImage | Gets or sets an image for the drop-down button at the right of the editor while it is pressed. |
PopupCommandVisualShouldApplyPaddingWhilePositioningImage | Gets or sets whether the image on the drop-down button at the right of the editor keeps a margin from the button's edges when it is stretched. |
PopupCommandVisualText | Gets or sets a short text to show on the drop-down button at the right of the editor in place of its image. |
PopupCommandVisualTextForeColor | Gets or sets the colour of the text on the drop-down button at the right of the editor. |
PopupContentHost | Gets or sets the control shown in the drop-down. |
ShouldDrawBidirectionalResizeGripper | Gets or sets whether the standard diagonal size grip is drawn in the bottom right corner of the drop-down. |
ShouldDrawDropDownResizeSectionWith3DBorder | Gets or sets whether the resize section's border is drawn in 3-D rather than in
DropDownResizeSectionBorderColor. |
ShouldDrawDropShadow | Gets or sets whether the drop-down casts the system drop shadow. |
ShouldDrawVerticalResizeGripper | Gets or sets whether a small downward-pointing triangle of lines is drawn in the middle of the resize strip, showing the drop-down can be pulled taller. |
ShouldRememberUserSizedDropDownSize | Gets or sets whether a size the user drags the drop-down to is kept for the next time it opens. |
TextDisplayVisualBackColor | Gets or sets the background colour of the text box. |
TextDisplayVisualBorderColor | Gets or sets the colour of the border round the text box. |
TextDisplayVisualBorderThickness | Gets or sets the width of the border round the text box. |
TextDisplayVisualFont | Gets or sets the font of the text box. |
TextDisplayVisualTextForeColor | Gets or sets the colour of the text in the text box. |
| Methods | |
ClosePopup | Closes the drop-down, if it is open. |
OnDropDownPopupClosed | Raises the DropDownPopupClosed event. |
OnDropDownPopupClosing | Raises the DropDownPopupClosing event. |
OnDropDownPopupOpened | Raises the DropDownPopupOpened event. |
OnHandleCreated | Raises the Control.HandleCreated event and puts the text box and button in place. |
OnSizeChanged | Raises the Control.SizeChanged event and lays out the text box and button for the new size. |
Show | Opens the drop-down, or closes it if it is already open – what a click on the drop-down button does. |
| Events | |
DropDownPopupClosed | Occurs when the drop-down has closed, however it was closed. |
DropDownPopupClosing | Occurs as the drop-down begins to close, before it leaves the screen. |
DropDownPopupOpened | Occurs when the drop-down has opened and is on screen. |
Constructors
PopupEditor
Initialises a new popup editor with a chocolate-coloured drop-down button showing a white down arrow, and no drop-down content yet.
Remarks
Set PopupContentHost before the user can open the drop-down.
Properties
BorderThickness
Gets or sets the width of the border round the text box half of the editor.
- Value
- The width in pixels. Reads 0 until set; the border is drawn 1 pixel wide until then.
Remarks
The same setting as TextDisplayVisualBorderThickness, as a fractional value:
whichever is set last applies. Set 0 for no border.
DisplayLocation
Gets or sets where on the screen the drop-down opens.
- Value
- The drop-down's top left corner in screen coordinates, or
Point.Emptyto open it just below the editor's bottom left corner. The default isPoint.Empty.
Remarks
The point is fixed on the screen: it does not follow the editor if its window moves.
DisplayText
Gets or sets the text shown in the editor's text box – the value chosen in the drop-down.
- Value
- The text, or
nullfor none. The default isnull.
Remarks
The text box is read-only to the user: set this from your drop-down content when a choice is made. The text is centred on one line, ends in an ellipsis when it does not fit, and is also shown as the text box's tool tip.
DisplayTextVisualToTotalSizeRatio
Gets or sets how much of the editor's width the text box takes, the drop-down button having the rest.
- Value
- A percentage from 0 to 100. The default is 80.
Example
// A wide button for a short editor.
colourEditor.DisplayTextVisualToTotalSizeRatio = 65f;DropDownContentPadding
Gets or sets the space between the edge of the drop-down and its content.
- Value
- The padding in pixels. The default is
Padding.Empty.
DropDownResizeGripperColor
Gets or sets the colour of the gripper lines drawn on the drop-down's resize strip.
- Value
- The default is
Color.White.
See also
DropDownResizeSectionBorderColor
Gets or sets a border colour for the drop-down's resize section.
- Value
- The default is
Color.Tomato.
Remarks
The border is painted before the section's fill, which then covers it, so the colour does not show.
DropDownResizeSectionFillColor
Gets or sets the background colour of the resize strip along the foot of the drop-down.
- Value
- The default is
Color.SlateGray.
DropDownSize
Gets or sets the size of the drop-down's content area.
- Value
- The width and height in logical pixels, or
Size.Emptyto open the drop-down at the size ofPopupContentHost. The default isSize.Empty.
Remarks
The drop-down is 20 logical pixels taller than this, for the resize strip. When the user resizes
the drop-down and ShouldRememberUserSizedDropDownSize is on, the new size is stored here as
it closes and used the next time it opens.
EnableDropDownResizing
Gets or sets whether the user can resize the drop-down by dragging the strip along its foot.
- Value
trueto allow resizing; the default istrue.
Remarks
The bottom edge resizes the height and the bottom right corner both ways. The strip is 20 logical pixels tall and is part of the drop-down whether or not resizing is allowed; with resizing off its grippers are not drawn. Takes effect the next time the drop-down opens.
See also
PopupCommandVisualBorderColor
Gets or sets the colour of the one-pixel border of the drop-down button at the right of the editor.
- Value
- The border colour. The default is
Color.Chocolate.
See also
PopupCommandVisualBorderColorOnHover
Gets or sets the border colour of the drop-down button at the right of the editor while the pointer is over it.
- Value
- The default is
Color.DarkRed.
PopupCommandVisualBorderColorOnPressed
Gets or sets the border colour of the drop-down button at the right of the editor while it is pressed.
- Value
- The default is
Color.SlateGray.
PopupCommandVisualFont
Gets or sets the font of the text on the drop-down button at the right of the editor.
- Value
- The font. The default is the default font's family at 12 points.
Remarks
Used only when PopupCommandVisualText is set.
PopupCommandVisualHoverStateImage
Gets or sets an image for the drop-down button at the right of the editor while the pointer is over it.
- Value
- The image, or
nullfor the built-in arrow. The default isnull.
Remarks
The value is stored, but the button keeps showing the built-in white arrow while hovered.
PopupCommandVisualHoveredBackColor
Gets or sets the fill colour of the drop-down button at the right of the editor while the pointer is over it.
- Value
- The default is
Color.DarkRed.
PopupCommandVisualMaximumInternalImageDrawingSize
Gets or sets the largest size the image on the drop-down button at the right of the editor is drawn at.
- Value
- The size in logical pixels. The default is 32 by 32.
Remarks
The image is drawn square, centred, and never larger than the button. Set
Size.Empty to stretch the image over the whole button (see
PopupCommandVisualShouldApplyPaddingWhilePositioningImage).
PopupCommandVisualNormalBackColor
Gets or sets the fill colour of the drop-down button at the right of the editor.
- Value
- The default is
Color.Chocolate.
See also
PopupCommandVisualNormalStateImage
Gets or sets the image shown on the drop-down button at the right of the editor, in place of the built-in white down arrow.
- Value
- The image, or
nullfor the built-in arrow. The default isnull.
Remarks
Set it before the editor is shown: the button takes its image when it is created on screen.
Not shown while PopupCommandVisualText is set.
Example
categoryEditor.PopupCommandVisualNormalStateImage = Properties.Resources.FolderTree16;
categoryEditor.PopupCommandVisualMaximumInternalImageDrawingSize = new Size(16, 16);PopupCommandVisualPressedBackColor
Gets or sets the fill colour of the drop-down button at the right of the editor while it is pressed.
- Value
- The default is
Color.SlateGray.
PopupCommandVisualPressedStateImage
Gets or sets an image for the drop-down button at the right of the editor while it is pressed.
- Value
- The image, or
nullfor the built-in arrow. The default isnull.
Remarks
The value is stored, but the button keeps showing the built-in white arrow while pressed.
PopupCommandVisualShouldApplyPaddingWhilePositioningImage
Gets or sets whether the image on the drop-down button at the right of the editor keeps a margin from the button's edges when it is stretched.
- Value
trueto draw the image at about seven tenths of the button's size, centred;falseto fill the button. The default isfalse.
Remarks
Used only while PopupCommandVisualMaximumInternalImageDrawingSize is
Size.Empty.
PopupCommandVisualText
Gets or sets a short text to show on the drop-down button at the right of the editor in place of its image.
- Value
- The text, such as
"..."or"Pick", ornullto show the image. The default isnull.
Remarks
The text is centred, in PopupCommandVisualFont and
PopupCommandVisualTextForeColor.
PopupCommandVisualTextForeColor
Gets or sets the colour of the text on the drop-down button at the right of the editor.
- Value
- The default is
SystemColors.WindowText.
PopupContentHost
Gets or sets the control shown in the drop-down.
- Value
- Any control – a
MonthCalendar, aTreeView, a panel of filters, or a ready-styledPopupContentHostpanel from this assembly. The default isnull.
Remarks
Must be set before the drop-down is opened; opening it without content throws. The control is moved into the drop-down while it is open, so do not also place it on a form.
Its size is the drop-down's size while DropDownSize is empty, and its
Control.MinimumSize is the smallest the user can resize the drop-down to.
ShouldDrawBidirectionalResizeGripper
Gets or sets whether the standard diagonal size grip is drawn in the bottom right corner of the drop-down.
- Value
trueto draw it; the default istrue.
Remarks
Drawn only while EnableDropDownResizing is on. The corner resizes the drop-down
both ways whether or not the grip is drawn.
ShouldDrawDropDownResizeSectionWith3DBorder
Gets or sets whether the resize section's border is drawn in 3-D rather than in
DropDownResizeSectionBorderColor.
- Value
- The default is
false.
Remarks
Either border is covered by the section's fill, so the setting does not change what is seen.
ShouldDrawDropShadow
Gets or sets whether the drop-down casts the system drop shadow.
- Value
truefor a shadow. Readsfalseuntil set, although the drop-down casts the standard shadow until this is set tofalse.
ShouldDrawVerticalResizeGripper
Gets or sets whether a small downward-pointing triangle of lines is drawn in the middle of the resize strip, showing the drop-down can be pulled taller.
- Value
trueto draw it; the default istrue.
Remarks
Drawn only while EnableDropDownResizing is on, in
DropDownResizeGripperColor.
ShouldRememberUserSizedDropDownSize
Gets or sets whether a size the user drags the drop-down to is kept for the next time it opens.
- Value
trueto keep it inDropDownSize; the default istrue.
TextDisplayVisualBackColor
Gets or sets the background colour of the text box.
- Value
- The default is
SystemColors.Window.
TextDisplayVisualBorderColor
Gets or sets the colour of the border round the text box.
- Value
- The default is
Color.Chocolate, matching the button.
TextDisplayVisualBorderThickness
Gets or sets the width of the border round the text box.
- Value
- The width in pixels; 0 for no border. The default is 1.
Remarks
The same setting as BorderThickness: whichever is set last applies.
TextDisplayVisualFont
Gets or sets the font of the text box.
- Value
- The font. The default is the default font's family at 12 points.
TextDisplayVisualTextForeColor
Gets or sets the colour of the text in the text box.
- Value
- The default is
SystemColors.WindowText.
Methods
ClosePopup
Closes the drop-down, if it is open.
Remarks
Call it from your content once the user has made a choice. Raises
DropDownPopupClosing and DropDownPopupClosed.
OnDropDownPopupClosed
Raises the DropDownPopupClosed event.
Remarks
Call the base implementation from an override so that handlers still run.
OnDropDownPopupClosing
Raises the DropDownPopupClosing event.
Remarks
Call the base implementation from an override so that handlers still run.
OnDropDownPopupOpened
Raises the DropDownPopupOpened event.
Remarks
A derived class can override this to react to the drop-down opening; call the base implementation so that handlers still run.
OnHandleCreated
Raises the Control.HandleCreated event and puts the text box and button in place.
Parameters
e- The event data.
OnSizeChanged
Raises the Control.SizeChanged event and lays out the text box and button for the new size.
Parameters
e- The event data.
Show
Opens the drop-down, or closes it if it is already open – what a click on the drop-down button does.
Exceptions
System.ArgumentNullExceptionPopupContentHosthas not been set.
Remarks
The drop-down opens below the editor (or at DisplayLocation), holding
PopupContentHost at DropDownSize, and raises
DropDownPopupOpened. A click outside it closes it.
This hides Show, which makes a control visible; to make the editor itself
visible, set Control.Visible.
Example
// Open the drop-down from the keyboard as well.
dueDate.KeyDown += (s, e) =>
{
if (e.KeyCode == Keys.F4 || (e.Alt && e.KeyCode == Keys.Down))
{
dueDate.Show();
}
};Events
DropDownPopupClosed
Occurs when the drop-down has closed, however it was closed.
Remarks
Raised before a size the user dragged the drop-down to is written to
DropDownSize.
DropDownPopupClosing
Occurs as the drop-down begins to close, before it leaves the screen.
DropDownPopupOpened
Occurs when the drop-down has opened and is on screen.
Remarks
A good moment to bring the content up to date with the current value, or give it the focus.