Page 1 of 1

AHK Gui tab styling

Posted: 12 Jul 2014, 23:00
by PuzzledGreatly
Is there anyway to change the tab style so that it doesn't use white for the outline? I tried 0x8 but it gave me a thick horrible gray border around the non-active buttons. Thanks:

Code: Select all

Gui, -Caption  +ToolWindow -DPIScale
Gui, margin, 40,40
Gui, Color, c3366FF, c3366FF
Gui, Font, s40 cWhite bold
Gui, add, Tab2, w1200 h600 +buttons, Tab 1|Tab 2|Tab 3
Gui, show
return

esc:: exitapp

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 04:49
by just me
:arrow: Default Tab Control Message Processing -> WM_PAINT

I think this cannot be done without subclassing the control, processing the WM_PAINT message, and drawing the control by yourself.

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 11:51
by tmplinshi
In fact, if you add a Tab control with w0 h0 options, then you can use any control as the Tab buttons. An example:

Code: Select all

#NoEnv
SetBatchLines -1
#Include <Class_ImageButton> ; http://ahkscript.org/boards/viewtopic.php?f=6&t=1103

Gui, Color, White
Gui, Margin, 50, 50
Gui, Font, s16

AddImageTab("", "page1|page2|page3||page4")
	Gui, Tab, 1, 1
		Gui, Add, Text, xm Section Border w296 h200 0x201, page1
	Gui, Tab, 2
		Gui, Add, Button, xp w200, page2
	Gui, Tab, 3
		Gui, Add, Edit, xp w200 h200, page3
	Gui, Tab, 4
		Gui, Add, Radio, xp w200 h200, page4
	Gui, Tab

AddImageTab("xm y+0", "page1|page2||page3|page4", 1)
	Gui, Add, Text, x+10 yp-116 w210 h155 Border, 
	Loop, 4
	{
		Gui, Tab, %A_Index%
		Gui, Add, Text, xp+2 yp+2 wp-4 hp-4 0x201 cBlue, % "Page " A_Index
	}
Gui, Show
Return

GuiClose:
ExitApp

AddImageTab(Options, Pages, Vertical = False) {
	static HwndList := {}

	Opt1 := [3, 0xEEF1F4, 0xE4E9EF, "Black", 0,, 0xA5AFBF, 1]
	Opt2 := [3, 0xCDD6DF, 0xCDD6DF, "Black", 0,, 0xA5AFBF, 1]
	Opt3 := [3, 0xBEC7D6, 0xBEC7D6, "Black", 0,, 0xA5AFBF, 1]
	Opt4 := [3, 0xBEC7D6, 0xBEC7D6, "Black", 0,, 0xA5AFBF, 1]

	Gui, Add, Tab2, w0 h0 AltSubmit HwndHTab, % Pages ; Add an invisible Tab control
	Gui, Tab

	if !InStr(Pages, "||")
		Pages := Trim( StrReplace(Pages, "|", "||",, 1), "|" )

	TabIndex := 0
	Loop, Parse, Pages, |
	{
		if (A_LoopField = "") {
			GuiControl, Disable, %HBT%
			Continue
		}

		_Options := (A_Index = 1) ? Options " xp" : (Vertical ? "y+0" : "x+0")
		Gui, Add, Button, %_Options% HwndHBT g___AddImageTab_ChangeTab, % A_LoopField
			ImageButton.Create(HBT, Opt1, Opt2, Opt3, Opt4)

		TabIndex ++
		HwndList[HBT]                   := {TabIndex: TabIndex, TabHwnd: HTab}
		HwndList["HTab", HTab, TabIndex] := HBT
	}

	Return

	___AddImageTab_ChangeTab:
		GuiControlGet, focused_control, Focus
		GuiControlGet, focused_controlHwnd, Hwnd, %focused_control%
		TabIndex := HwndList[focused_controlHwnd+0]["TabIndex"]
		TabHwnd  := HwndList[focused_controlHwnd+0]["TabHwnd"]

		GuiControl, Choose, %TabHwnd%, |%TabIndex%
		
		For i, hwnd in HwndList["HTab"][TabHwnd]
			GuiControl, % (i = TabIndex) ? "Disable" : "Enable", %hwnd%
	Return
}
Screenshot
Image

Edit: Added support for default page.

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 18:22
by PuzzledGreatly
Thanks for the code. Where should I put Class_ImageButton.ahk? I put it in the same folder as my script and added SetWorkingDir %A_ScriptDir% on line 3 of the example but got this error message:
---------------------------
test.ahk
---------------------------
Error at line 4.

Line Text: #Include <Class_ImageButton>
Error: Function library not found.

The program will exit.
---------------------------
OK
---------------------------

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 21:35
by tmplinshi
Change to #Include Class_ImageButton.ahk will work for you.

I suggest put the function/class scripts to the Lib folder, because after then, you can call the functions from any scripts in any location, without copying to the script folder. #include <Class_ImageButton> means include Class_ImageButton.ahk from Lib folder. More details about #Include.

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 21:40
by PuzzledGreatly
I've never ever used the Library Folder. I got this message with your suggested changed:
---------------------------
test.ahk
---------------------------
Error at line 4.

#Include file "Class_ImageButton.ahk" cannot be opened.

The program will exit.
---------------------------
OK
---------------------------

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 21:44
by tmplinshi
Are you sure "Class_ImageButton.ahk" is in your script (test.ahk) folder?

