HypernovaDesktop Components · docs
Binarymission
WinForms › Time Picker › TimePickerDropDown

TimePickerDropDown

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

A time field with a drop-down of spin columns – hours, minutes, seconds and AM/PM – for picking a time of day: an appointment, a delivery slot, a shift start.

public class TimePickerDropDown : Control, ITimePickerHost

Inherits from / implements: Control, ITimePickerHost

Remarks

What it is for

The control shows the time as text, with a button beside it. The button opens a drop-down holding a column for each part of the time, each with an up arrow, the value and a down arrow. The user clicks the arrows, holds them down or turns the mouse wheel over them, and the text follows every change. The drop-down closes when the user clicks elsewhere, and can be resized by its bottom edge.

How to use it

Appearance

The colours of the arrows, the value boxes and the column backgrounds are properties of this control. The look of the text field, the drop-down button and the drop-down window – fonts, borders, size, resize strip – is in DropDownHostConfiguration. The drop-down's parts read their settings when it is first created, so set the appearance before it first opens.

Examples

A collection-time picker on a booking form, on the twenty-four-hour clock without seconds.

using System;
using System.Drawing;
using System.Windows.Forms;
using Binarymission.WinForms.Controls.Selectors.TimeSelectors;

var collectionTime = new TimePickerDropDown
{
    Location = new Point(16, 16),
    Size = new Size(180, 32),
    TimeConvention = TimeConvention.TwentyFourHours,
    TwentyFourHoursTimeDisplayFormat = "HH:mm",
    SpinnerBackgroundBrushStartColor = Color.SteelBlue,
    SpinnerHoverBackgroundBrushStartColor = Color.DodgerBlue,
    SpinnerPressedBackgroundBrushStartColor = Color.Navy
};

collectionTime.TimeValue = DateTime.Today.AddHours(9).AddMinutes(30);
collectionTime.DropDownHostConfiguration.PopupCommandVisualNormalBackColor = Color.SteelBlue;
collectionTime.DropDownHostConfiguration.PopupCommandVisualBorderColor = Color.SteelBlue;

collectionTime.DropDownViewOpened += (sender, e) => statusLabel.Text = "Choose a collection time";

bookingForm.Controls.Add(collectionTime);

Members at a glance

