[Solved] GuiControl Move shows white border on resized Progress bars?

[Exaskryz]

Edit: slur has a solution to hiding any white borders that appear by applying (or, repealing) an ExStyle of value -0x20000.

Code: Select all

SetWinDelay, 1
OnMessage("0x0201","Slide")
Gui, Color, 0x000000, 0xFF0092
Gui, Default
Gui, Font, s10 w600 c0x000000, Verdana
GuiAddColorfulText("Bingo","Hibernate","0xFFFFFF")
GuiAddColorfulText("Bingo","For","0xFF0000")
GuiAddColorfulText("Bingo","Demonstration", "0xFF9595")
GuiAddColorfulText("Bingo","Purposes", "0x9595FF")
Gui, Add, Picture, x250 ys gBingo, C:\Users\Exaskryz\Google Drive\Notepads\Notepad.png
Gui, Font, s25 w100 c0x000000, Arial
Gui, Add, Text, x371 y0 gRestore, ►
Gui, Add, Progress, xp-5 yp-5 wp+10 hp+10 c0x555555 background0x000000,100
Gui, Add, Text, xp+5 yp+5 wp-10 hp-10 +BackgroundTrans, ►
Gui, -Caption -Border +AlwaysOnTop +ToolWindow
GoSub, niceify
Gui, Show, % "x" A_ScreenWidth-1 "y0 w491 h" A_ScreenHeight, Slide Pane ; h1052
return

niceify:
longest:=0, texts:=0 ; reset for the loops
Loop ; reposition all my colorfultexts
{
GuiControlGet, pos, pos, % "msctls_progress" 320+A_Index
If (ErrorLevel || posx>50)
	Break
If (longest<posw)
   longest:=posw
texts++
}
Loop, %texts%
{
GuiControl, Move, % "msctls_progress" 320+A_Index, % "w" longest ; expression syntax for consistency
GuiControl, Move, % "Static" 2*A_Index-1, % "w" longest-6 ; the hidden one with the gLabel
GuiControl, Move, % "Static" 2*A_Index, % "w" longest-6 ; the visible one
GuiControl, +Center, % "Static" 2*A_Index ; centers the text
}
return

Bingo:
MsgBox
GoSub, Restore
return

GuiAddColorfulText(textgLabel,textName,bgcolor){
global
Gui, Add, Text, g%textgLabel%,%textName%
Gui, Add, Progress, xp-3 yp-1 wp+6 hp+2 c%bgcolor% background0x000000,100
Gui, Add, Text,  xp+3 yp+1 wp-6 hp-2 +BackgroundTrans, %textName%
return
}

Slide(){
OnMessage("0x0201","Null")
Loop, 41
{
WinGetPos, x,y,,,Slide Pane
WinMove, Slide Pane,, % x-10, y
}
return
}

Null(){
global count
count++
If count>1
{
count:=0
GoSub, Restore
}
return
}

Restore:
WinMove, Slide Pane,, % A_ScreenWidth-1, 0
OnMessage("0x0201","Slide")
return

I wanted to try my hand at crafting a rather simple, but still aesthetically decent GUI that slides out from the edge of my screen when I click on it. My problem is in the niceify subroutine. Try commenting out the GoSub to see exactly what I mean. The purpose of the niceify subroutine is to make all of the pseudo-buttons on the left side the same size -- the same as whatever pseudo-button has the longest text. The problem comes when all of the pseudo-buttons, except the one that was initially the longest, get white border around. Far as I have figured out, but I might be wrong, that was set by the background color of the progress bar. And my testing seems to be true, as I can use in the niceify subroutine in the final loop a GuiControl, +background0xFF00FF, % "msctls_progress" 320+A_Index to give all of the progress bars a magenta border - including the initially longest progress bar. But the other three in this script still have the white border, in addition to a slightly more inner magenta border.

Any ideas on how to resolve?

[KuroiLight]

I tried the script but I'm not quite sure what it's supposed to do, its getting stuck on my right monitor (monitor 2), I don't see the issue your talking about.

