Folder on gradient filled dialog

[PeterHarmes]

Hi,

I've created a dialog from resource that i've filled with a gradient color and inserted a folder in the dialog. The trouble I have is that there is a grey box around the folder tabs - i would like the area to the right of the tabs to be the same colour as the background of the dialog. Is there a way of making it transparent for the grey area?

Regards,

Pete

[ukoenig]

My same Question in another post :

viewtopic.php?f=3&t=14029&p=72118&hilit=folder+transparent#p72118

Best Regards
Uwe

[PeterHarmes]

Uwe,

Did you manage to get this to work as I tried the suggested fix but didnt notice any difference

Regards,

Pete

[ukoenig]

Peter,

no Solution for the moment.

To give it a better look, I added spaces to the Tab-titles until I reached Dialog-Width.
( only possible, if You define many Tabs or long Titles )



There was another question in the Forum, for better looking Tabs.
I have shown a Solution to use Tabs instead of Folder.

viewtopic.php?f=3&t=14029&p=79861&hilit=tabs#p79861

Best Regards
Uwe

[PeterHarmes]

Thanks Uwe,

I've padded out the titles and it looks better than the grey box now - it would look a lot better if it was transparent though. I suppose we need to ask Antonio?

Best Regards,

Pete

[ukoenig]

Peter,

working on a Update for the Bartools ( added Folder )
I found a working solution in a different Tool.
Because of all the tools, I lost a bit the overview, what I have done allready.
I will put the solution inside this post.
It is easy for me now, to create any new Tool, because each Tool includes
some special solutions for a problem. I just need to select, what I need.

Code: Select all  Expand view

DEFINE DIALOG oDlg10 RESOURCE "SETUP0" FONT oDlgFont;
TITLE "Button-Setup" TRANSPARENT


REDEFINE FOLDER oFld ID 100 OF oDlg10 UPDATE ;
PROMPTS "  &Windows  and  Dialog   ", "   &Buttonbar  " ;
DIALOGS "Page1", "Page2"  FONT oFoldFont

FOLDER_1()  // Window / Dialog
FOLDER_2()  // Buttonbar

// Any existing small BMP
// -----------------------------
REDEFINE  BITMAP oBmp ID 500 RESOURCE "WHITE" OF oDlg10 ;
PIXEL   ADJUST   NOBORDER
oBMP:cTooltip := "Please select a Button"

// Windows- Dialog-Title Height = 30
// ------- CREATE A DIALOG-TITLE ----------------

oBMP:bPainted := { |hDC| ;
DRAW_TITLE( oDlg10, ;
  oBMP, ;       // BMP
  hDC, ;            // hDC
 .T., ;         // Horiz. or Vert.
 14853684, ;        // 1. Grad-Color
 16314573, ;        // 2. Grad-Color
 0.50, ;            // Color-Pos.
 30, ;          // Text-Pos from left ( 0 = centered )
 oTitleFont, ;      // Font
 128, ;         // Font-Color
 "Change all Values for Button-Display and Window-Background", ;    // Text, ;
 1, ;               // Box-Pen
 128 ) }                // Line-Color Blue = 8388608

 
// Click on Title
// -----------------
oBMP:bLDblClick := { | nRow, nCol, nFlags | ;
                                    MsgInfo( "DblClick on the Title" ) }

ACTIVATE DIALOG oDlg10 CENTERED NOWAIT ;
ON INIT ( oDlg10:Move( 100, 20, oDlg10:nWidth, oDlg10:nHeight, .f. ), ;
   SetImages() ) ;
ON PAINT( SETUP_GRAD( hDC, oDlg10 ), ;
   GradBrush( oDlg10, { { 0.5, 16445897, 15650662 },;
   { 0.5, 15650662, 16445897 } }, 1 ), ;
   SetFoldGrad( oFld ) )

RETURN( NIL )

// -------------- SETUP - GRADIENT --------------------

STATIC FUNCTION SETUP_GRAD( hDC, oDlg )
local aGrad := { { 0.5, 16445897, 15650662 }, ;  
                          { 0.5, 15650662, 16445897 } }    

GradientFill( hDC,  0, 0, oDlg:nHeight, oDlg:nWidth, aGrad, .T. )

RELEASEDC( hDC )

RETURN NIL

// ---------- FOLDER GRADIENT different to DIALOG ----------------------

STATIC FUNCTION SetFoldGrad( oFld )

local n, oDlg
   
for n = 1 to Len( oFld:aDialogs )
      oDlg = oFld:aDialogs[ n ]    
      oDlg:bPainted = { | hDC | GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, { { 0.50, 12609872, 16045947 } }, .T. ) }
next    

RETURN NIL    

//----------------------------------------------------------------------------//

function SetImages()
local oImageList
   
DEFINE IMAGELIST oImageList SIZE 16, 16
   
oImageList:AddMasked( TBitmap():Define( "image1",,   oDlg1 ), nRGB( 192, 192, 192 ) )    
oImageList:AddMasked( TBitmap():Define( "open1",,     oDlg1 ), nRGB( 192, 192, 192 ) )    