Constructors
TimePickerDropDownInitialises a time picker showing the current time on the twelve-hour clock, with a white drop-down and red arrow buttons.
Properties
AnteMeridianValueGets or sets the text the AM/PM column of the drop-down shows for times before noon.
ContentPaddingGets or sets the space between the edge of the drop-down and its columns.
DropDownHostConfigurationGets or sets the settings for the text field, the drop-down button and the drop-down window.
DropDownTimeSelectionButtonEndColorGets or sets an end colour for the button that opens the drop-down.
DropDownTimeSelectionButtonStartColorGets or sets a start colour for the button that opens the drop-down.
EnforceTimeOnlyFormatsGets or sets whether a display format that does not produce a plain time of day is replaced by the default format.
HourValueComponentBackColorGets or sets the background colour of the box the hours value is drawn in.
HourValueComponentBackgroundEndColorGets or sets the colour the hours column's background gradient ends in.
HourValueComponentBackgroundStartColorGets or sets the colour the hours column's background gradient starts from, round its arrows and value box.
HourValueComponentDisplayForeColorGets or sets the colour the hours value is drawn in, in the drop-down.
IntervalGets or sets how far one click of an arrow moves the hours, minutes or seconds in the drop-down.
MaxValueGets or sets an upper limit for the values in the drop-down.
MinValueGets or sets a lower limit for the values in the drop-down.
MinuteValueComponentBackColorGets or sets the background colour of the box the minutes value is drawn in.
MinuteValueComponentBackgroundEndColorGets or sets the colour the minutes column's background gradient ends in.
MinuteValueComponentBackgroundStartColorGets or sets the colour the minutes column's background gradient starts from, round its arrows and value box.
MinuteValueComponentDisplayForeColorGets or sets the colour the minutes value is drawn in, in the drop-down.
MousePressedValueChangeTriggerSpeedGets or sets how often a value keeps changing while an arrow is held down.
PostMeridianValueGets or sets the text the AM/PM column of the drop-down shows for times from noon.
SecondValueComponentBackColorGets or sets the background colour of the box the seconds value is drawn in.
SecondValueComponentBackgroundEndColorGets or sets the colour the seconds column's background gradient ends in.
SecondValueComponentBackgroundStartColorGets or sets the colour the seconds column's background gradient starts from, round its arrows and value box.
SecondValueComponentDisplayForeColorGets or sets the colour the seconds value is drawn in, in the drop-down.
ShouldAutoScaleTimePickerComponentsFontGets or sets whether a TimePickerComponentsFont you set is meant to grow and shrink with the drop-down.
ShouldCloseSelectorDropDownViewUponAcceptCancelChangesGets or sets whether the drop-down closes as soon as the user changes a value in it.
ShouldDisplayClockGets or sets whether an analogue clock showing the picked time is meant to appear in the drop-down.
ShouldDrawSpinnerButtonsInFullSizeGets or sets whether the up and down arrows in the drop-down fill the whole of their buttons, rather than being drawn half-size in the middle.
SpinnerBackgroundBrushEndColorGets or sets the colour the up and down arrows' gradient ends in at rest.
SpinnerBackgroundBrushStartColorGets or sets the colour the up and down arrows' gradient starts from at rest.
SpinnerHoverBackgroundBrushEndColorGets or sets the colour an arrow's gradient ends in while the pointer is over it.
SpinnerHoverBackgroundBrushStartColorGets or sets the colour an arrow's gradient starts from while the pointer is over it.
SpinnerPressedBackgroundBrushEndColorGets or sets the colour an arrow's gradient ends in while it is held down.
SpinnerPressedBackgroundBrushStartColorGets or sets the colour an arrow's gradient starts from while it is held down.
TimeConventionGets or sets whether the time is shown and picked on the twelve-hour clock, with AM and PM, or the twenty-four-hour clock.
TimeMeridianValueComponentBackColorGets or sets the background colour of the box the AM/PM value is drawn in.
TimeMeridianValueComponentBackgroundEndColorGets or sets the colour the AM/PM column's background gradient ends in.
TimeMeridianValueComponentBackgroundStartColorGets or sets the colour the AM/PM column's background gradient starts from, round its arrows and value box.
TimeMeridianValueComponentDisplayForeColorGets or sets the colour the AM/PM value is drawn in, in the drop-down.
TimePickerComponentsFontGets or sets the font the hours, minutes, seconds and AM/PM are drawn in, in the drop-down.
TimePickerDropDownBackgroundEndColorGets or sets the colour the drop-down's background gradient ends in.
TimePickerDropDownBackgroundStartColorGets or sets the colour the drop-down's background gradient starts from, behind the columns.
TimeValueGets or sets the time the control shows and the user has picked.
TwelveHoursTimeDisplayFormatGets or sets the format the control shows the time in on the twelve-hour clock.
TwentyFourHoursTimeDisplayFormatGets or sets the format the control shows the time in on the twenty-four-hour clock.
ValueComponentBackColorGets or sets a background colour for the value boxes in the drop-down.
ValueComponentBorderColorGets or sets the colour of the border round each value box in the drop-down – the box between a column's two arrows.
ValueComponentBorderThicknessGets or sets the width of the border round each value box in the drop-down.
ValueDisplayTextFontOffSetFactorGets or sets a margin, taken from the width and the height of each value box, inside which the number is sized to fit.
ValueStringFormatGets or sets how each value is aligned in its box in the drop-down.
Methods
OnDropDownViewClosedRaises DropDownViewClosed.
OnDropDownViewOpenedRaises DropDownViewOpened.
OnHandleCreatedRaises the Control.HandleCreated event, and applies DropDownHostConfiguration to the text field and button.
OnKeyUpRaises the Control.KeyUp event, and opens the drop-down when the key is the space bar.
OnParentChangedRaises the Control.ParentChanged event, and redraws the control whenever its new parent is resized.
PerformDropDownOpens the drop-down with the hours, minutes and seconds columns, at TimeValue – or closes it if it is already open.
Events
DropDownViewClosedOccurs when the drop-down closes, however it is closed – by clicking elsewhere, by the button, or by ShouldCloseSelectorDropDownViewUponAcceptCancelChanges after a change.
DropDownViewOpenedOccurs when the drop-down has opened, with its columns set to TimeValue.