[Exaskryz]

I'm on single monitor so didn't even consider its behavior on a second monitor, but ultimately it is rendering the same. Look closely at the pseudo-buttons on the top left of the GUI. Then look very closely at the Demonstration pseudo-button. There's no white border around Demonstration - this is what I desire all the pseudo-buttons to look like. Somewhere in the niceify subroutine, the white borders are added to the three other pseudo-buttons, because if you omit that in execution (comment out line 16) then the white border isn't present on any of them (and they aren't at the same widths.)

[KuroiLight]

This is some sort of rendering bug do to the length of the text, if you set all the buttons to have strings the same length as "Demonstration" they all do that, try making the buttons text longer or the buttons themselves smaller.

Edit: this is probably due to the button text just being a label over layed on top of the button with the same background-color value, by making the label as big as the button, the buttons bevel gets covered and all you see is the labels background color, hope this helps.

[Exaskryz]

Edit: In response to your edit, that might be what's going on, but that leaves the tricky part of figuring out exactly how to hide the white border on progress bars of constant length but texts that are shorter than it. I'll keep playing around with the equations to see what I can come up with.

Hmm, I've been playing around and have indeed found change. I got the white border on the Demonstration box with the below code. But I can't figure out how to remove that border. I did end up changing a bit in the GuiAddColorfulText() function so I could see about sliding the text left and right as I extended the length of the progress bar, but I am not sure if that has any visual impact.

Code: Select all

OnMessage("0x0201","Slide")
SetWinDelay, 1
Gui, Color, 0x000000, 0xFF0092
Gui, Default
Gui, Font, s10 w600 c0x000000, Verdana
GuiAddColorfulText("Bingo","Hibernate","0xFFFFFF")
GuiAddColorfulText("Bingo","For","0xFF0000")
GuiAddColorfulText("Bingo","Demonstration", "0xFF9595")
GuiAddColorfulText("Bingo","Purposes", "0x9595FF")
Gui, Add, Picture, x250 ys gBingo, C:\Users\Exaskryz\Google Drive\Notepads\Notepad.png
Gui, Font, s25 w100 c0x000000, Arial
Gui, Add, Text, x371 y0 gRestore, ►
Gui, Add, Progress, xp-5 yp-5 wp+10 hp+10 c0x555555 background0x000000,100
Gui, Add, Text, xp+5 yp+5 wp-10 hp-10 +BackgroundTrans, ►
Gui, -Caption -Border +AlwaysOnTop +ToolWindow
GoSub, niceify
Gui, Show, % "x" A_ScreenWidth-1 "y0 w491 h" A_ScreenHeight, Slide Pane ; h1052
return

niceify:
longest:=0, texts:=0 ; reset for the loops
Loop ; reposition all my colorfultexts
{
GuiControlGet, pos, pos, % "msctls_progress" 320+A_Index
If (ErrorLevel || posx>50)
	Break
If (longest<posw)
	{
	longest:=posw
	leftoffset:=posx
	}
texts++
}
Loop, %texts%
{
GuiControl, Move, % "msctls_progress" 320+A_Index, % "w" longest+8 ; expression syntax for consistency
GuiControl, Move, % "Static" 2*A_Index-1, % "w" longest " x" leftoffset+4 ; the hidden one with the gLabel
GuiControl, Move, % "Static" 2*A_Index, % "w" longest " x" leftoffset+4 ; the visible one
GuiControl, +Center, % "Static" 2*A_Index ; centers the text
}
return

Bingo:
MsgBox
GoSub, Restore
return

GuiAddColorfulText(textgLabel,textName,bgcolor){
global
Gui, Add, Text, g%textgLabel%,%textName%
Gui, Add, Progress, xp yp-1 wp hp+2 c%bgcolor% background0x000000,100
Gui, Add, Text,  xp yp+1 wp hp-2 +BackgroundTrans, %textName%
return
}

Slide(){
OnMessage("0x0201","Null")
Loop, 41
{
WinGetPos, x,y,,,Slide Pane
WinMove, Slide Pane,, % x-10, y
}
return
}

Null(){
global count
count++
If count>1
{
count:=0
GoSub, Restore
}
return
}

Restore:
WinMove, Slide Pane,, % A_ScreenWidth-1, 0
OnMessage("0x0201","Slide")
return

Edit 2:

Ultimately, what I'd like is to have some way to full on make the border match the background color of my GUI, or be able to obscure it.

[KuroiLight]

well I narrowed the cause down to this section

Code: Select all

GuiControl, Move, % "msctls_progress" 320+A_Index, % "w" longest ; expression syntax for consistency
GuiControl, Move, % "Static" 2*A_Index-1, % "w" longest-6 ; the hidden one with the gLabel
GuiControl, Move, % "Static" 2*A_Index, % "w" longest-6 ; the visible one
GuiControl, +Center, % "Static" 2*A_Index ; centers the text

honestly I was having a hard time reading what your code is doing, I'd recommend formatting it a bit, I took the liberty of making it a bit easier for me to read (hope you don't mind):

