A Recreation Of TrayMenu Style Separators using GUI Label Controls : Tutorial

[iAmNewbe]

This may or may not be useful and comes in play if you are not using a UDF or the built-in methods or 3rd party code for creating menus and layouts.

I wrote this with the assumption the reader is new to the language and doesn't have a lot of experience yet.

Possible Reasons
1: You are writing Gui elements yourself from scratch.  Why?  because you just desire to.
2: Need for something to work a specific way that the built-in methods do not allow for.
3: You just want a learning exercise.

I was trying to figure out how to recreate the separators you see in tray menus with that same style inside a GUI using Label Controls.
You know those single lines that separate menu items when you use  
 

TrayCreateItem("") ; Create a separator line.

See Attached Image

Either there is no single GUI control to allow for the exact styling of separator lines seen in the Tray Menu OR I haven't discovered it yet.

My solution:


The color codes in RGB HEX
 

0xD5DFE5  ;~  A light blue grey color
0xFFFFFF  ;~  Color white

When you insert your Label Control leave the "text" part empty and do not use any option flags.
Some of the Style and Ex Style options prevent coloring and sizing the control. 
 

GUICtrlCreateLabel("", LEFT, TOP, WIDTH, HEIGHT)

 

You need TWO controls and TWO background color settings 

 

Horizontal Separator  - White Color goes on bottom

GUICtrlCreateLabel("", LEFT, TOP, WIDTH, HEIGHT)         ;~  Empty Label Control
GUICtrlSetBKColor(-1, 0xD5DFE5)                          ;~  Background Color Setting for previous Label Control
GUICtrlCreateLabel("", LEFT, TOP + 1, WIDTH, HEIGHT)     ;~  Second Label Control needs to be distanced one away from previous Label Control
GUICtrlSetBKColor(-1, 0xFFFFFF)

 

Vertical Separator - White Color is on INSIDE or to the Right of the grey line

GUICtrlCreateLabel("", LEFT, TOP, HEIGHT, WIDTH)         ;~ Reverse Width and Height
GUICtrlSetBKColor(-1, 0xD5DFE5)                          
GUICtrlCreateLabel("", LEFT + 1, TOP, HEIGHT, WIDTH)     ;~ Add ONE to the LEFT not the TOP 
GUICtrlSetBKColor(-1, 0xFFFFFF)

This will MATCH the Tray Menu separators in color and look.  
 

Edited August 21, 2022 by iAmNewbe

[iAmNewbe]

 
Full Code Sample
 

expandcollapse popup

#include <WindowsConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <TrayConstants.au3> ; Required for the $TRAY_ICONSTATE_SHOW constant.

Opt("TrayMenuMode", 3) ; The default tray menu items will not be shown and items are not checked when selected. These are options 1 and 2 for TrayMenuMode.

HotKeySet("{ESC}", "close")

Example()

Func Example()

    Global $hGui = GUICreate("Example", 200, 120, -1, -1)

    GUISetState(@SW_SHOW, $hGui)

    #Region ;~ Vertical Separator
    GUICtrlCreateLabel("", 30, 20, 1, 90) ; L T W H
    GUICtrlSetBKColor(-1, 0xD5DFE5)
    GUICtrlCreateLabel("", 31, 20, 1, 90) ; L T W H
    GUICtrlSetBKColor(-1, 0xFFFFFF)
    #EndRegion

    #Region ;~ Horizontal Separator
    GUICtrlCreateLabel("", 32, 40, 150, 1) ; L T W H
    GUICtrlSetBKColor(-1, 0xD5DFE5)
    GUICtrlCreateLabel("", 32, 41, 150, 1) ; L T W H
    GUICtrlSetBKColor(-1, 0xFFFFFF)
    #EndRegion

    GUICtrlCreateLabel("Separator Lines Example", 32, 55, 150, 20, $SS_CENTER) ; L T W H Style StyleEX

    #Region ;~ Horizontal Separator
    GUICtrlCreateLabel("", 32, 81, 150, 1) ; L T W H
    GUICtrlSetBKColor(-1, 0xD5DFE5)
    GUICtrlCreateLabel("", 32, 82, 150, 1) ; L T W H
    GUICtrlSetBKColor(-1, 0xFFFFFF)
    #EndRegion

    #Region ;~ Tray Menu
    TrayCreateItem("") ; Create a separator line.
    TrayCreateItem("Separator Lines Example")
    TrayCreateItem("") ; Create a separator line.
    #EndRegion

    Local $idExit = TrayCreateItem("Exit")

    TraySetState($TRAY_ICONSTATE_SHOW) ; Show the tray menu.

    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE
                close()
        EndSwitch

        Switch TrayGetMsg()
            Case $idExit ; Exit the loop.
                close()
        EndSwitch
    WEnd
EndFunc   ;==>Example


Func close()
    GUIDelete($hGui)
    Exit
EndFunc

 

[iAmNewbe]

Basically you just put two controls next to each other and color one, one color and another something else.

I was writing a question about this on HOW to do this and in the process I figured it out.
Since I wrote most of it already I just finished it into a little tutorial for those not already in the know on this.

I am sure I will forget this and will need at sometime to rediscover so this is also a tutorial for my future self when I forget.


There used to be a tutorial or scripts section in the forums, I am not able to find it or would put it there instead of here. Since it is GUI related I posted to the GUI Help and Support section.

Edited August 21, 2022 by iAmNewbe