Constructors

TimePickerDropDown

public TimePickerDropDown()

Initialises a time picker showing the current time on the twelve-hour clock, with a white drop-down and red arrow buttons.

Properties

AnteMeridianValue

public string AnteMeridianValue

Gets or sets the text the AM/PM column of the drop-down shows for times before noon.

Value
The default is the current culture's AM designator, such as "AM" or "am".
Remarks

Only the drop-down's column uses it; the time shown in the control is written by the format's tt, in the current culture. Set it to match, for example "a.m.", if the format is changed.

See also

ContentPadding

public Padding ContentPadding

Gets or sets the space between the edge of the drop-down and its columns.

Value
The default is 4 pixels on every side.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

DropDownHostConfiguration

public DropDownHostConfiguration DropDownHostConfiguration

Gets or sets the settings for the text field, the drop-down button and the drop-down window.

Value
The settings object made with the control. It is never null unless you set it so.
Remarks

Change the properties of the object the control gives you rather than replacing it: each change is applied to the control at once (or when its window is created). A replacement object is applied only when the control's window is next created.

Example
var look = timePicker.DropDownHostConfiguration;
look.TextDisplayVisualFont = new Font("Segoe UI", 11f);
look.TextDisplayVisualTextForeColor = Color.Black;
look.DropDownSize = new Size(260, 120);
look.ShouldRememberUserSizedDropDownSize = true;

DropDownTimeSelectionButtonEndColor

public Color DropDownTimeSelectionButtonEndColor

Gets or sets an end colour for the button that opens the drop-down.

Value
The default is Color.Empty.
Remarks

DropDownTimeSelectionButtonStartColor

public Color DropDownTimeSelectionButtonStartColor

Gets or sets a start colour for the button that opens the drop-down.

Value
The default is Color.Empty.
Remarks

Not used. The button's colours are set in DropDownHostConfiguration – for example DropDownHostConfiguration.PopupCommandVisualNormalBackColor.

EnforceTimeOnlyFormats

public bool EnforceTimeOnlyFormats

Gets or sets whether a display format that does not produce a plain time of day is replaced by the default format.

Value
true to check the format. The default is false.
Remarks

While it is set, the time is shown in the default format of the TimeConvention unless the chosen format has an hour, minute, second or AM/PM element and the text it gives can be read back as a time span – "HH:mm" passes, "dd MMM" does not. Text with AM or PM in it cannot be read back that way, so a twelve-hour format with tt is always replaced.

HourValueComponentBackColor

public Color HourValueComponentBackColor

Gets or sets the background colour of the box the hours value is drawn in.

Value
The default is Color.Empty, which leaves the box the colour of its surroundings.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

HourValueComponentBackgroundEndColor

public Color HourValueComponentBackgroundEndColor

Gets or sets the colour the hours column's background gradient ends in.

Value
The default is Color.White.

HourValueComponentBackgroundStartColor

public Color HourValueComponentBackgroundStartColor

Gets or sets the colour the hours column's background gradient starts from, round its arrows and value box.

Value
The default is Color.White.
Remarks

The gradient runs at 30 degrees to the column's end colour.

HourValueComponentDisplayForeColor

public Color HourValueComponentDisplayForeColor

Gets or sets the colour the hours value is drawn in, in the drop-down.

Value
The default is Color.Black.

Interval

public decimal Interval

Gets or sets how far one click of an arrow moves the hours, minutes or seconds in the drop-down.

Value
A whole number. The default is 1.
Remarks

The same step applies to all three columns. A value stops at its column's limits rather than wrapping round: hours run from 0 to 12 (twelve-hour) or 23, minutes and seconds from 0 to 59.

MaxValue

public int MaxValue

Gets or sets an upper limit for the values in the drop-down.

Value
The default is 0.
Remarks

Not used: each column keeps its own range – hours 0 to 12 or 23, minutes and seconds 0 to 59.

MinValue

public int MinValue

Gets or sets a lower limit for the values in the drop-down.