Code: Select all

OnMessage("0x0201","Slide")
SetWinDelay, 1
Gui, Color, 0x000000, 0xFF0092
Gui, Default
Gui, Font, s10 w600 c0x000000, Verdana
GuiAddColorfulText("Bingo","Hibernate","0xFFFFFF")
GuiAddColorfulText("Bingo","For","0xFF0000")
GuiAddColorfulText("Bingo","Demonstration", "0xFF9595")
GuiAddColorfulText("Bingo","Purposes", "0x9595FF")
Gui, Add, Picture, x250 ys gBingo, C:\Users\Exaskryz\Google Drive\Notepads\Notepad.png
Gui, Font, s25 w100 c0x000000, Arial
Gui, Add, Text, x371 y0 gRestore, ►
Gui, Add, Progress, xp-5 yp-5 wp+10 hp+10 c0x555555 background0x000000,100
Gui, Add, Text, xp+5 yp+5 wp-10 hp-10 +BackgroundTrans, ►
Gui, -Caption -Border +AlwaysOnTop +ToolWindow
GoSub, niceify
Gui, Show, % "x" A_ScreenWidth-1 "y0 w491 h" A_ScreenHeight, Slide Pane ; h1052
return
 
niceify:
	longest:=0, texts:=0 ; reset for the loops
	Loop { ; reposition all my colorfultexts
		GuiControlGet, pos, pos, % "msctls_progress" 320+A_Index
		if(ErrorLevel or posx > 50)
			Break
		if(longest < posw) {
			longest:=posw
			leftoffset:=posx
		}
		texts++
	}
	Loop %texts% {
		GuiControl, Move, % "msctls_progress" 320+A_Index, % "w" longest+8 ; expression syntax for consistency
		GuiControl, Move, % "Static" 2*A_Index-1, % "w" longest " x" leftoffset+4 ; the hidden one with the gLabel
		GuiControl, Move, % "Static" 2*A_Index, % "w" longest " x" leftoffset+4 ; the visible one
		GuiControl, +Center, % "Static" 2*A_Index ; centers the text
	}
return
 
Bingo:
	MsgBox
	GoSub, Restore
return
 
GuiAddColorfulText(textgLabel,textName,bgcolor){
	global
	Gui, Add, Text, g%textgLabel%,%textName%
	Gui, Add, Progress, xp yp-1 wp hp+2 c%bgcolor% background0x000000,100
	Gui, Add, Text,  xp yp+1 wp hp-2 +BackgroundTrans, %textName%
}
 
Slide(){
	OnMessage("0x0201","Null")
	Loop, 41 {
		WinGetPos, x,y,,,Slide Pane
		WinMove, Slide Pane,, % x-10, y
	}
}
 
Null(){
	global count
	count++
	if(count > 1) {
		count:=0
		GoSub, Restore
	}
}
 
Restore:
	WinMove, Slide Pane,, % A_ScreenWidth-1, 0
	OnMessage("0x0201","Slide")
