TMlSkinComboBox

The skinned combo box: MLSkin draws the dropdown list, and both its colours and the arrow images are customizable.

Category
Lists & combo boxes
Unit
uMlSkinBoxCtrls.pas
Inherits from
TMlSkinCustomComboBoxTMlSkinBorderPanelTMlSkinPanelTMlSkinCustomPanelTMlSkinCustomControl

Notes

  • The entries live in Values, and DropDownCount sets how many rows the list shows.
  • The arrow uses two images, DropArrowNormal and DropArrowHot.
  • The Menu… properties style the dropdown: frame colour, selected row background, text colours and so on.
  • AutoComplete matches entries as the user types.

Example

From the demo MlSkin.Demo.滚动消息栏.v3.0 (.dfm form file)

object cbb1: TMlSkinComboBox
  Left = 51
  Top = 34
  Width = 78
  Height = 26
  Transparent = False
  Alpha = 255
  DoubleBuffered = False
  BorderEffectNormal = 'MlSkinBorderNormal'
  BorderEffectHot = 'MlSkinBorderHot'
  TabOrder = 0
  Items.Strings = (
  'aeQuad'
  'aeCirc'
  'aeBack'
  'aeBounce'
  'aeCubic'
  'aeElastic'
  'aeExpo'
  'aeQuart'

Properties 14

NameTypeDefaultDescription
AutoCompleteBooleanTrueMatches entries automatically as the user types.
ItemsTStringsThe 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.
ItemHeightIntegerHeight of each item in pixels.
DropDownCountInteger8How many rows the dropdown shows before scrolling.
DropArrowHotTMlResIDDropdown arrow image used on hover.
DropArrowNormalTMlResIDDropdown arrow image in the normal state.
ValuesTStringsThe dropdown entries, one per line.
StyleTMlSkinCustomComboBoxStylecsDropDownDrawing style.
MenuFrameColorTColor$00F9B937Frame colour of the dropdown list.
MenuItemSeletedColorTColorclHighLightBackground colour of the selected row in the dropdown.
MenuItemBackgroudColorTColorclWindowBackground colour of the dropdown list.
MenuItemSeletedFontColorTColorclHighlightTextText colour of the selected row.
MenuItemNormalFontColorTColorclBlackText colour of the normal rows.

Events 6

NameTypeDefaultDescription
OnListBoxDrawItemTMlDrawSkinItemEventFires while a dropdown row is drawn, so you can style it.
OnComboBoxDrawItemTMlDrawSkinItemEventFires while the selected value in the edit part is drawn.
OnChangeTNotifyEventFires when the content changes.
OnClickTNotifyEventFires when the control is clicked.
OnCloseUpTNotifyEventFires when the dropdown closes.
OnDropDownTNotifyEventFires when the dropdown opens.
Properties of TMlSkinBorderPanel 3
NameTypeDefaultDescription
ActiveHotFrameBooleanTrueEnables the hover border: with it on, the panel switches to BorderEffectHot while the mouse is over it.
BorderEffectNormalTMlResIDBorder image in the normal state.
BorderEffectHotTMlResIDBorder 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.
BorderSidesTSidesWhich 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.
BackgroundImageTMlResIDBackground 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
OnCustomDrawTMlCustomDrawEventCustom draw event: paint your own content after the control has drawn itself.
Properties of TMlSkinCustomControl 5
NameTypeDefaultDescription
AboutTMlAboutInfoA 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
OnDPIChangedTMlDPIChangedEventFires 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.
OnBackgroundChangingTMlBackgroundEventFires just before the background changes, giving you a chance to adjust what is drawn.
OnBackgroundChangedTMlCustomDrawEventFires after the background has been drawn, so you can paint on top of it.
OnVisibleChangedTNotifyEventFires 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.