Value
The default is 0.
Remarks

Not used: each column keeps its own range, starting at 0.

MinuteValueComponentBackColor

public Color MinuteValueComponentBackColor

Gets or sets the background colour of the box the minutes value is drawn in.

Value
The default is Color.Empty, which leaves the box the colour of its surroundings.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

MinuteValueComponentBackgroundEndColor

public Color MinuteValueComponentBackgroundEndColor

Gets or sets the colour the minutes column's background gradient ends in.

Value
The default is Color.White.

MinuteValueComponentBackgroundStartColor

public Color MinuteValueComponentBackgroundStartColor

Gets or sets the colour the minutes column's background gradient starts from, round its arrows and value box.

Value
The default is Color.White.
Remarks

The gradient runs at 30 degrees to the column's end colour.

MinuteValueComponentDisplayForeColor

public Color MinuteValueComponentDisplayForeColor

Gets or sets the colour the minutes value is drawn in, in the drop-down.

Value
The default is Color.Black.

MousePressedValueChangeTriggerSpeed

public int MousePressedValueChangeTriggerSpeed

Gets or sets how often a value keeps changing while an arrow is held down.

Value
In milliseconds between steps. The default is 350. The AM/PM column repeats three times more slowly.
Remarks

Repeating stops at the column's limit. The mouse wheel over an arrow also steps the value.

PostMeridianValue

public string PostMeridianValue

Gets or sets the text the AM/PM column of the drop-down shows for times from noon.

Value
The default is the current culture's PM designator, such as "PM" or "pm".
See also

SecondValueComponentBackColor

public Color SecondValueComponentBackColor

Gets or sets the background colour of the box the seconds value is drawn in.

Value
The default is Color.Empty, which leaves the box the colour of its surroundings.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

SecondValueComponentBackgroundEndColor

public Color SecondValueComponentBackgroundEndColor

Gets or sets the colour the seconds column's background gradient ends in.

Value
The default is Color.White.

SecondValueComponentBackgroundStartColor

public Color SecondValueComponentBackgroundStartColor

Gets or sets the colour the seconds column's background gradient starts from, round its arrows and value box.

Value
The default is Color.White.
Remarks

The gradient runs at 30 degrees to the column's end colour.

SecondValueComponentDisplayForeColor

public Color SecondValueComponentDisplayForeColor

Gets or sets the colour the seconds value is drawn in, in the drop-down.

Value
The default is Color.Black.

ShouldAutoScaleTimePickerComponentsFont

public bool ShouldAutoScaleTimePickerComponentsFont

Gets or sets whether a TimePickerComponentsFont you set is meant to grow and shrink with the drop-down.

Value
The default is false.
Remarks

While it is set, the values are drawn in TimePickerComponentsFont enlarged to fill their boxes, never smaller than the font's own size. Off, they are drawn at the font's own size. With no TimePickerComponentsFont, the values are always sized to fit.

ShouldCloseSelectorDropDownViewUponAcceptCancelChanges

public bool ShouldCloseSelectorDropDownViewUponAcceptCancelChanges

Gets or sets whether the drop-down closes as soon as the user changes a value in it.

Value
true to close it after each change. The default is false: it stays open until the user clicks elsewhere.
Remarks

Each click of an arrow is a change, so with this set the user can make one step per opening – suited to a drop-down that sets a single value, such as the hour. DropDownViewClosed is raised as the drop-down closes.

ShouldDisplayClock

public bool ShouldDisplayClock

Gets or sets whether an analogue clock showing the picked time is meant to appear in the drop-down.

Value
The default is false.
Remarks

Not used: the drop-down shows no clock whatever this is set to.

ShouldDrawSpinnerButtonsInFullSize

public bool ShouldDrawSpinnerButtonsInFullSize

Gets or sets whether the up and down arrows in the drop-down fill the whole of their buttons, rather than being drawn half-size in the middle.

Value
true for full-size arrows. The default is false.

SpinnerBackgroundBrushEndColor

public Color SpinnerBackgroundBrushEndColor

Gets or sets the colour the up and down arrows' gradient ends in at rest.

Value
The default is Color.White.

SpinnerBackgroundBrushStartColor