return

[lexikos]

Move does not always redraw the control. Try MoveDraw.

[KuroiLight]

Why not just draw the clickable labels first then show the progress bar after they are clicked, I'm sure there is a ws_style to make the progress-bar border-less if that's what you are after.?

[Exaskryz]

Here's what I've got it down to in my hour or so just playing around with it.

If you don't use the niceify subroutine, everything is "OK" in that it doesn't have any white borders. Yay.

But the problem in niceify is it's intended purpose. See, if you use GuiControl Move - or MoveDraw - and slide the control around by changing the X or Y values, everything is OK still. But as soon as you change the height or width, it decides a white border is mandatory.

(Also, yes KuroiLight, I am very very offended by you indenting my sample code. How dare you!)

Here's a new sample code that is stripped away of some stuff and now introduces hotkeys. Press the arrow keys, nothing odd really happens. The top right control (which should be an arrow if your script is saved as UTF-8 encoding, but no matter the encoding the problem is demonstrated) moves pixel by pixel. But hold Shift, and suddenly, a white border appears.

So something is going on where the border appears when the control is resized; repositioning it is just fine. Now the trick is figuring out if there is any way at all to make the white border go away again.

Code: Select all

SetWinDelay, 1
Gui, Color, 0x000000, 0xFF0092
Gui, Default
Gui, Font, s10 w600 c0x000000, Verdana
GuiAddColorfulText("Bingo","Hibernate","0xFFFFFF")
GuiAddColorfulText("Bingo","For","0xFF0000")
GuiAddColorfulText("Bingo","Demonstration", "0xFF9595")
GuiAddColorfulText("Bingo","Purposes", "0x9595FF")
Gui, Font, s25 w100 c0x000000, Arial
Gui, Add, Text, x371 y0 , ►
Gui, Add, Progress, xp-5 yp-5 wp+10 hp+10 c0x555555 background0x000000,100
Gui, Add, Text, xp+5 yp+5 wp-10 hp-10 +BackgroundTrans, ►
Gui, -Caption -Border +AlwaysOnTop +ToolWindow
Gui, Show, , Slide Pane ; h1052
return

Up::
Down::
Left::
Right::
+Up::
+Down::
+Left::
+Right::
GuiControlGet, pos, pos, msctls_progress325
GuiControl, MoveDraw, msctls_progress325, % (A_ThisHotkey="Up" ? "y" posy-1 : A_ThisHotkey="Down" ? "y" posy+1 : A_ThisHotkey="Left" ? "x" posx-1 : A_ThisHotkey="Right" ? "x" posx+1 : A_ThisHotkey="+Up" ? "h" posh-1 : A_ThisHotkey="+Down" ? "h" posh+1 : A_ThisHotkey="+Left" ? "w" posw-1 : "w" posw+1)
return
 
Bingo:
MsgBox
return
 
GuiAddColorfulText(textgLabel,textName,bgcolor){
	global
	Gui, Add, Text, g%textgLabel%,%textName%
	Gui, Add, Progress, xp-3 yp-1 wp+6 hp+2 c%bgcolor% background0x000000,100
	Gui, Add, Text,  xp+3 yp+1 wp-6 hp-2 +BackgroundTrans, %textName%
	return
}
 

Edit:

Why not just draw the clickable labels first then show the progress bar after they are clicked, I'm sure there is a wm_style to make the progress-bar border-less if that's what you are after.?

The intention for this GUI (the original code) is to be persistent. It'll dock itself to the side of my screen so only a pixel column is visible. The progress bars are there to give the labels color. Without the progress bars, I have black text on black background.

The way my creation goes is that I am actually putting the clickable label first, then drawing the progress bar on top of it, and then putting a secondary visible label (text control with no glabel) on top of that. For some reason, putting a progress bar underneath the glabel text makes the text unclickable, but not true the other way around.

If there is a style I can apply to make it borderless, that would be great to see. I tried GuiControl, -Border, % "msctls_progress" 320+A_Index in the loop within niceify. That didn't seem to do anything.