#Include Class_ImageButton.ahk ; If Class_ImageButton.ahk is in the script folder
#Include <Class_ImageButton> ; If Class_ImageButton.ahk is in the Lib\ folder

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 22:40
by PuzzledGreatly
tmplinshi wrote:Are you sure "Class_ImageButton.ahk" is in your script (test.ahk) folder?

#Include Class_ImageButton.ahk ; If Class_ImageButton.ahk is in the script folder
Yes, I'm sure.

Re: AHK Gui tab styling

Posted: 13 Jul 2014, 23:54
by tmplinshi
I guess this is because of your AutoHotkey.exe startup directory is not same as the script directory.
Try #Include Your_Script_Folder_Path\Class_ImageButton.ahk (e.g. #Include D:\scripts\Class_ImageButton.ahk)

=========================================================

Or try this one (It must work...)
test.ahk wrote:#Include <Class_ImageButton>

; If the script file path is D:\scripts\test.ahk,
; then put Class_ImageButton.ahk to D:\scripts\Lib\Class_ImageButton.ahk

Re: AHK Gui tab styling

Posted: 14 Jul 2014, 01:30
by PuzzledGreatly
Thanks, using the folder's full path worked. Why is that necessary? I don't need to do it with my own includes.

Re: AHK Gui tab styling

Posted: 14 Jul 2014, 01:39
by jNizM
another example with custom tabs

Image

Re: AHK Gui tab styling

Posted: 14 Jul 2014, 03:00
by tmplinshi
@PuzzledGreatly Don't know. But you can check out MsgBox, % A_WorkingDir

@jNizM Nice!

Re: AHK Gui tab styling

Posted: 19 May 2017, 13:55
by Klark92
@jNizM yes I didnt see the code ^^

Re: AHK Gui tab styling

Posted: 06 Jul 2019, 11:44
by WilburBr
tmplinshi wrote: In fact, if you add a Tab control with w0 h0 options, then you can use any control as the Tab buttons. An example:

Code: Select all

#NoEnv
SetBatchLines -1
#Include <Class_ImageButton> ; http ahkscript.org /boards/viewtopic.php?f=6&t=1103  Broken Link for safety

Gui, Color, White
Gui, Margin, 50, 50
Gui, Font, s16

AddImageTab("", "page1|page2|page3|page4")
	Gui, Tab, 1, 1
		Gui, Add, Text, xm Section Border w296 h200 0x201, page1
	Gui, Tab, 2
		Gui, Add, Button, xp w200, page2
	Gui, Tab, 3
		Gui, Add, Edit, xp w200 h200, page3
	Gui, Tab, 4
		Gui, Add, Radio, xp w200 h200, page4
	Gui, Tab

AddImageTab("xm y+0", "page1|page2|page3|page4", 1)
	Gui, Add, Text, x+10 yp-116 w210 h155 Border, 
	Loop, 4
	{
		Gui, Tab, %A_Index%
		Gui, Add, Text, xp+2 yp+2 wp-4 hp-4 0x201 cBlue, % "Page " A_Index
	}
Gui, Show
Return

GuiClose:
ExitApp

AddImageTab(Options, Pages, Vertical = False) {
	static HwndList := {}

	Opt1 := [3, 0xEEF1F4, 0xE4E9EF, "Black", 0,, 0xA5AFBF, 1]
	Opt2 := [3, 0xCDD6DF, 0xCDD6DF, "Black", 0,, 0xA5AFBF, 1]
	Opt3 := [3, 0xBEC7D6, 0xBEC7D6, "Black", 0,, 0xA5AFBF, 1]
	Opt4 := [3, 0xBEC7D6, 0xBEC7D6, "Black", 0,, 0xA5AFBF, 1]

	Gui, Add, Tab2, w0 h0 AltSubmit HwndHTab, % Pages ; Add an invisible Tab control
	Gui, Tab

	Loop, Parse, Pages, |
	{
		_Options := (A_Index = 1) ? Options " Disabled xp" : (Vertical ? "y+0" : "x+0")
		Gui, Add, Button, %_Options% HwndHBT g___AddImageTab_ChangeTab, % A_LoopField
			ImageButton.Create(HBT, Opt1, Opt2, Opt3, Opt4)

		HwndList[HBT]                   := {TabIndex: A_Index, TabHwnd: HTab}
		HwndList["HTab", HTab, A_Index] := HBT
	}

	Return

	___AddImageTab_ChangeTab:
		GuiControlGet, focused_control, Focus
		GuiControlGet, focused_controlHwnd, Hwnd, %focused_control%
		TabIndex := HwndList[focused_controlHwnd+0]["TabIndex"]
		TabHwnd  := HwndList[focused_controlHwnd+0]["TabHwnd"]

		GuiControl, Choose, %TabHwnd%, |%TabIndex%
		
		For i, hwnd in HwndList["HTab"][TabHwnd]
			GuiControl, % (i = TabIndex) ? "Disable" : "Enable", %hwnd%
	Return
}
Screenshot
Image Broken Link for safety
Thanks :dance: It was exactly what I was looking for.

Is there any way to set the tab "page 2" as default? I tried to put two "||" but only creates a new empty tab button .

thank you

Re: AHK Gui tab styling

Posted: 06 Jul 2019, 13:44
by tmplinshi
@WilburBr Added. I've updated the code in the previous reply.

Re: AHK Gui tab styling

Posted: 07 Jul 2019, 12:43
by WilburBr
tmplinshi wrote: @WilburBr Added. I've updated the code in the previous reply.

Thank you very much, tmplinshi.
:D :D