public Color SpinnerBackgroundBrushStartColor

Gets or sets the colour the up and down arrows' gradient starts from at rest.

Value
The default is Color.Red.
Remarks

Each arrow button is filled with a gradient at 30 degrees; an arrow that has reached its column's limit is drawn light grey.

SpinnerHoverBackgroundBrushEndColor

public Color SpinnerHoverBackgroundBrushEndColor

Gets or sets the colour an arrow's gradient ends in while the pointer is over it.

Value
The default is Color.White.

SpinnerHoverBackgroundBrushStartColor

public Color SpinnerHoverBackgroundBrushStartColor

Gets or sets the colour an arrow's gradient starts from while the pointer is over it.

Value
The default is Color.Green.

SpinnerPressedBackgroundBrushEndColor

public Color SpinnerPressedBackgroundBrushEndColor

Gets or sets the colour an arrow's gradient ends in while it is held down.

Value
The default is Color.White.

SpinnerPressedBackgroundBrushStartColor

public Color SpinnerPressedBackgroundBrushStartColor

Gets or sets the colour an arrow's gradient starts from while it is held down.

Value
The default is Color.Purple.
See also

TimeConvention

public TimeConvention TimeConvention

Gets or sets whether the time is shown and picked on the twelve-hour clock, with AM and PM, or the twenty-four-hour clock.

Value
The default is TimeConvention.TwelveHours.
Remarks

The convention picks the display format – TwelveHoursTimeDisplayFormat or TwentyFourHoursTimeDisplayFormat – and whether the drop-down has an AM/PM column. Setting it redisplays TimeValue.

On the twelve-hour clock the drop-down's hour and AM/PM columns together give the hour of the day – 12 AM is midnight and 12 PM is noon; on the twenty-four-hour clock the hour column alone does.

TimeMeridianValueComponentBackColor

public Color TimeMeridianValueComponentBackColor

Gets or sets the background colour of the box the AM/PM value is drawn in.

Value
The default is Color.Empty, which leaves the box the colour of its surroundings.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

TimeMeridianValueComponentBackgroundEndColor

public Color TimeMeridianValueComponentBackgroundEndColor

Gets or sets the colour the AM/PM column's background gradient ends in.

Value
The default is Color.White.

TimeMeridianValueComponentBackgroundStartColor

public Color TimeMeridianValueComponentBackgroundStartColor

Gets or sets the colour the AM/PM column's background gradient starts from, round its arrows and value box.

Value
The default is Color.White.
Remarks

The gradient runs at 30 degrees to the column's end colour.

TimeMeridianValueComponentDisplayForeColor

public Color TimeMeridianValueComponentDisplayForeColor

Gets or sets the colour the AM/PM value is drawn in, in the drop-down.

Value
The default is Color.Black.

TimePickerComponentsFont

public Font TimePickerComponentsFont

Gets or sets the font the hours, minutes, seconds and AM/PM are drawn in, in the drop-down.

Value
The default is null: each value is drawn in the control's font family, as large as fits its box (up to 72 points), so the digits grow when the user enlarges the drop-down.
See also

TimePickerDropDownBackgroundEndColor

public Color TimePickerDropDownBackgroundEndColor

Gets or sets the colour the drop-down's background gradient ends in.

Value
The default is Color.White.

TimePickerDropDownBackgroundStartColor

public Color TimePickerDropDownBackgroundStartColor

Gets or sets the colour the drop-down's background gradient starts from, behind the columns.

Value
The default is Color.White.
Remarks

The background is a gradient at 30 degrees to TimePickerDropDownBackgroundEndColor.

TimeValue

public DateTime TimeValue

Gets or sets the time the control shows and the user has picked.

Value
A DateTime of which the time of day is shown. The default is the time the control was created.
Remarks

The control shows it in TwelveHoursTimeDisplayFormat or TwentyFourHoursTimeDisplayFormat, as TimeConvention says, and opens the drop-down at it. Each change the user makes in the drop-down sets it straight away, with today's date.

The control raises no event when it changes; read it when the drop-down closes, or when the form is saved.

Example
collectionTime.TimeValue = DateTime.Today.AddHours(16).AddMinutes(30);