[KuroiLight]

(Also, yes KuroiLight, I am very very offended by you indenting my sample code. How dare you!)

The intention for this GUI (the original code) is to be persistent. It'll dock itself to the side of my screen so only a pixel column is visible. The progress bars are there to give the labels color. Without the progress bars, I have black text on black background.

The way my creation goes is that I am actually putting the clickable label first, then drawing the progress bar on top of it, and then putting a secondary visible label (text control with no glabel) on top of that. For some reason, putting a progress bar underneath the glabel text makes the text unclickable, but not true the other way around.

I'm still unsure why your doing it this way , You could use buttons, they can have background color, they can be set to a flat (borderless) style, they can have centered text and its only 1 control to deal with instead of 3?

Code: Select all

SetWinDelay, 1
Gui, Color, 0x000000, 0xFF0092
Gui, Default
Gui, Font, s10 w600 c0x000000, Verdana
GuiAddColorfulText("Bingo","Hibernate","0xFFFFFF")
GuiAddColorfulText("Bingo","For","0xFF0000")
GuiAddColorfulText("Bingo","Demonstration", "0xFF9595")
GuiAddColorfulText("Bingo","Purposes", "0x9595FF")
Gui, Font, s25 w100 c0x000000, Arial
Gui, Add, Text, x371 y0 , ►
Gui, Add, Progress, xp-5 yp-5 wp+10 hp+10 c0x555555 background0x000000,100
Gui, Add, Text, xp+5 yp+5 wp-10 hp-10 +BackgroundTrans, ►
Gui, -Caption -Border +AlwaysOnTop +ToolWindow
Gui, Show, , Slide Pane ; h1052
return
 
Up::
Down::
Left::
Right::
+Up::
+Down::
+Left::
+Right::
GuiControlGet, pos, pos, msctls_progress325
GuiControl, MoveDraw, msctls_progress325, % (A_ThisHotkey="Up" ? "y" posy-1 : A_ThisHotkey="Down" ? "y" posy+1 : A_ThisHotkey="Left" ? "x" posx-1 : A_ThisHotkey="Right" ? "x" posx+1 : A_ThisHotkey="+Up" ? "h" posh-1 : A_ThisHotkey="+Down" ? "h" posh+1 : A_ThisHotkey="+Left" ? "w" posw-1 : "w" posw+1)
return
 
Bingo:
MsgBox
return
 
GuiAddColorfulText(textgLabel,textName,bgcolor){
	global
	Gui, Add, Text, g%textgLabel%,%textName%
	Gui, Add, Progress, xp-3 yp-1 wp+6 hp+2 c%bgcolor% background0x000000,100
	Gui, Add, Text,  xp+3 yp+1 wp-6 hp-2 +BackgroundTrans, %textName%
	return
}

I see what you want and I'm pretty sure you can do this with buttons.

[Exaskryz]

