TMetroPanel

Source: source/classes/metropnl.prg

Inherits from: TPanel

TMetroPanel implements a Windows 8-style Metro start panel with tile groups that scroll horizontally. It arranges TMetroBtn tiles into groups and rows, providing a touch-friendly interface with drag-to-scroll, mouse-wheel support, and a custom scrollbar. Each tile can be a large or small button with an image, caption, and action. TMetroBtn (child class from TBtnBmp) represents an individual Metro tile with configurable alignment, text overlay, and group membership.

Key DATA Members

DATA	Type	Description
`aButtons`	Array	Array of TMetroBtn tile objects
`nOffset`	Numeric	Current horizontal scroll offset in pixels
`nBtnSize`	Numeric	Base tile size in pixels (default 132)
`nMetroRows`	Numeric	Number of tile rows based on screen height
`nGroups`	Numeric	Number of tile groups (auto-calculated from buttons)
`nScrollRange`	Numeric	Maximum horizontal scroll extent
`nScrollRatio`	Numeric	Ratio for thumb-to-content scroll mapping
`cTitle`	Character	Panel title displayed at the top
`lDesignMode`	Logical	Enable design-time interaction
`lArranged`	Logical	Whether tiles have been positioned
`nClrScroll`	Numeric	Scrollbar track color
`nClrThumb`	Numeric	Scrollbar thumb color

TMetroBtn Class (Child of TMetroPanel)

DATA	Type	Description
`nGroup`	Numeric	Group index to which this tile belongs (default 1)
`lLarge`	Logical	If .T., tile spans 2 column widths (double-wide)
`cCaption`	Character	Main caption displayed on the tile
`cText`	Character	Secondary text displayed below the caption
`nCapAlign`	Numeric	Caption text alignment (default DT_TOP + DT_RIGHT)
`nBmpAlign`	Numeric	Bitmap alignment (default DT_BOTTOM + DT_LEFT)
`nClrCaption`	Numeric	Caption text color
`bOnMove`	Block	Code block executed when tile is moved

Methods

Method	Description
`New( oWnd, cTitle, nClrText, nClrPane, bLClicked, nBtnSize, nClrThumb, nClrScroll )`	Create a new Metro panel
`AddButton( lLarge, nGroup, cCaption, bAction, nClrText, nClrPane, cImgName, oFont, nAlign, nBmpAlign, nBmpW, nBmpH, cText, nTextAlign, oTextFont, oSubMetro, cBackImage, cAction, cSub )`	Add a TMetroBtn tile to the panel. Returns the button object.
`Arrange( lReArrange )`	Position all tiles into rows and groups. Set lReArrange=.T. to force re-layout.
`Slide( nPixels )`	Slide the panel horizontally by nPixels. Negative values scroll right.
`SwitchTo( oNext )`	Animate switch to a different Metro panel
`MoveBtn( oBtnDrag, oBtnOver )`	Move a tile from one position to another within the panel
`ProgramCode( lShow )`	Generate source code for the current panel design
`MouseWheel( nKey, nDelta, nXPos, nYPos )`	Handle mouse wheel scrolling

Example: Metro Panel with Two Groups

#include "FiveWin.ch"

function Main()

   local oWnd, oMetro

   DEFINE WINDOW oWnd TITLE "Metro Panel" SIZE 800, 600

   DEFINE METROPANEL oMetro OF oWnd TITLE "Start" ;
      COLOR CLR_WHITE, RGB( 30, 30, 120 ) ;
      ON CLICK oWnd:End()

   // Group 1: Communication tiles
   oMetro:AddButton( .T., 1, "Email", { || MsgInfo( "Email" ) }, ;
                     CLR_WHITE, RGB( 0, 120, 200 ),, , , , 64, 64 )

   oMetro:AddButton( .F., 1, "Calendar", { || MsgInfo( "Calendar" ) }, ;
                     CLR_WHITE, RGB( 200, 50, 50 ) )

   // Group 2: Productivity tiles
   oMetro:AddButton( .T., 2, "Documents", { || MsgInfo( "Docs" ) }, ;
                     CLR_WHITE, RGB( 50, 150, 50 ),, , , , 64, 64 )

   oMetro:AddButton( .F., 2, "Settings", { || MsgInfo( "Settings" ) }, ;
                     CLR_WHITE, RGB( 80, 80, 80 ) )

   ACTIVATE WINDOW oWnd MAXIMIZED

return nil

Notes