Skip to content

TTMSFNCSpinner

TTMSFNCSpinner is a scrolling selector control using multiple draggable wheels. Each weel can contain a different and selectable range of values.

Columns

The spinner has a Columns collection property.

Each column of the spinner can be configured to scroll through a specific range of numbers, datetime values or custom values. The type of the range is set with RangeType property. For numbers, the range is set with RangeFrom and RangeTo properties. For a datetime range, the range is set with DateRangeFrom and DateRangeTo properties. The formatting of numbers and/or date time values displayed is controlled by DateTimeValueFormat or ValueFormat. For DateTimeValueFormat all formatting capabilities of the Delphi method FormatDateTime() are available. For the ValueFormat, all formatting capabilities of the Delphi method Format() are available. Each wheel has the option to make the wheel range cyclic. This is chosen by setting Cyclic to True. When this is true, the first range value is shown again immediately after the last range value and vice versa.

Property name Description
CustomItems: TTMSFNCSpinnerCustomItems A collection of custom values in the column.
Cyclic: Boolean When true, values are displayed as endless loop. The values are cyclic repeated when scrolling up or down.
DateRangeFrom: TDateTime The start of the range used when the RangeType is configured to used dates (srtDateTime). The Step defines the amount of divisions between these 2 range properties.
DateRangeTo: TDateTime The end of the range used when the RangeType is configured to used dates (srtDateTime). The Step defines the amount of divisions between these 2 range properties.
Font: TTMSFNCGraphicsFont The font of the text in a column.
OnlyDate: Boolean If the RangeType is set to use datetime values, the SelectedValue contains only the Date part.
RangeFrom: Double Defines the start of the range of values used when setting the RangeType to srtNumber.
RangeTo: Double Defines the end of the range of values used when setting the RangeType to srtNumber.
RangeType: TTMSFNCSpinnerRangeType Defines the type of the range.
SelectedFont: TTMSFNCGraphicsFont The font of the selected value text in a column.
SelectedValue: Double Gets or sets the selected value. This property is used for both datetime range and the number range.
Step: Double The amount of steps between the start and end range in either number or datetime mode.
StepType: TTMSFNCSpinnerStepType When not using srtNumber range type, the StepType can be set to increase per second, minute, hour, day, month or year.
TextAlign: TTMSFNCGraphicsTextAlign Sets the alignment of the text within a column.
ValueFormat: string Sets the formatting of the value when RangeType is srtNumber.
Width: Integer Sets the width of the column if the AutoSizing is false.

Sample

In the sample code snippet below, the spinner is configured to allow selecting a day and hour between now and 10 years.

procedure TForm2.FormCreate(Sender: TObject);
begin
  TMSFNCSpinner1.Columns[0].RangeType := rtDateTime;
  TMSFNCSpinner1.Columns[0].StepType := stDay;
  TMSFNCSpinner1.Columns[0].RangeFrom := Now;
  TMSFNCSpinner1.Columns[0].RangeTo := Now + 365 * 10;
  TMSFNCSpinner1.Columns[0].DateTimeValueFormat := 'DDD dd MMM';
  TMSFNCSpinner1.Columns[1].RangeType := rtNumber;
  TMSFNCSpinner1.Columns[1].StepType := stNumber;
  TMSFNCSpinner1.Columns[1].RangeFrom := 0;
  TMSFNCSpinner1.Columns[1].RangeTo := 23;
  TMSFNCSpinner1.Columns[1].ValueFormat := '%d';
  TMSFNCSpinner1.Columns[1].Cyclic := true;
  TMSFNCSpinner1.Columns[2].RangeType := rtNumber;
  TMSFNCSpinner1.Columns[2].StepType := stNumber;
  TMSFNCSpinner1.Columns[2].Step := 5;
  TMSFNCSpinner1.Columns[2].RangeFrom := 0;
  TMSFNCSpinner1.Columns[2].RangeTo := 55;
  TMSFNCSpinner1.Columns[2].ValueFormat := '%.2d';
  TMSFNCSpinner1.Columns[2].Cyclic := true;
end;

Styling

Via the ColumnAppearance property the columns can be styled. These settings will be applied to all columns.

Property name Description
AutoSize: Boolean When true, size of the spinner columns is calculated automatically.
AllowHovering: Boolean Allows mouse hover.
ImageHeight: Integer Height of the images in the column.
ImageWidth: Integer Width of the images in the column.
ShowFocus: Boolean Enable or disable the focus border.
Spacing: Integer Sets the spacing between the columns.
TextSpacing: Integer Sets the spacing between the text drawn in the columns.

The Appearance property contains settings that apply to the whole spinner.

Property name Description
BottomLayerColor: TTMSFNCGraphicsColor Sets the color of the bottom gradient.
SelectedFill: TTMSFNCGraphicsFill Sets the fill of the selection rectangle.
SelectedHeight: Integer Sets the height of the selection rectangle.
SelectedRounding: Integer Sets the border rounding of the selection rectangle.
SelectedStroke: TTMSFNCGraphicsStroke Sets the stroke of the selection rectangle.
TopLayerColor: TTMSFNCGraphicsColor Sets the color of the top gradient.

For individual customization one will need to implement the custom drawing events.

Properties

Property name Description
AnimationFactor: Integer Used when SmoothScolling is set to True.
Appearance: TTMSFNCSpinnerAppearance Various spinner appearance settings.
ColumnAppearance: TTMSFNCSpinnerColumnAppearance Various column appearance settings.
Columns: TTMSFNCSpinnerColumns Collection of columns.
ReadOnly: Boolean Sets the spinner to read-only mode.
SmoothScrolling: Boolean When dragging and holding the left mouse button the value changes. If SmoothScrolling is false, the value is snapped inside the selected value area. If SmoothScrolling is true, the value is only snapped when releasing the left mouse button.

Methods

Method name Description
FocusedColumn: Integer Returns the column number that is in focus.
XYToColumn(X, Y: Single): Integer Returns the column number at (X,Y) coordinates.

Events

Event name Description
OnAfterDrawColumnBackground Event triggered after the column background was drawn.
OnAfterDrawColumnContents Event triggered after the column contents were drawn.
OnAfterDrawColumnItem Event triggered after a column item was drawn.
OnAfterDrawSelectedLayer Event triggered after the selected rectangle was drawn.
OnBeforeDrawColumnBackground Event triggered before the column background is drawn.
OnBeforeDrawColumnContents Event triggered before the column contents are drawn.
OnBeforeDrawColumnItem Event triggered before a column item is drawn.
OnBeforeDrawSelectedLayer Event triggered before the selected rectangle is drawn.