oFld:SetImageList( oImageList )
   
return nil  

// -------------------------------

FUNCTION GradBrush( oDlg, aColors , nDir)
local hDC, hBmp, hBmpOld , nWidth , nHeight, lDir

DEFAULT lDir := .T.
IF nDir = 1
   lDir := .T.
ELSE
   lDir := .F.
ENDIF

if Empty( oDlg:oBrush:hBitmap )
      nHeight := if(lDir,oDlg:nHeight,1)
      nWidth  := if(lDir,1,oDlg:nWidth)
      hDC = CreateCompatibleDC( oDlg:GetDC() )
      hBmp = CreateCompatibleBitMap( oDlg:hDC, nWidth, nHeight )
      hBmpOld = SelectObject( hDC, hBmp )
      GradientFill( hDC, 0, 0, nHeight, nWidth, aColors,lDir )
      DeleteObject( oDlg:oBrush:hBrush )
      oDlg:oBrush:hBitmap = hBmp
      oDlg:oBrush:hBrush = CreatePatternBrush( hBmp )
      SelectObject( hDC, hBmpOld )
      oDlg:ReleaseDC()
endif

RETURN NIL

//------------- DIALOG - Title -----------

FUNCTION DRAW_TITLE( oDlg, oBitmap, hDC, lDirect,nVColor, ;
   nBColor, nMove, nLeft, oFont, nTColor, cTitle, nPen, nPColor )
LOCAL aGrad := { { nMove, nVColor, nBColor }, { nMove, nBColor, nVColor } }
LOCAL aRect := GETCLIENTRECT( oBitmap:hWnd )
LOCAL oNewBrush, oBtn1

DEFINE BRUSH oNewBrush ;
COLOR GradientFill( hDC,  0, 0, aRect[3], aRect[4], aGrad, lDirect )
hOldFont := SelectObject( hDC, oFont:hFont )
nTXTLG :=  GettextWidth( hDC, cTitle )
nBMPLONG  := oDlg:nWidth()
nBMPHIGHT := oBitmap:Super:nHeight()
nFONTHIGHT := oFont:nInpHeight * -1
IF nLEFT = 0
   nLEFT := (nBMPLONG - nTXTLG) / 2  
ENDIF
nNEWHIGHT := nFONTHIGHT
nTOP := (nBMPHIGHT - nNEWHIGHT) / 2
SetTextColor( hDC,nTColor)
SetBkMode( oBitmap:hDC, 0 )
TextOut( hDC, nTOP, nLEFT, cTitle )
*oBitmap:ReleaseDC()
RELEASE BRUSH oNewbrush

RETURN NIL
 

Best Regards
Uwe

[ukoenig]

Please have a look at the example once again.

Function :

SetFoldGrad( oFld )

is added to have different Gradients in Dialog and Folder.



Best Regards
Uwe

[ukoenig]

Peter,

the solution ( transparent Tab-area ) works, as long the Folder is placed on top of the Dialog.
The problem starts, to place a folder in the middle of the Dialog.
The Folder-Tab-Replacement with the function uses allways the Start-Gradient-Color from Dialog Top.
I used Colorpicker to get the Dialog-Gradient-Color from Folder-Top and replaced the Value.

ACTIVATE DIALOG oDlg Nowait ;
ON PAINT( GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, ;
{ { 0.5, 8388608, 16777215 },;
{ 0.5, 16777215, 8388608 } }, .T. ), ;
GradBrush( oDlg, { { 0.5, RGB( 66, 66, 161 ), 16777215 }, ;
{ 0.5, 16777215, RGB( 66, 66, 161 ) } }, .T. ), ;
SetFoldGrad( oFolder ) )



Using Colorpicker, to get the Gradient-RGB-Value from Dialog Folder-Top.


With the adjusted Color-Value, it looks much better :


Best Regards
Uwe

[PeterHarmes]

