StyleControl Basics

An excellent UI library for Windows applications written in Delphi is StyleControls by AlmediaDev. This UI library will give your Windows apps an elegant, modern look. It is very powerful and contains lots of controls and flexibility. You can even use it to create FluentUI style applications. (See screenshots at http://almdev.com/prods/stylecontrols/stylecontrols_scs.html and http://almdev.com/prods/stylecontrols/stylecontrols_fuiscs.html)

Unfortunately, while this library is very powerful, it does have a big drawback. There is no online documentation or help files. Fortunately there are a lot of sample programs, but for the beginner to this library it can be confusing.

So, here is a beginner’s tutorial to using StyleControls.


For Step 1 you are going to want to launch your Delphi IDE and create a new “Windows VCL Application”

The next thing you should do is save your project. In my example I have named the files as follows:

  • Project File: SCBasic.dproj
  • Form File: FormMain.pas

As an optional step, open the project options and go to the Appearance section. There you can set your application’s title and your desired VCL style.

After you have gotten all of that out of the way, you need to set a few properties for your main form. In this sample O have set my properties as follows:

  • BorderStyle: bsNone
  • Name: frmMain

Now drop a TscStyleManager on your form and set its name property to stymgrMain.

Next add a TdcStyledForm component and set its properties to:

  • DWMClientShadow: True
  • DWMClientShadowHitTest: True
  • Name: styfrmMain

Next you need to drop a TscGPPanel on your form. This will be the main container for all of the other controls we are going to place on the form. Its properties should be set to the following:

  • Align: alClient
  • FillColorAlpha: 255
  • FrameColor: $009A572B ( or any other color you want)
  • FrameWidth: 1
  • Name: pnlWindow (in this example)
  • ScaleFrameWidth: False
  • TransparentBackground: False

Now on to creating a caption bar for our sample. To do this we drop a TscGPPanel on to pnlWindow and set its properties to:

  • Align: alTop
  • FillColor: $009A572B (or whatever FrameColor was set for pnlWindow)
  • FillColorAlpha: 255
  • FrameWidth: 0
  • Height: 34
  • Name: pnlCaption
  • ScaleFrameWidth: True
  • StorePaintBuffer: False
  • TransparentBackground: False

Because our form’s true border is set to bsNone we need to handle all aspects of the form ourselves. This includes the form’s system menu. (The one that shows when you click the icon in the upper left corner or press alt+spacebar.) To do this wee need to drop a TActionList on to the form and set its name property to alstMain. Create the following actions in the action list (all are TAction instances.)

  • actClose
    • Caption: &Close
    • Shortcut: Alt+F4
  • actMaximize – Caption: Ma&ximize
  • actMaxRestore
  • actMinimize – Caption: Mi&nimize
  • actMove – Caption: &Move
  • actRestore – Caption: &Restore
  • actSize – Caption: &Size

(See the source code available at https://github.com/AngelicTech/SCBasic for the event handler code for these actions.)

Now we need to create a TPopupMenu instance (name it puSysMenu) and populate it with the following items (in this order)

  1. mnuRestore – Action: actRestore
  2. mnuMove – Action: actMove
  3. mnuSize – Action actSize
  4. mnuMinimize – Action: actMinimize
  5. mnuMaximize – Action: actMaximize
  6. mnuSysMenuSep – Caption: –
  7. mnuClose – Action: actClose

You will also need to add an imagelist to hold the image for our “SysMenu” button. In the sample we have used a TVirtualImageList (vilMain) component and its associated TImageCollection (imgcollMain).

Now we can simulate the SysMenu “button” by adding a TscGPButton instance to the pnlCaption panel and setting its properties as follows:

  • Align: alLeft
  • CanFocused: False
  • DropDownMenu: puSysMenu
  • Name: btnSysMenu
  • Options.DisabledColor: White
  • Options.FocusedColor: White
  • Options.FrameDisabledColor: No Colour
  • Options.FrameFocusedColor: No Colour
  • Options.FrameHotColor: No Colour
  • Options.FrameNormalColor: No Color
  • Options.FramePressedColor: No Colour
  • Options.HotColor: White
  • Options.HotColorAlpha: 30
  • Options.NormalColor: White
  • Options.NormalColorAlpha: 0
  • Options.PressedColor: Black
  • Options.PressedColorAlpha: 50
  • ShowCaption: False
  • ShowMenuArrow: False
  • TabStop: False
  • Width: 34

Ok, now that the SysMenu has been taken care of we need to create the caption buttons on the right hand side of the caption bar. To do this we start by placing a TscGPGlyphButton (this will be the close button) and setting its properties:

  • Action: actClose
  • Align: alRight
  • CanFocused: False
  • GlyphOptions.DisabledColor: White
  • GlyphOptions.FocusedColor: White
  • GlyphOptions.HotColor: White
  • GlyphOptions.Kind: scgpbgkClose
  • GlyphOptions.NormalColor: White
  • GlyphOptions.NormalColorAlpha: 255
  • GlyphOptions.PressedColor: White
  • GlyphOptions.Thickness: 1
  • Name: btnClose
  • Options.FrameDisabledColor: No Colour
  • Options.FrameFocusedColor: No Colour
  • Options.FrameHotColor: No Colour
  • Options.FrameNormalColor: No Color
  • Options.FramePressedColor: No Colour
  • Options.HotColor: Red
  • Options.HotColorAlpha: 220
  • Options.NormalColor: No Color
  • Options.NormalColorAlpha: 0
  • Options.PressedColor: Red
  • Options.PressedColorAlpha: 180
  • ShowCaption: False
  • TabStop: False
  • Width: 50

Add another TscGPGlyphButton to the caption bar (this is the maximize/restore button) and set its properties:

  • Action: actMaxRestore
  • Align: alRight
  • CanFocused: False
  • GlyphOptions.DisabledColor: White
  • GlyphOptions.FocusedColor: White
  • GlyphOptions.HotColor: White
  • GlyphOptions.Kind: scgpbgkMaximize
  • GlyphOptions.NormalColor: White
  • GlyphOptions.NormalColorAlpha: 255
  • GlyphOptions.PressedColor: White
  • GlyphOptions.Thickness: 1
  • Name: btnMaxRestore
  • Options.DisabledColor: White
  • Options.FocusedColor: White
  • Options.FrameDisabledColor: No Colour
  • Options.FrameFocusedColor: No Colour
  • Options.FrameHotColor: No Colour
  • Options.FrameNormalColor: No Color
  • Options.FramePressedColor: No Colour
  • Options.HotColor: White
  • Options.HotColorAlpha: 30
  • Options.NormalColor: White
  • Options.NormalColorAlpha: 0
  • Options.PressedColor: Black
  • Options.PressedColorAlpha: 50
  • ShowCaption: False
  • TabStop: False
  • Width: 50

And finally our minimize button (another TscGPGlyphButton):

  • Action: actMinimize
  • Align: alRight
  • CanFocused: False
  • GlyphOptions.DisabledColor: White
  • GlyphOptions.FocusedColor: White
  • GlyphOptions.HotColor: White
  • GlyphOptions.Kind: scgpbgkMaximize
  • GlyphOptions.NormalColor: White
  • GlyphOptions.NormalColorAlpha: 255
  • GlyphOptions.PressedColor: White
  • GlyphOptions.Thickness: 1
  • Name: btnMinimize
  • Options.DisabledColor: White
  • Options.FocusedColor: White
  • Options.FrameDisabledColor: No Colour
  • Options.FrameFocusedColor: No Colour
  • Options.FrameHotColor: No Colour
  • Options.FrameNormalColor: No Color
  • Options.FramePressedColor: No Colour
  • Options.HotColor: White
  • Options.HotColorAlpha: 30
  • Options.NormalColor: White
  • Options.NormalColorAlpha: 0
  • Options.PressedColor: Black
  • Options.PressedColorAlpha: 50
  • ShowCaption: False
  • TabStop: False
  • Width: 50

Now we can finally add our caption label. Drop a TscLabel onto the caption panel. Its properties should be set to:

  • Align: atClient
  • Alignment: taCenter
  • AutoSize: False
  • Caption: – Set this to whatever you want. –
  • DragForm: True
  • Font.Color: White
  • Font.Size: 10
  • Name: lblCaption
  • VertAlignment: scvtaCenter

That’s it for the basic layout of a form using StyleControls. There are several event handlers that need to be created, but placing all of that code here would take up even more space in this already long article. To view the code go to the GitHub repository for this article.

The sample project in the GitHub repository contains an optional status bar implementation. It is pretty simple and at this point self-explanatory (just a TscGPPanel, TscLabel and TscGPSizeBox), so be sure to check it out. (literally, lol)

Leave a comment