Buttons can have background color? I have had no luck in setting that in AHK that I can recall. (I've done it on websites with HTML; so I guess I could go the long-about way and use an ActiveX component.)

Code: Select all

^8::
Gui, Color, 00FF00, 0000FF
Gui, Add, Button, cFF0000, Hello
Gui, Show
return

That doesn't change the button in any way. What trick is there to giving buttons color?

[KuroiLight]

Hmm... apparently I was wrong, the only way to do it is to draw the background yourself. Sorry, I had assumed this was possible because I was able to do this with WinForms, which I had assumed they inherited the property from their win32 variant. :I'm on the same page now.:

[slur]

If there is a style I can apply to make it borderless, that would be great to see. I tried GuiControl, -Border, % "msctls_progress" 320+A_Index in the loop within niceify. That didn't seem to do anything.

Maybe WS_EX_STATICEDGE := 0x20000?

Code: Select all

ControlGet, phwnd, hwnd, , % "msctls_progress" 320+A_Index
WinSet, ExStyle, -0x20000, ahk_id %phwnd%

[Exaskryz]

Ah ha! Thanks slur! That seemed to have done the trick. I added the WinTitle parameter "Slide Pane" and put immediately after the Gui, Show:

Code: Select all

Loop, %texts%
 {
ControlGet, phwnd, hwnd,, % "msctls_progress" 320+A_Index, Slide Pane
WinSet, ExStyle, -0x20000, ahk_id %phwnd%
}
return

And that seemed to work out.

I think I can mark this one as solved. Appreciated.

[hobboy]

Sorry for reopening this thread again, but since it was recent and exactly what I was looking for I wanted to add this on. Do you think this is a bug or intended behaviour? Here's a simple script to replicate the border creation issue.

Code: Select all

Options := "w60 BackgroundBlue"
Gui, Add, Progress, %Options% hwndHPROG1
GuiControl, Move,%HPROG1%, x20

Gui, Add, Progress, %Options% hwndHPROG2
GuiControl, Move,%HPROG2%, x20 w100
;WinSet, ExStyle, -0x20000, ahk_id %HPROG2%

Gui, Show, w150

[lexikos]

My guess is on a Windows bug.

But which behaviour are you talking about? That the control appears to gain a border when it is resized, or that it doesn't have a border until then?

I don't see a "white border" as originally described; I see (on Windows 10) a "three-dimensional border style" just as described in the documentation for the WS_EX_STATICEDGE style. I don't know whether it's intended to have a border or not, but either way (and knowing the GUI code) I don't see how AutoHotkey can be responsible for it. If you apply -E0x20000 in the control's options, the control still starts with that ex style - this is not AutoHotkey's doing, but presumably the control's. You can remove the style after adding the control, before or after using GuiControl Move. Perhaps AutoHotkey should do this automatically if the user doesn't specify +E0x20000.

The effect is much easier to see without the blue background (because all I see is the border of the second control).

[just me]

Some years ago I was wondering why Gui, Add, Progress, .... -E0x20000 doesn't work. I was forced to remove the ex-style after control creation, too.

Now, after looking into script_gui.cpp I believe to understand the reason: This ex-style is simply not set when the control is created. It seems to be added later in ControlSetProgressOptions when the theme is removed. But, unless the control isn't resized, it doesn't seem to have visual effects:

Code: Select all

#NoEnv
Options := "w60 BackgroundBlue"
Gui, Margin, 100, 50
Gui, Color, Gray
Gui, Add, Progress, w60 hwndHPROG -Smooth, 100
Gui, Show, , Test
ControlGet, Styles, Style, , , ahk_id %HPROG%
ControlGet, ExStyles, ExStyle, , , ahk_id %HPROG%
MsgBox, %Styles% - %ExStyles%
DllCall("UxTheme.dll\SetWindowTheme", "Ptr", HPROG, "WStr", "", "WStr", "")
ControlGet, Styles, Style, , , ahk_id %HPROG%
ControlGet, ExStyles, ExStyle, , , ahk_id %HPROG%
MsgBox, %Styles% - %ExStyles%
GuiControl, Move,%HPROG%, x20 w100
Return
GuiClose:
ExitApp

*edit: margins*

So this might be a Windows bug. However, AHK could check the styles/ex-styles after removing the theme and remove/set thoses explicitely specified in Gui, Add, ... again.

[hobboy]

But which behaviour are you talking about? That the control appears to gain a border when it is resized, or that it doesn't have a border until then?

I don't see a "white border" as originally described; I see (on Windows 10) a "three-dimensional border style" just as described in the documentation for the WS_EX_STATICEDGE style...

Ah, I wasn't able to see the pictures when I was testing the problem but it sounded almost exactly the same (although I wouldn't have called it 'white' ). I'm actually talking about what you describe lexikos, the shaded 3d style (Windows 7 for me). My thought about it possibly being a bug is the addition of the border when you resize.

I just thought I was going crazy when I swapped some code around and they looked different.

With border (after resize)

Capture1.PNG (6.21 KiB) Viewed 4764 times

Without border (no resize)

Capture.PNG (6.05 KiB) Viewed 4764 times