That looks really good, the trouble is that i intend to give my customers the ability to change the colours (they will only moan if they can't change them ), so the padding out of the tab will do until Antonio makes the change (hint hint )

Thanks for your help Uwe

Best regards,

Pete

[RAMESHBABU]

Hello Mr.Pete/Uwe

The following pictures are generated using the following code with out BRUSH oBrush clause and with BRUSH oBrush Clauses.



The following code is working fine for me.

Code: Select all  Expand view

DEFINE BRUSH oBrush
DEFINE ICON  oIcon RESOURCE "YourIcon"

DEFINE DIALOG oDlg NAME "MANUFACTURE" TRANSPARENT               ;
       ICON oIcon BRUSH oBrush

REDEFINE FOLDER oFolder ID 102 OF oDlg                                         ;
       PROMPTS "&Client","&Product", "&Settings"                              ;
       DIALOGS "Client", "Product", "Settings"                                  

...
...
...

ACTIVATE DIALOG oDlg CENTER                                                       ;
                     ON PAINT gradient(oDlg:hDc,{0,0,oDlg:nHeight,          ;
                                    oDlg:nWidth},                                             ;
                                    nRgb(253,242,217),                                    ;
                                    nRgb(245,204,107),.T.)
RETURN nil

 

The trick is that, you have to define a Empty Brush and don't use it anywhere in the dialog.

I hope this will serve your purpose.

- Ramesh Babu P
FWH 8.09, xHarbour 1.1.0 (Simplex), BCC 5.5, BRW

[PeterHarmes]

Hi Ramesh,

It didn't work for me i'm afraid, could you send me the control from your rc for the folder so i can compare it to mine?

Regards,

Pete

p.s. Nice colours, i've copied the settings to be included in one of my default values for my app

[ukoenig]

Hello Ramesh, Peter

The solution is tested and works fine



Tested with some changes in sample : testfld6.prg

Code: Select all  Expand view

Function main1()
LOCAL omdi1,oDlg, oFolder, oBrush

DEFINE WINDOW omdi1 MDICHILD OF oMainWnd ;
COLOR "N/W"

DEFINE BRUSH oBrush

//Define dialogo
DEFINE DIALOG oDlg NAME "DLGTEST" TRANSPARENT BRUSH oBrush ;
        TITLE "Another folder test" of omdi1

//Redefine controles del dialogo
REDEFINE FOLDER oFolder              ;
        ID 102                           ;
        OF oDlg                          ;
        PROMPTS "Page &1","Page &2","Page &3","Page &4" ,"Page &5" ;
        DIALOGS "DlgPage1", "DlgPage2","DlgPage3", "DlgPage4","DlgPage5"
..
..
//Activar dialogo
ACTIVATE DIALOG oDlg Nowait ;
ON PAINT( GradientFill( hDC,  0, 0, oDlg:nHeight, oDlg:nWidth, ;
                                        { { 0.2, 8388608, 16777215  },;
                                          { 0.2, 16777215, 8388608 } }, .T. ), ;
           SetFoldGrad( oFolder ) )

ACTIVATE Window omdi1;
     valid (odlg:end())

RETURN nil

// --------------------------------

STATIC FUNCTION SetFoldGrad( oFolder )

local n, oDlg
   
for n = 1 to Len( oFolder:aDialogs )
      oDlg = oFolder:aDialogs[ n ]    
      oDlg:bPainted = { | hDC | GradientFill( hDC, 0, 0, oDlg:nHeight, oDlg:nWidth, { { 0.2, 128, 16777215 } }, .T. ) }
next    

RETURN NIL    
 

Thank You

Best Regards
Uwe

[PeterHarmes]

Uwe,

Can you send me you control for the folder from your rc?

Regards,

Pete

[ukoenig]

Peter,

the original testfld6.rc is used, only in page 1, I addes radios and checkboxes.

Code: Select all  Expand view

DLGPAGE1 DIALOG 6, 15, 304, 192
STYLE 0x4L | WS_CHILD | WS_VISIBLE
FONT 8, "MS Sans Serif"
{
 LTEXT "Nombre de cliente:", -1, 5, 7, 65, 8
 EDITTEXT 101, 72, 4, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 LTEXT "Direccion actual:", -1, 10, 25, 56, 8
 EDITTEXT 102, 72, 25, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 LTEXT "Teléfono:", -1, 34, 46, 35, 8
 EDITTEXT 103, 72, 46, 52, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 EDITTEXT 105, 72, 63, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 EDITTEXT 106, 72, 84, 150, 13, ES_LEFT | ES_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_TABSTOP
 EDITTEXT 107, 72, 105, 52, 13, ES_AUTOHSCROLL | WS_BORDER | WS_TABSTOP
 LTEXT "Dummy1", -1, 32, 66, 35, 8
 LTEXT "Dummy2", -1, 31, 87, 35, 8
 LTEXT "Dummy3", -1, 31, 107, 35, 8
 CONTROL " Radio 1", 201, "BUTTON", BS_AUTORADIOBUTTON, 73, 134, 60, 12
 CONTROL " Radio 2", 202, "BUTTON", BS_AUTORADIOBUTTON, 73, 150, 60, 12
 CHECKBOX " Checkbox 1", 301, 136, 134, 60, 12, BS_AUTOCHECKBOX | WS_TABSTOP
 CHECKBOX " Checkbox 2", 302, 136, 150, 60, 12, BS_AUTOCHECKBOX | WS_TABSTOP
}
 

Best Regards
Uwe

[PeterHarmes]

Still can't get it to work

My control is using:

CONTROL "SysTabControl32", 6100, "SysTabControl32", 0 | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 6, 6, 423, 299

I was told ages ago to change to SysTabControl32

I notice that testfld6.rc uses

CONTROL FOLDER32, 6100, FOLDER32, 0 | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 6, 6, 423, 299

if i use the above my app doesn't compile, due to me not including winapi.ch in the .rc - if i add it, i get errors, if i add just the FOLDER32 section from winapi, it compiles but no tabs are being displayed.

Any help would be appreciated (just don't say "give up" )

Regards,

Pete