Layering controls on top of each other

[Thumper]

First, I'm working Windows only if this matters.

Where I am is that I've got one scrollAreaGadget for each of five tabs. Clicking on a tab hides all but the selected scrollAreaGadget. Okay, so far so good. Controls inside each scrollAreaGadget work fine, including clickable canvas controls that I'm using as custom owner drawn controls.

My goal is to give the scrollAreaGadget the appearance rounded corners.

What I've done is put a canvasGadget down first and the scrollAreaGadgets just inside dimensionally. I can easily draw the canvas using a roundBox in the same background color of the scrollAreaGadget. Looks great, except..... none of the controls are clickable.

I've tried moving the canvasGadget below the scroll area but that covers up the scrollAreaGadget. I tried clicking where the controls would be and guess what.... they work, even though I cannot see them.

As a detour attempt, I just tried drawing on the window itself (which PureBasic makes very easy!) but that seems to complicate things with the controls, but I not spent a great deal of time diagnosing the flashing and when to redraw besides at #pb_event_repaint.

Okay, back to a canvasGadget under a scrollAreaGadget. I'm just curious if there is a trick to making this work?

Thanks in advance!

[breeze4me]

My goal is to give the scrollAreaGadget the appearance rounded corners.

Something like this?

Code: Select all

If OpenWindow(0, 0, 0, 405, 240, "ScrollAreaGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ContainerGadget(10, 10, 10, 390, 220)
    ScrollAreaGadget(0, 0, 0, 390,220, 575, 555, 30, #PB_ScrollArea_BorderLess)
      ButtonGadget  (1, 10, 10, 230, 30,"Button 1")
      ButtonGadget  (2, 50, 50, 230, 30,"Button 2")
      ButtonGadget  (3, 90, 90, 230, 30,"Button 3")
      TextGadget    (4,130,130, 230, 20,"This is the content of a ScrollAreaGadget!",#PB_Text_Right)
    CloseGadgetList()
  CloseGadgetList()
  
  SetWindowColor(0, #Blue)
  ;SetWindowColor(0, #Green)
  SetGadgetColor(10, #PB_Gadget_BackColor, #Blue)
  
  hRgn = CreateRoundRectRgn_(0, 0, DesktopScaledX(GadgetWidth(0)), DesktopScaledY(GadgetHeight(0)), 16, 16)
  SetWindowRgn_(GadgetID(0), hRgn, 1)
  
  Repeat
    Select WaitWindowEvent()
      Case  #PB_Event_CloseWindow
        End
      Case  #PB_Event_Gadget
        Select EventGadget()
          Case 0
            
          Case 1
            MessageRequester("Info","Button 1 was pressed!",#PB_MessageRequester_Ok)
          Case 2
            MessageRequester("Info","Button 2 was pressed!",#PB_MessageRequester_Ok)
          Case 3
            MessageRequester("Info","Button 3 was pressed!",#PB_MessageRequester_Ok)
        EndSelect
    EndSelect
  ForEver
EndIf

[RASHAD]

Hi
ImageGadget under ScrollArea

Code: Select all

dpix.d = DesktopResolutionX()
dpiy.d = DesktopResolutionY()

Procedure RoundRectangle(hDC, x, y, w, h, roundedWidth, roundedHeight, outlineColor, fillColor)
  pen = CreatePen_(#PS_SOLID, 1, outlineColor)
  brush = CreateSolidBrush_(fillColor)
  SelectObject_(hDC, pen)
  SelectObject_(hDC, brush)
  RoundRect_(hDC, x, y, x + w, y + h, roundedWidth, roundedHeight)
  DeleteObject_(pen)
  DeleteObject_(brush)
EndProcedure

CreateImage(0, 580*dpix,380*dpiy)
hDC = StartDrawing(ImageOutput(0))
	FillArea(0, 0, -1, GetSysColor_(#COLOR_BTNFACE))
	RoundRectangle(hDC, 0, 0, 580*dpix,380*dpiy, 30, 30, -1, $0)
	RoundRectangle(hDC, 5*dpix, 5*dpiy, 570*dpix,370*dpiy, 20, 20, -1, $FFFFFF)
StopDrawing()

OpenWindow(0, 10, 10, 600, 400, "Round Corners ScrollArea", #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
ImageGadget(10, 10, 10, 580*dpix,380*dpiy, ImageID(0))
DisableGadget(10,1)

ScrollAreaGadget(0, 17,17, 565,365, 575, 575, 30, #PB_ScrollArea_BorderLess)
  ButtonGadget  (1, 10, 10, 230, 30,"Button 1")
  ButtonGadget  (2, 50, 50, 230, 30,"Button 2")
  ButtonGadget  (3, 90, 90, 230, 30,"Button 3")
  TextGadget    (4,130,130, 230, 20,"This is the content of a ScrollAreaGadget!",#PB_Text_Right)
CloseGadgetList()
Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

End

[Marc56us]

Hi,

Okay, back to a canvasGadget under a scrollAreaGadget. I'm just curious if there is a trick to making this work?

Using nested gadgets is not easy. You need to manage levels of insert or Click using functions: OpenGadgetList(), UseGadgetList() and CloseGadgetList().

PS.
I've been at it for days, because in the calendar section of my latest application I also have image gadgets on scrollareas, all with 2 splitters. (I usually use FD, which does this very well (with the right button), but this is more complicated.

Finally, sometimes you have to draw the interface before on paper and name the zones.

[Thumper]

I wasn't having a problem with drawing it. It was just the control under another (the canvas under the scroll area) was getting the events, not the controls on/within the scroll area. If I eliminated the canvas in the background, everything worked.

RASHAD provided the ultimate clue: Why didn't I think to just disable the background canvas? I guess I was thinking since it was covered up that it wouldn't receive events.

That perplexing problem is seems solved and hopefully holds as I add more controls to the scroll area "tabs". Thanks for the nudges!

Oh, and if you are curious, here is a screen shot clip of the program. Please note it is intended to run on a 55"+ display at 4k so the UI sizes might look a bit odd in this snippet but they are suitable for how they will be used, user viewing distance, etc, and subject to further adjustment to my generateZones, autoSize and autoFontSize routines. If I could get 64-bit GDI+ working, I might be able to improve the appearance a bit further.



Now to figure out how to region clipped windows resizable... I found a post that looks helpful at https://www.purebasic.fr/english/viewtopic.php?t=84343. I can see how that should work so I just need to try it.

Again, thanks for the nudges! Back to it... this is my first 'large' PureBasic program and I need to have presentable by the end of the month. Gulp!