HypernovaDesktop Components · docs
Binarymission
WinForms › Popup Container › PopupEditor

PopupEditor

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WinForms.Controls.ContainerPopups

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
PopupEditorInitialises a new popup editor with a chocolate-coloured drop-down button showing a white down arrow, and no drop-down content yet.
Properties
BorderThicknessGets or sets the width of the border round the text box half of the editor.
DisplayLocationGets or sets where on the screen the drop-down opens.
DisplayTextGets or sets the text shown in the editor's text box – the value chosen in the drop-down.
DisplayTextVisualToTotalSizeRatioGets or sets how much of the editor's width the text box takes, the drop-down button having the rest.
DropDownContentPaddingGets or sets the space between the edge of the drop-down and its content.
DropDownResizeGripperColorGets or sets the colour of the gripper lines drawn on the drop-down's resize strip.
DropDownResizeSectionBorderColorGets or sets a border colour for the drop-down's resize section.
DropDownResizeSectionFillColorGets or sets the background colour of the resize strip along the foot of the drop-down.
DropDownSizeGets or sets the size of the drop-down's content area.
EnableDropDownResizingGets or sets whether the user can resize the drop-down by dragging the strip along its foot.
PopupCommandVisualBorderColorGets or sets the colour of the one-pixel border of the drop-down button at the right of the editor.
PopupCommandVisualBorderColorOnHoverGets or sets the border colour of the drop-down button at the right of the editor while the pointer is over it.
PopupCommandVisualBorderColorOnPressedGets or sets the border colour of the drop-down button at the right of the editor while it is pressed.
PopupCommandVisualFontGets or sets the font of the text on the drop-down button at the right of the editor.
PopupCommandVisualHoverStateImageGets or sets an image for the drop-down button at the right of the editor while the pointer is over it.
PopupCommandVisualHoveredBackColorGets or sets the fill colour of the drop-down button at the right of the editor while the pointer is over it.
PopupCommandVisualMaximumInternalImageDrawingSizeGets or sets the largest size the image on the drop-down button at the right of the editor is drawn at.
PopupCommandVisualNormalBackColorGets or sets the fill colour of the drop-down button at the right of the editor.
PopupCommandVisualNormalStateImageGets 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.
PopupCommandVisualPressedBackColorGets or sets the fill colour of the drop-down button at the right of the editor while it is pressed.
PopupCommandVisualPressedStateImageGets or sets an image for the drop-down button at the right of the editor while it is pressed.
PopupCommandVisualShouldApplyPaddingWhilePositioningImageGets 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.
PopupCommandVisualTextGets or sets a short text to show on the drop-down button at the right of the editor in place of its image.
PopupCommandVisualTextForeColorGets or sets the colour of the text on the drop-down button at the right of the editor.
PopupContentHostGets or sets the control shown in the drop-down.
ShouldDrawBidirectionalResizeGripperGets or sets whether the standard diagonal size grip is drawn in the bottom right corner of the drop-down.
ShouldDrawDropDownResizeSectionWith3DBorderGets or sets whether the resize section's border is drawn in 3-D rather than in DropDownResizeSectionBorderColor.
ShouldDrawDropShadowGets or sets whether the drop-down casts the system drop shadow.
ShouldDrawVerticalResizeGripperGets 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.
ShouldRememberUserSizedDropDownSizeGets or sets whether a size the user drags the drop-down to is kept for the next time it opens.
TextDisplayVisualBackColorGets or sets the background colour of the text box.
TextDisplayVisualBorderColorGets or sets the colour of the border round the text box.
TextDisplayVisualBorderThicknessGets or sets the width of the border round the text box.
TextDisplayVisualFontGets or sets the font of the text box.
TextDisplayVisualTextForeColorGets or sets the colour of the text in the text box.
Methods
ClosePopupCloses the drop-down, if it is open.
OnDropDownPopupClosedRaises the DropDownPopupClosed event.
OnDropDownPopupClosingRaises the DropDownPopupClosing event.
OnDropDownPopupOpenedRaises the DropDownPopupOpened event.
OnHandleCreatedRaises the Control.HandleCreated event and puts the text box and button in place.
OnSizeChangedRaises the Control.SizeChanged event and lays out the text box and button for the new size.
ShowOpens the drop-down, or closes it if it is already open – what a click on the drop-down button does.
Events
DropDownPopupClosedOccurs when the drop-down has closed, however it was closed.
DropDownPopupClosingOccurs as the drop-down begins to close, before it leaves the screen.
DropDownPopupOpenedOccurs when the drop-down has opened and is on screen.