// Later, when the booking is saved:
booking.CollectAt = booking.Date.Date + collectionTime.TimeValue.TimeOfDay;

TwelveHoursTimeDisplayFormat

public string TwelveHoursTimeDisplayFormat

Gets or sets the format the control shows the time in on the twelve-hour clock.

Value
A .NET date and time format string. The default is "hh: mm: ss tt", as in 03: 45: 00 PM.
Remarks

An empty or invalid format falls back to the default. Use h or hh for the hour, and tt for AM and PM; "h:mm tt" gives 3:45 PM. See also EnforceTimeOnlyFormats.

TwentyFourHoursTimeDisplayFormat

public string TwentyFourHoursTimeDisplayFormat

Gets or sets the format the control shows the time in on the twenty-four-hour clock.

Value
A .NET date and time format string. The default is "HH: mm: ss", as in 15: 45: 00.
Remarks

An empty or invalid format falls back to the default. "HH:mm" gives 15:45.

ValueComponentBackColor

public Color ValueComponentBackColor

Gets or sets a background colour for the value boxes in the drop-down.

Value
The default is Color.Empty.
Remarks

Not used by the drop-down: each column's value box takes its colour from its own property – HourValueComponentBackColor, MinuteValueComponentBackColor, SecondValueComponentBackColor and TimeMeridianValueComponentBackColor.

ValueComponentBorderColor

public Color ValueComponentBorderColor

Gets or sets the colour of the border round each value box in the drop-down – the box between a column's two arrows.

Value
The default is Color.Black.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

See also

ValueComponentBorderThickness

public int ValueComponentBorderThickness

Gets or sets the width of the border round each value box in the drop-down.

Value
In pixels. The default is 1. 0 draws no border.
Remarks

Read when the drop-down is first created, so set it before the drop-down first opens.

ValueDisplayTextFontOffSetFactor

public int ValueDisplayTextFontOffSetFactor

Gets or sets a margin, taken from the width and the height of each value box, inside which the number is sized to fit.

Value
In pixels. The default is 5 logical pixels, converted for the display when the control is created.
Remarks

While TimePickerComponentsFont is null the numbers are drawn as large as fits the box less this margin, so a larger value gives smaller digits with more room round them.

ValueStringFormat

public StringFormat ValueStringFormat

Gets or sets how each value is aligned in its box in the drop-down.

Value
The default centres the value both ways.

Methods

OnDropDownViewClosed

protected virtual void OnDropDownViewClosed()
Remarks

Called each time the drop-down closes, after TimeValue has been updated. An override should call the base method so handlers still run.

OnDropDownViewOpened

protected virtual void OnDropDownViewOpened()
Remarks

Called once the drop-down is on screen with its columns set. An override should call the base method so handlers still run.

OnHandleCreated

protected override void OnHandleCreated(EventArgs e)

Raises the Control.HandleCreated event, and applies DropDownHostConfiguration to the text field and button.

Parameters
e
The event data.
Remarks

From then on, a change to a DropDownHostConfiguration property is applied as it is made.

OnKeyUp

protected override void OnKeyUp(KeyEventArgs e)

Raises the Control.KeyUp event, and opens the drop-down when the key is the space bar.

Parameters
e
The event data.

OnParentChanged

protected override void OnParentChanged(EventArgs e)

Raises the Control.ParentChanged event, and redraws the control whenever its new parent is resized.

Parameters
e
The event data.

PerformDropDown

public void PerformDropDown()

Opens the drop-down with the hours, minutes and seconds columns, at TimeValue – or closes it if it is already open.

Remarks

The drop-down appears below the control, or at DropDownHostConfiguration.DisplayLocation when that is set. The user can also open it with the control's button, or with the space bar while the control itself has the focus.

Events

DropDownViewClosed

public event EventHandler DropDownViewClosed

Occurs when the drop-down closes, however it is closed – by clicking elsewhere, by the button, or by ShouldCloseSelectorDropDownViewUponAcceptCancelChanges after a change.

Remarks

By then TimeValue holds the time the user picked.

DropDownViewOpened

public event EventHandler DropDownViewOpened

Occurs when the drop-down has opened, with its columns set to TimeValue.

See also