TMlSkinListBox

The skinned list box: transparent background, multiple columns and multi-select, wrapping a standard ListBox inside.

Category
Lists & combo boxes
Unit
uMlSkinBoxCtrls.pas
Inherits from
TMlSkinCustomListBox → TMlSkinBorderPanel → TMlSkinPanel → TMlSkinCustomPanel → TMlSkinCustomControl

Notes

  • Content is read and written through the inner list's Items; MultiSelect allows selecting several rows.
  • Columns sets how many columns are shown and DefaultItemHeight the row height.
  • Properties and events beginning with ListBox (such as ListBoxFont and OnListBoxClick) belong to that inner list and behave like the stock control's.
  • Turning on Transparent lets the form background show through — that is how the "transparent ListBox" demo works.

Example

From the demo MlSkin.MainDemo.v3.0 (.dfm form file)

object lst1: TMlSkinListBox
  Left = 79
  Top = 199
  Width = 105
  Height = 120
  Transparent = False
  Alpha = 255
  BorderSides = []
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  BorderEffectNormal = 'MlSkinBorderNormal'
  BorderEffectHot = 'MlSkinBorderHot'
  Items.Strings = (
  'Delphi7'
  'Delphi2007'
  'Delphi2009'
  'Delphi2010'

Properties 14

NameTypeDefaultDescription
ColumnsInteger0How many columns the list is shown in.
RowCountInteger0How many rows are visible.
AlignmentTAlignmenttaLeftJustifyText alignment.
DefaultItemHeightInteger20Row height in pixels.
ItemsTStrings—The control's collection of items, editable one by one in the Object Inspector.
ItemIndexInteger-1Index of the selected item, starting at 0; -1 means none.
MultiSelectBooleanFalseAllows selecting several rows at once.
ListBoxFontTFont—Font of the inner list.
ListBoxTabOrderTTabOrder0Tab order of the inner list.
ListBoxTabStopBooleanTrueWhether Tab can move focus to the inner list.
ListBoxDragModeTDragModedmManualDrag mode of the inner list.
ListBoxDragKindTDragKinddkDragDrag kind of the inner list: dragging or docking.
ListBoxDragCursorTCursorcrDragCursor shown while dragging from the inner list.
ListBoxPopupMenuTPopupMenu—Context menu of the inner list.

Events 16

NameTypeDefaultDescription
OnUpButtonClickTNotifyEvent—Fires when the up arrow is clicked.
OnDownButtonClickTNotifyEvent—Fires when the down arrow is clicked.
OnCheckButtonClickTNotifyEvent—Fires when a row's check box is clicked.
OnListBoxClickTNotifyEvent—Fires when the inner list is clicked (its OnClick).
OnListBoxDblClickTNotifyEvent—Fires on a double click in the inner list.
OnListBoxMouseDownTMouseEvent—Fires when a mouse button goes down on the list.
OnListBoxMouseMoveTMouseMoveEvent—Fires as the mouse moves over the list.
OnListBoxMouseUpTMouseEvent—Fires when a mouse button is released on the list.
OnListBoxKeyDownTKeyEvent—Fires when a key goes down while the list has focus.
OnListBoxKeyPressTKeyPressEvent—Fires as a character is typed while the list has focus.
OnListBoxKeyUpTKeyEvent—Fires when a key is released while the list has focus.
OnListBoxDragDropTDragDropEvent—Fires when something is dropped on the list.
OnListBoxDragOverTDragOverEvent—Fires while a drag passes over the list, where you decide whether to accept the drop.
OnListBoxStartDragTStartDragEvent—Fires when a drag starts from the list.
OnListBoxEndDragTEndDragEvent—Fires when a drag from the list ends.
OnDrawItemTMlDrawSkinItemEvent—Fires while an item is drawn, so you can style it yourself.
Properties of TMlSkinBorderPanel 3
NameTypeDefaultDescription
ActiveHotFrameBooleanTrueEnables the hover border: with it on, the panel switches to BorderEffectHot while the mouse is over it.
BorderEffectNormalTMlResID—Border image in the normal state.
BorderEffectHotTMlResID—Border image used while the mouse is over the panel.
Properties of TMlSkinPanel 16
NameTypeDefaultDescription
AlphaByte192Opacity: 0 fully transparent, 255 opaque.
BorderAlphaByte255Border opacity from 0 (invisible) to 255 (solid), useful for a subtle divider.
BorderSidesTSides—Which border edges are drawn — any combination of top, bottom, left and right.
BorderColorTColor$00D9CBBABorder color.
ColorTColorclWhiteBackground color of the control; ignored while Transparent is on.
CaptionVisibleBooleanFalseWhether the caption is drawn. Turn it off for icon-only buttons.
BackgroundFillTypeTMlPngFillTypeftNormalHow the background image is laid out: ftNormal as-is, ftTile tiled, ftAutoStretch auto-stretched, ftCenter centred, ftStretch stretched to fill, ftGradient gradient.
BackgroundImageTMlResID—Background image, given as a resource ID or an image file path.
BackgroundOffsetXInteger0Horizontal offset of the background image in pixels.
BackgroundOffsetYInteger0Vertical offset of the background image in pixels.
GradientDirectionTGradientDirectiongdVerticalGradient direction: gdHorizontal or gdVertical.
GradientAlignTGradientAligngaCenterWhere the gradient is anchored: centre, left or right.
GradientSizeInteger60Size of the gradient band in pixels.
GradientStartColorTColor$00FFC446Starting color of the gradient.
GradientEndColorTColor$00FDF8F3Ending color of the gradient.
DoubleBorderBooleanTrueDouble border: draws a second line inside the border.
Properties of TMlSkinCustomPanel 1
NameTypeDefaultDescription
ColorTColorclWhiteBackground color of the control; ignored while Transparent is on.
Events of TMlSkinCustomPanel 1
NameTypeDefaultDescription
OnCustomDrawTMlCustomDrawEvent—Custom draw event: paint your own content after the control has drawn itself.
Properties of TMlSkinCustomControl 5
NameTypeDefaultDescription
AboutTMlAboutInfo—A design-time property: double-clicking it in the Object Inspector opens the MLSkin about box with the component version. It has no effect at run time and is not stored in the .dfm.
TransparentBooleanTrueTransparent background: the control skips its own fill and shows the form background (image or color) instead.
ColorTColorclWhiteBackground color of the control; ignored while Transparent is on.
AutoInvalidateBooleanFalseRepaints automatically when the content changes. Turn it on if property changes do not show up.
EraseBackgroundBooleanFalseWhether the background is erased before painting; worth toggling if the control flickers.
Events of TMlSkinCustomControl 4
NameTypeDefaultDescription
OnDPIChangedTMlDPIChangedEvent—Fires when the screen DPI changes, for example when the window moves to a monitor with a different scaling — a good place to re-adjust anything you draw yourself.
OnBackgroundChangingTMlBackgroundEvent—Fires just before the background changes, giving you a chance to adjust what is drawn.
OnBackgroundChangedTMlCustomDrawEvent—Fires after the background has been drawn, so you can paint on top of it.
OnVisibleChangedTNotifyEvent—Fires when the control is shown or hidden.

Only the properties and events MLSkin adds are listed here. Standard VCL properties such as Align, Anchors, Font and OnClick are available too and behave exactly as on the stock controls.

Offline helpA PDF / CHM version is available for offline reading.