Constructors

PopupEditor

public 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

public float 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

public Point 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.Empty to open it just below the editor's bottom left corner. The default is Point.Empty.
Remarks

The point is fixed on the screen: it does not follow the editor if its window moves.

DisplayText

public string DisplayText

Gets or sets the text shown in the editor's text box – the value chosen in the drop-down.

Value
The text, or null for none. The default is null.
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

public float 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

public Padding 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

public Color 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

public Color 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

public Color 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

public Size DropDownSize

Gets or sets the size of the drop-down's content area.

Value
The width and height in logical pixels, or Size.Empty to open the drop-down at the size of PopupContentHost. The default is Size.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

public bool EnableDropDownResizing

Gets or sets whether the user can resize the drop-down by dragging the strip along its foot.

Value
true to allow resizing; the default is true.
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

public Color 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

public Color 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

public Color 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

public Font 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

public Bitmap 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 null for the built-in arrow. The default is null.
Remarks

The value is stored, but the button keeps showing the built-in white arrow while hovered.

PopupCommandVisualHoveredBackColor

public Color 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

public Size 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

public Color 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

public Bitmap 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 null for the built-in arrow. The default is null.
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

public Color 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

public Bitmap 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 null for the built-in arrow. The default is null.
Remarks

The value is stored, but the button keeps showing the built-in white arrow while pressed.

PopupCommandVisualShouldApplyPaddingWhilePositioningImage

public bool 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
true to draw the image at about seven tenths of the button's size, centred; false to fill the button. The default is false.
Remarks

PopupCommandVisualText

public string 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", or null to show the image. The default is null.
Remarks

PopupCommandVisualTextForeColor

public Color 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

public Control PopupContentHost

Gets or sets the control shown in the drop-down.

Value
Any control – a MonthCalendar, a TreeView, a panel of filters, or a ready-styled PopupContentHost panel from this assembly. The default is null.
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

public bool ShouldDrawBidirectionalResizeGripper

Gets or sets whether the standard diagonal size grip is drawn in the bottom right corner of the drop-down.

Value
true to draw it; the default is true.
Remarks

Drawn only while EnableDropDownResizing is on. The corner resizes the drop-down both ways whether or not the grip is drawn.

ShouldDrawDropDownResizeSectionWith3DBorder

public bool 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

public bool ShouldDrawDropShadow

Gets or sets whether the drop-down casts the system drop shadow.

Value
true for a shadow. Reads false until set, although the drop-down casts the standard shadow until this is set to false.

ShouldDrawVerticalResizeGripper

public bool 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
true to draw it; the default is true.
Remarks

ShouldRememberUserSizedDropDownSize

public bool ShouldRememberUserSizedDropDownSize

Gets or sets whether a size the user drags the drop-down to is kept for the next time it opens.

Value
true to keep it in DropDownSize; the default is true.

TextDisplayVisualBackColor

public Color TextDisplayVisualBackColor

Gets or sets the background colour of the text box.

Value
The default is SystemColors.Window.

TextDisplayVisualBorderColor

public Color TextDisplayVisualBorderColor

Gets or sets the colour of the border round the text box.

Value
The default is Color.Chocolate, matching the button.

TextDisplayVisualBorderThickness

public int 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

public Font 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

public Color TextDisplayVisualTextForeColor

Gets or sets the colour of the text in the text box.

Value
The default is SystemColors.WindowText.

Methods

ClosePopup

public void 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

protected virtual void OnDropDownPopupClosed()

Raises the DropDownPopupClosed event.

Remarks

Call the base implementation from an override so that handlers still run.

OnDropDownPopupClosing

protected virtual void OnDropDownPopupClosing()

Raises the DropDownPopupClosing event.

Remarks

Call the base implementation from an override so that handlers still run.

OnDropDownPopupOpened

protected virtual void 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

protected override void OnHandleCreated(EventArgs e)

Raises the Control.HandleCreated event and puts the text box and button in place.

Parameters
e
The event data.

OnSizeChanged

protected override void OnSizeChanged(EventArgs e)

Raises the Control.SizeChanged event and lays out the text box and button for the new size.

Parameters
e
The event data.

Show

public new void Show()

Opens the drop-down, or closes it if it is already open – what a click on the drop-down button does.

Exceptions
System.ArgumentNullException
PopupContentHost has 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

public event EventHandler 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

public event EventHandler DropDownPopupClosing

Occurs as the drop-down begins to close, before it leaves the screen.

DropDownPopupOpened

public event EventHandler 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.