TimePickerDropDown
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
- Set
TimeValueto the starting time and read it back for the picked time. TimeConventionchooses the twelve- or twenty-four-hour clock, andTwelveHoursTimeDisplayFormatorTwentyFourHoursTimeDisplayFormatthe way the text is written.Intervalsets the step of the arrows, andMousePressedValueChangeTriggerSpeedhow fast a held arrow repeats.DropDownViewOpenedtells you when the drop-down opens.
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 | |
|---|---|
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 | Gets or sets the text the AM/PM column of the drop-down shows for times before noon. |
ContentPadding | Gets or sets the space between the edge of the drop-down and its columns. |
DropDownHostConfiguration | Gets or sets the settings for the text field, the drop-down button and the drop-down window. |
DropDownTimeSelectionButtonEndColor | Gets or sets an end colour for the button that opens the drop-down. |
DropDownTimeSelectionButtonStartColor | Gets or sets a start colour for the button that opens the drop-down. |
EnforceTimeOnlyFormats | Gets or sets whether a display format that does not produce a plain time of day is replaced by the default format. |
HourValueComponentBackColor | Gets or sets the background colour of the box the hours value is drawn in. |
HourValueComponentBackgroundEndColor | Gets or sets the colour the hours column's background gradient ends in. |
HourValueComponentBackgroundStartColor | Gets or sets the colour the hours column's background gradient starts from, round its arrows and value box. |
HourValueComponentDisplayForeColor | Gets or sets the colour the hours value is drawn in, in the drop-down. |
Interval | Gets or sets how far one click of an arrow moves the hours, minutes or seconds in the drop-down. |
MaxValue | Gets or sets an upper limit for the values in the drop-down. |
MinValue | Gets or sets a lower limit for the values in the drop-down. |
MinuteValueComponentBackColor | Gets or sets the background colour of the box the minutes value is drawn in. |
MinuteValueComponentBackgroundEndColor | Gets or sets the colour the minutes column's background gradient ends in. |
MinuteValueComponentBackgroundStartColor | Gets or sets the colour the minutes column's background gradient starts from, round its arrows and value box. |
MinuteValueComponentDisplayForeColor | Gets or sets the colour the minutes value is drawn in, in the drop-down. |
MousePressedValueChangeTriggerSpeed | Gets or sets how often a value keeps changing while an arrow is held down. |
PostMeridianValue | Gets or sets the text the AM/PM column of the drop-down shows for times from noon. |
SecondValueComponentBackColor | Gets or sets the background colour of the box the seconds value is drawn in. |
SecondValueComponentBackgroundEndColor | Gets or sets the colour the seconds column's background gradient ends in. |
SecondValueComponentBackgroundStartColor | Gets or sets the colour the seconds column's background gradient starts from, round its arrows and value box. |
SecondValueComponentDisplayForeColor | Gets or sets the colour the seconds value is drawn in, in the drop-down. |
ShouldAutoScaleTimePickerComponentsFont | Gets or sets whether a TimePickerComponentsFont you set is meant to grow and shrink with the drop-down. |
ShouldCloseSelectorDropDownViewUponAcceptCancelChanges | Gets or sets whether the drop-down closes as soon as the user changes a value in it. |
ShouldDisplayClock | Gets or sets whether an analogue clock showing the picked time is meant to appear in the drop-down. |
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. |
SpinnerBackgroundBrushEndColor | Gets or sets the colour the up and down arrows' gradient ends in at rest. |
SpinnerBackgroundBrushStartColor | Gets or sets the colour the up and down arrows' gradient starts from at rest. |
SpinnerHoverBackgroundBrushEndColor | Gets or sets the colour an arrow's gradient ends in while the pointer is over it. |
SpinnerHoverBackgroundBrushStartColor | Gets or sets the colour an arrow's gradient starts from while the pointer is over it. |
SpinnerPressedBackgroundBrushEndColor | Gets or sets the colour an arrow's gradient ends in while it is held down. |
SpinnerPressedBackgroundBrushStartColor | Gets or sets the colour an arrow's gradient starts from while it is held down. |
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. |
TimeMeridianValueComponentBackColor | Gets or sets the background colour of the box the AM/PM value is drawn in. |
TimeMeridianValueComponentBackgroundEndColor | Gets or sets the colour the AM/PM column's background gradient ends in. |
TimeMeridianValueComponentBackgroundStartColor | Gets or sets the colour the AM/PM column's background gradient starts from, round its arrows and value box. |
TimeMeridianValueComponentDisplayForeColor | Gets or sets the colour the AM/PM value is drawn in, in the drop-down. |
TimePickerComponentsFont | Gets or sets the font the hours, minutes, seconds and AM/PM are drawn in, in the drop-down. |
TimePickerDropDownBackgroundEndColor | Gets or sets the colour the drop-down's background gradient ends in. |
TimePickerDropDownBackgroundStartColor | Gets or sets the colour the drop-down's background gradient starts from, behind the columns. |
TimeValue | Gets or sets the time the control shows and the user has picked. |
TwelveHoursTimeDisplayFormat | Gets or sets the format the control shows the time in on the twelve-hour clock. |
TwentyFourHoursTimeDisplayFormat | Gets or sets the format the control shows the time in on the twenty-four-hour clock. |
ValueComponentBackColor | Gets or sets a background colour for the value boxes in the drop-down. |
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. |
ValueComponentBorderThickness | Gets or sets the width of the border round each value box in the drop-down. |
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. |
ValueStringFormat | Gets or sets how each value is aligned in its box in the drop-down. |
| Methods | |
OnDropDownViewClosed | Raises DropDownViewClosed. |
OnDropDownViewOpened | Raises DropDownViewOpened. |
OnHandleCreated | Raises the Control.HandleCreated event, and applies DropDownHostConfiguration to the text field and button. |
OnKeyUp | Raises the Control.KeyUp event, and opens the drop-down when the key is the space bar. |
OnParentChanged | Raises the Control.ParentChanged event, and redraws the control whenever its new parent is resized. |
PerformDropDown | Opens the drop-down with the hours, minutes and seconds columns, at TimeValue – or closes it if it is already open. |
| Events | |
DropDownViewClosed | Occurs when the drop-down closes, however it is closed – by clicking elsewhere, by the button, or by
ShouldCloseSelectorDropDownViewUponAcceptCancelChanges after a change. |
DropDownViewOpened | Occurs when the drop-down has opened, with its columns set to TimeValue. |
Constructors
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
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
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
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
nullunless 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
Gets or sets an end colour for the button that opens the drop-down.
- Value
- The default is
Color.Empty.
Remarks
Not used; see DropDownTimeSelectionButtonStartColor.
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
Gets or sets whether a display format that does not produce a plain time of day is replaced by the default format.
- Value
trueto check the format. The default isfalse.
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
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
Gets or sets the colour the hours column's background gradient ends in.
- Value
- The default is
Color.White.
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
Gets or sets the colour the hours value is drawn in, in the drop-down.
- Value
- The default is
Color.Black.
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
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
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
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
Gets or sets the colour the minutes column's background gradient ends in.
- Value
- The default is
Color.White.
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
Gets or sets the colour the minutes value is drawn in, in the drop-down.
- Value
- The default is
Color.Black.
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
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
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
Gets or sets the colour the seconds column's background gradient ends in.
- Value
- The default is
Color.White.
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
Gets or sets the colour the seconds value is drawn in, in the drop-down.
- Value
- The default is
Color.Black.
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
Gets or sets whether the drop-down closes as soon as the user changes a value in it.
- Value
trueto close it after each change. The default isfalse: 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
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
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
truefor full-size arrows. The default isfalse.
SpinnerBackgroundBrushEndColor
Gets or sets the colour the up and down arrows' gradient ends in at rest.
- Value
- The default is
Color.White.
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
Gets or sets the colour an arrow's gradient ends in while the pointer is over it.
- Value
- The default is
Color.White.
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
Gets or sets the colour an arrow's gradient ends in while it is held down.
- Value
- The default is
Color.White.
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
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
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
Gets or sets the colour the AM/PM column's background gradient ends in.
- Value
- The default is
Color.White.
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
Gets or sets the colour the AM/PM value is drawn in, in the drop-down.
- Value
- The default is
Color.Black.
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
Gets or sets the colour the drop-down's background gradient ends in.
- Value
- The default is
Color.White.
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
Gets or sets the time the control shows and the user has picked.
- Value
- A
DateTimeof 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
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 in03: 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
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 in15: 45: 00.
Remarks
An empty or invalid format falls back to the default. "HH:mm" gives 15:45.
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
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
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
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
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
Raises DropDownViewClosed.
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
Raises DropDownViewOpened.
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
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
Raises the Control.KeyUp event, and opens the drop-down when the key is the space bar.
Parameters
e- The event data.
OnParentChanged
Raises the Control.ParentChanged event, and redraws the control whenever its new parent is resized.
Parameters
e- The event data.
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
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
Occurs when the drop-down has opened, with its columns set to TimeValue.