TMlSkinIconButtonList

An icon list that arranges entries as a grid of icon buttons, like a phone home screen, with drag-to-reorder support.

Category
Lists & combo boxes
Unit
uMlSkinIconButtonList.pas
Inherits from
TMlSkinCustomIconButtonListTMlSkinCustomPanelTMlSkinCustomControl

Notes

  • Cell size comes from ItemWidth and the inherited ItemHeight, with ItemSpaceSize between them.
  • AutoDrag lets the user drag icons to reorder them; ShakeInEdit wiggles the icons in edit mode to show they can be moved or removed.
  • MultiChecked allows selecting several icons at once.
  • Clicking an icon fires OnClickItem, and its delete button fires OnDeleteClick.

Example

From the demo MlSkin.Demo.按钮列表组件.v3.0 (.dfm form file)

object lst1: TMlSkinIconButtonList
  Left = 14
  Top = 48
  Width = 361
  Height = 369
  Items = <>
  Images = il1
  ItemWidth = 60
  ItemHeight = 80
  ShakeInEdit = True
  OnClickItem = lst1ClickItem
  Anchors = [akLeft, akTop, akBottom]
end

Properties 24

NameTypeDefaultDescription
AutoDragBooleanTrueLets the user drag icons to reorder them.
AlignWithItemsTMlItemHAlignihaLeftHorizontal alignment of the items inside the control: ihaLeft, ihaCenter or ihaRight.
CaptionVisibleBooleanTrueWhether the caption is drawn. Turn it off for icon-only buttons.
CaptionWordWarpBooleanTrueWhether the caption under an icon wraps to a second line.
ItemsTMlIconButtonItemsThe control's collection of items, editable one by one in the Object Inspector.
ImagesTCustomImageListThe ImageList the icons come from.
ItemWidthIntegerWidth of each item in pixels.
ItemHeightIntegerHeight of each item in pixels.
ItemSpaceSizeInteger10Gap between items in pixels.
ItemHotImageTMlResIDBackground image shown while the mouse is over an icon.
MarginBorderSizeInteger10Padding between the content and the control edge, in pixels.
MultiCheckedBooleanTrueAllows several icons to be selected at once.
ShakeInEditBooleanFalseWiggles the icons in edit mode to show they can be dragged or deleted, like a phone home screen.
ScrollSizeInteger30Width of the scrollbar in pixels.
PressedOffsetInteger1How many pixels the content shifts down-right while pressed, giving the push-in effect; 0 means no shift.
HideScrollbarBooleanFalseHides the scrollbar while the content still scrolls.
AlphaByte192Opacity: 0 fully transparent, 255 opaque.
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.
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.
DoubleBorderBooleanTrueDouble border: draws a second line inside the border.

Events 6

NameTypeDefaultDescription
OnClickItemTItemFires when an item is clicked.
OnDrawItemTMlIconButtonItemDrawEnventFires while an item is drawn, so you can style it yourself.
OnDeleteClickTItemDeleteEventFires when an item's delete button is clicked; this is usually where you remove it.
OnGetCursorTMlGetCursorEventFires while the cursor is chosen, so different areas can use different cursors.
OnHotChangedTItemHotFires when the item under the mouse changes.
OnFocusChangingTStateChangeFires just before the focused item changes.
Events of TMlSkinCustomPanel 1
NameTypeDefaultDescription
OnCustomDrawTMlCustomDrawEventCustom draw event: paint your own content after the control has drawn itself.
Properties of TMlSkinCustomControl 4
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.
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.