Ribbon Theme

[Silvio.Falconi]

How make the background we see up the ribbonbar ?
On Office there are many type of backgound

[Antonio Linares]

With the new user defined captions see the look that we can get:

viewtopic.php?f=3&t=37133&start=0

Code: Select all  Expand view

#include "FiveWin.ch"

#define CLR_MSPURPLE     RGB( 128,  57, 123 )
#define CLR_MSRED        RGB( 232,  17,  35 )
#define CLR_MSGRAY       RGB( 229, 229, 229 )
#define CLR_MSLIGHTGRAY  RGB( 243, 243, 243 )

#define TME_LEAVE    2

#define _nClrPaneRB       CLR_MSPURPLE
#define _nClrBoxOutRB     CLR_MSLIGHTGRAY
#define _nClrBoxInRB      CLR_MSLIGHTGRAY
#define _nClrBoxSelOut    CLR_MSLIGHTGRAY
#define _aGradRB          { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } }
#define _aGradHighRB      { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } }
#define _aGradOverRB      { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } }

function Main()

   local oWnd, nRowPos, nColPos, oBtnClose, oBtnMax, oBtnMin, lDrag := .F.
   local oRb

   DEFINE WINDOW oWnd STYLE WS_POPUP COLOR CLR_BLACK, CLR_MSPURPLE

   oWnd:SetSize( 1000, 500 )
   oWnd:Shadow()
   oWnd:Center()

   oWnd:bLClicked = { | nRow, nCol | If( nRow < 25, ( oWnd:Capture(), nRowPos := nRow, nColPos := nCol, lDrag := .T. ),) }
     
   oWnd:bMMoved = { | nRow, nCol | TrackMouseEvent( oWnd:hWnd, TME_LEAVE ),;
                                   If( lDrag .and. ! IsZoomed( oWnd:hWnd ) .and. IsOverWnd( oWnd:hWnd, nRow, nCol ),;
                                       oWnd:Move( oWnd:nTop + nRow - nRowPos, oWnd:nLeft + nCol - nColPos,,, .T. ),) }  

   oWnd:bLButtonUp = { || ReleaseCapture(), lDrag := .F. }
   oWnd:bMLeave    = { || lDrag := .F. }

   @ 1, oWnd:nWidth - 46 BTNBMP oBtnClose BITMAP "../bitmaps/16x16/closew.bmp" ;
      FLAT NOBORDER NOROUND ACTION oWnd:End() SIZE 45, 29 ;
      COLOR CLR_BLACK, CLR_MSPURPLE

   @ 1, oWnd:nWidth - 92 BTNBMP oBtnMax BITMAP "../bitmaps/16x16/max.bmp" ;
      FLAT NOBORDER NOROUND ACTION If( ! IsZoomed( oWnd:hWnd ), oWnd:Maximize(), oWnd:Restore() ) SIZE 45, 29 ;
      COLOR CLR_BLACK, CLR_MSPURPLE

   @ 1, oWnd:nWidth - 138 BTNBMP oBtnMin BITMAP "../bitmaps/16x16/min.bmp" ;
      FLAT NOBORDER NOROUND ACTION If( ! IsIconic( oWnd:hWnd ), oWnd:Iconize(), oWnd:Restore() ) SIZE 45, 29 ;
      COLOR CLR_BLACK, CLR_MSPURPLE

   oBtnClose:bMMoved = { || oBtnClose:SetColor( CLR_BLACK, If( oBtnClose:lMOver, CLR_MSRED, oWnd:nClrPane ) ) }
   oBtnMax:bMMoved   = { || oBtnMax:SetColor( CLR_BLACK, If( oBtnMax:lMOver, CLR_MSGRAY, oWnd:nClrPane ) ) }
   oBtnMin:bMMoved   = { || oBtnMin:SetColor( CLR_BLACK, If( oBtnMin:lMOver, CLR_MSGRAY, oWnd:nClrPane ) ) }

   oWnd:bResized = { || oBtnClose:Move( 1, oWnd:nWidth - 46 ), oBtnMax:Move( 1, oWnd:nWidth - 92 ),;
                        oBtnMin:Move( 1, oWnd:nWidth - 138 ), oRb:nWidth := oWnd:nWidth }

   oRb = TRibbonBar():New( oWnd,,,,, 120, 40, _nClrPaneRB, _nClrBoxOutRB, _nClrBoxInRB,,;
                           _nClrBoxSelOut, _aGradRB,, _aGradHighRB, _aGradOverRB,,,,,.T.)
   oWnd:oTop = nil
   oRb:nTop = 30
   oRb:nWidth = oWnd:nWidth
   oRb:SetStyles( .F., .T. )
   oRb:nClrPaneRB = CLR_MSPURPLE
   oRb:hSeparation = 4
   oRb:aGradFld = {|nOpt| iif( nOpt == oRb:nStart, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } },;
                                                     { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) }
   oRb:Default()
   AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_BLACK,;
       If( oRb:nOverPrompt( ScreenToClient( oRb:hWnd, GetCursorPos() )[ 1 ],;
           ScreenToClient( oRb:hWnd, GetCursorPos() )[ 2 ] ) == nPrompt, CLR_HRED, CLR_WHITE ) ) } )
   oRb:AddGroup( 185, "First", 1 )
   oRb:AddGroup( 185, "Second", 1 )
   oRb:AddGroup( 185, "Third", 1 )

   ACTIVATE WINDOW oWnd

return nil

[Silvio.Falconi]

when you resize the ribbon is small

[Antonio Linares]

Code: Select all  Expand view

  oWnd:bResized = { || oBtnClose:Move( 1, oWnd:nWidth - 46 ), oBtnMax:Move( 1, oWnd:nWidth - 92 ),;
                        oBtnMin:Move( 1, oWnd:nWidth - 138 ), oRb:nWidth := oWnd:nWidth }

[James Bott]

Here is my latest emulation of Word's style with the Fivewin Ribbonbar. The best image of Word I could find is of the 2016 version. I don't think it is much different than the new 2019 version. These samples are both showing the "Dark" theme.



You can only faintly see the group bars and labels. This is due to the problem that certain "styles" of the FW ribbonbar have certain attributes. There is no way to get one attribute of one style and another attribute of another style. Well, there are some tricks like what Antonio came up with but it does get complicated.

My sample is set to a style that provides the right group style but the wrong tab style. You may notice that the File tab is showing some strange lines that shouldn't be there. This is a sample of the problem. These line artifacts are due to the fact that some styles use two outline lines around each tab, presumably to provide a gradient look. However, the newer MS Office versions do not use these gradients anymore.

The only solution, I think, is to modify the ribbonbar class source (and it's associated classes (groups, etc.). Maybe Antonio can come up with another solution.

Here is the source for the above image. It is a modification of Frances Padilla's code that was previously posted in this forum.

Code: Select all  Expand view

/*
Purpose  : Fivewin Ribbonbar - MS Office 2019 style
Program  :
Author   : Frances Padilla (FAP)
Date     : 05/05/2019 10:30:44 PM
Company  :
Copyright:
Language : Fivewin/xHarbour
Updated  : 05/06/2019 By James Bott, jbott@compuserve.com
Notes    :
Source   : viewtopic.php?f=3&t=36145&p=221601#p221601
         : This is the dark theme
         : Somehow he got rid of the underline under the ribbonbar.

*/

#include "FiveWin.ch"
#include "Ribbon.ch"

//#define _ClrRed RGB(255,37,37)

#define _nClrPaneRB       RGB( 68, 68, 68 )
#define _nClrBoxOutRB     RGB( 178, 178, 178 )
#define _nClrBoxInRB      RGB( 178, 178, 178 )
#define _nClrBoxSelOut    RGB( 178, 178, 178 )  // doesn't show when changed to red
#define _nClrBoxSelIn  := RGB( 178, 178, 178 )
#define _aGradRB          { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } }
#define _aGradFldRB       {|nOpt| iif( nOpt == oRibbon:nStart, { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } },;
                                                                 { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } } ) }
#define _aGradHighRB      { { 1, RGB(178, 178, 178 ), RGB( 178, 178, 178 ) } }
#define _aGradOverRB      { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } }
#define _nCtrlFrGround    RGB( 255, 255, 255 )
#define _nCtrlBkGround    RGB( 106, 106, 106 )
#define _nClrBoxOut       RGB( 160, 160, 160 )
#define _nClrBoxIn        RGB( 160, 160, 160 )
#define _nClrTxt          RGB( 220, 220, 220 ) //RGB( 0, 0, 0 )
#define _bClrGradNormal   {|lPressed| iif( lPressed, { { 1, _nClrBoxOut, _nClrBoxOut } },;
                                                     { { 1, _nClrBoxOut, _nClrBoxOut } } ) }
#define _aClrGradUnder    {|| { { 1, _nClrBoxOut, _nClrBoxOut } } }
#define _aClrGradBack     { { 1, _nClrBoxOut, _nClrBoxOut } }


Function Main()

   local oFont
   local n, oWnd, oRibbon
   local aDlgs

   DEFINE FONT oFont NAME getSysFont() SIZE 0,-12

   DEFINE WINDOW oWnd title "Fivewin Ribbonbar - Office 2109 style"
   
        aDlgs := { ' File ', ' Home ', ' Insert ', ' Design ', ' Layout ', ' References ', ' Mailings ', ' Review ', ' View ' }

        oRibbon := TRibbonBar():New( oWnd, aDlgs,,,, 132, 40, _nClrPaneRB, _nClrBoxOutRB, _nClrBoxInRB,,;
        _nClrBoxSelOut, _aGradRB, _aGradFldRB, _aGradHighRB, _aGradOverRB,,,.t.,,)
                                    // _nClrBoxSelOut, _aGradRB, _aGradFldRB, _aGradHighRB, _aGradOverRB,,,,,.T.)
                                     
        AFill( oRibbon:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_BLACK,;
       If( oRibbon:nOverPrompt( ScreenToClient( oRibbon:hWnd, GetCursorPos() )[ 1 ], ScreenToClient( oRibbon:hWnd, GetCursorPos() )[ 2 ] ) == nPrompt, CLR_BLACK, _nClrTxt ) ) } )
       
        WITH OBJECT oRibbon
            :nHeightFld := 24
            :hSeparation := 4
            :SetFont( oFont )
            :nLeftMargin = 10   // left margin of tabs
             //FOR n := 1 TO Len( :aPrompts )
             //   :aClrTabTxt[ n ] := { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, RGB( 0, 0, 0 ), RGB( 255, 255, 255 ) ) }
             //NEXT
             :CalcPos()
        END
       
         oGroup = oRibbon:AddGroup( 70, "Clipboard", 1 )
         oGroup = oRibbon:AddGroup( 260, "Font", 1 )
         oGroup = oRibbon:AddGroup( 221, "Paragraph", 1 )
         oGroup = oRibbon:addGroup( 320, "Styles", 1)

        oWnd:SetSize( 930, 400 )
        oWnd:setColor(, _nCtrlBkGround)

   ACTIVATE WINDOW oWnd CENTER
 
return nil
 

[Antonio Linares]

James,

With these two added lines, we improve it:

Code: Select all  Expand view

       WITH OBJECT oRibbon
            :nHeightFld := 24
            :hSeparation := 4
            :SetFont( oFont )
            :nLeftMargin = 10  
            :nClrBoxSelOut = _nClrBoxSelOut   // New !
            :l2010 = .T.   // New !
             :CalcPos()
        END

Finally with this little change in ribbon.prg in Method PaintFld() the last artifact goes away:
We change this:
case nType == 1
...
         GradientFill( hDCMem, nRow, nCol + 1, nRow + ::nHeightFld - 1, nCol +  ::aSizes[ nPrompt ], aGradFld )  
into this:
         GradientFill( hDCMem, nRow, nCol, nRow + ::nHeightFld - 1, nCol +  ::aSizes[ nPrompt ], aGradFld )

Fix included in next FWH version

[James Bott]

Antonio,

:nClrBoxSelOut = _nClrBoxSelOut // New !

This works great to eliminate the white outline when a tab is hovered over.

:l2010 = .T. // New !

I don't see any difference with this. What should I be looking for?

The last change (to the source) I presume gets rid of the little black vertical line on the selected tab? Is this change going to affect existing styles? I won't use them but others may be.

Any ideas how can we change the colors of the group separator bars and titles?

[James Bott]

OK, I figured out how to change the colors of the group separator bars and the group caption. Actually, Antonio figured this out in a previous message in this thread.



I still haven't figured out how to remove the underline under the ribbonbar. The vertical black line on the left side of the selected tab is also there, but will disappear with the next FW language update.

Here is the source.

Code: Select all  Expand view

/*
Purpose  : Fivewin Ribbonbar - MS Office 2019 style
Program  :
Author   : Frances Padilla (FAP)
Date     : 05/07/2019 04:52:26 PM
Company  :
Copyright:
Language : Fivewin/xHarbour
Updated  : 05/06/2019 By James Bott, jbott@compuserve.com
Notes    :
Source   : viewtopic.php?f=3&t=36145&p=221601#p221601
         : This is the dark theme
         : Somehow he got rid of the underline under the ribbonbar.

*/

#include "FiveWin.ch"
#include "Ribbon.ch"

//#define _ClrRed RGB(255,37,37)

#define _nClrPaneRB       RGB( 68, 68, 68 )
#define _nClrBoxOutRB     RGB( 178, 178, 178 )
#define _nClrBoxInRB      RGB( 178, 178, 178 )
#define _nClrBoxSelOut    RGB( 178, 178, 178 )  // doesn't show when changed to red
#define _nClrBoxSelIn  := RGB( 178, 178, 178 )
#define _aGradRB          { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } }
#define _aGradFldRB       {|nOpt| iif( nOpt == oRibbon:nStart, { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } },;
                                                                 { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } } ) }
#define _aGradHighRB      { { 1, RGB(178, 178, 178 ), RGB( 178, 178, 178 ) } }
#define _aGradOverRB      { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } }
#define _nCtrlFrGround    RGB( 255, 255, 255 )
#define _nCtrlBkGround    RGB( 106, 106, 106 )
#define _nClrBoxOut       RGB( 160, 160, 160 )
#define _nClrBoxIn        RGB( 160, 160, 160 )
#define _nClrTxt          RGB( 220, 220, 220 ) //RGB( 0, 0, 0 )
#define _bClrGradNormal   {|lPressed| iif( lPressed, { { 1, _nClrBoxOut, _nClrBoxOut } },;
                                                     { { 1, _nClrBoxOut, _nClrBoxOut } } ) }
#define _aClrGradUnder    {|| { { 1, _nClrBoxOut, _nClrBoxOut } } }
#define _aClrGradBack     { { 1, _nClrBoxOut, _nClrBoxOut } }


Function Main()

   local oFont
   local n, oWnd, oRibbon, oGroup
   local aDlgs, oDlg

   DEFINE FONT oFont NAME getSysFont() SIZE 0,-12

   DEFINE WINDOW oWnd title "Fivewin Ribbonbar - Office 2109 style"
   
        aDlgs := { ' File ', ' Home ', ' Insert ', ' Design ', ' Layout ', ' References ', ' Mailings ', ' Review ', ' View ' }

        oRibbon := TRibbonBar():New( oWnd, aDlgs,,,, 135, 40, _nClrPaneRB, _nClrBoxOutRB, _nClrBoxInRB,,;
        _nClrBoxSelOut, _aGradRB, _aGradFldRB, _aGradHighRB, _aGradOverRB,,,.t.,,)
                                    // _nClrBoxSelOut, _aGradRB, _aGradFldRB, _aGradHighRB, _aGradOverRB,,,,,.T.)
       
        // Change the colors of the tabs                            
        AFill( oRibbon:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_BLACK,;
       If( oRibbon:nOverPrompt( ScreenToClient( oRibbon:hWnd, GetCursorPos() )[ 1 ], ScreenToClient( oRibbon:hWnd, GetCursorPos() )[ 2 ] ) == nPrompt, CLR_BLACK, _nClrTxt ) ) } )
       
        WITH OBJECT oRibbon
            :nHeightFld := 24
            :hSeparation := 4
            :SetFont( oFont )
            :nLeftMargin = 10   // left margin of tabs
            :nClrBoxSelOut = _nClrBoxSelOut   // New ! Removes white outline of tab when cursor is over them.
            :l2010 = .T.   // New ! Turns off highlighting of groups when cursor is over them.
            :CalcPos()
        END
       
         oGroup = oRibbon:AddGroup( 70, "Clipboard", 1 )
         oGroup = oRibbon:AddGroup( 260, "Font", 1 )
         oGroup = oRibbon:AddGroup( 221, "Paragraph", 1 )
         oGroup = oRibbon:addGroup( 320, "Styles", 1)
         
         for each oDlg in oRibbon:aDialogs
           
            oDlg:hBack = oRibbon:hBrushEx
            oDlg:Refresh()
           
            for each oGroup in oDlg:aControls
               if oGroup:IsKindOf( "TRBGROUP" )
                  //oGroup:oFont:End()
                  //oGroup:SetFont( oRibbon:oFont )
                 
                 // oGroup:nHeight      = 100
                  oGroup:nClrBoxIn    = CLR_LIGHTGRAY
                  oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } }
                  //oGroup:bClrText     = { | lEnable | If( lEnable, CLR_LIGHTGRAY, CLR_DARKGRAY ) } //CLR_DARKGRAY ) }
                  oGroup:nClrTxt      = RGB(0,0,0)
                  oGroup:nClrBoxIn    = _nClrPaneRB //CLR_LIGHTGRAY
                  oGroup:nClrBoxOut   = _nClrPaneRB //CLR_LIGHTGRAY
                 
                  //oGroup:SetColor( _nClrTxt, _nClrPaneRB )
                 
                  DeleteObject( oGroup:hBrushSel )
                  DeleteObject( oGroup:hBrushUnSel )
                  DeleteObject( oGroup:hBack )
                  oGroup:hBrushUnSel  = oDlg:hBack
                  oGroup:hBack        = oDlg:hBack
                 
                  oGroup:refresh()
               endif
            next
          next        

        oWnd:SetSize( 930, 400 )
        oWnd:setColor(, _nCtrlBkGround)

   ACTIVATE WINDOW oWnd CENTER
 
return nil
 

[Silvio.Falconi]

How insert a image watermark on header as office 2019 ?

[James Bott]

Antonio,

Now I am trying to emulate the Word 2019 window message bar. Here is the best I could do. The top bar is the FW bar overlaid over a image of Word 2019, so the bottom bar is Word.



As pointed out in the image you can see there are two issues.

1) The top outline bar of the message bar is white and I can't find any way to change that. On Word it is black.

2) The little gripper box on the right edge is no longer used in Windows 10 apps. Apparently, it is just a graphic image that can be removed.

Here is a link to a full sized image so you can see an Outlook 2019 message bar full sized. Note that this one is using the black theme and the outline bar is medium gray. So we really do need to able to change the color of the outline.

https://mspoweruser.com/wp-content/uplo ... e-2019.jpg

Here is the code I used to create the FW message bar:

SET MESSAGE TO " Page 1 of 1 0 words English (United Kingdom)" OF oWnd color _nClrTxt, _nClrMsgBar noinset noborder

Note that even though it is using the NOBORDER clause there is a white line between the client area of the window and the messagebar. It could be that the client area has a border and not the message bar.

I expect this will require changes to the FW source code.

Regards,
James

[vilian]

Hi Guys,

Is this implementation finished ? Is there any complete sample to see it working ?

[James Bott]

Vilian,

I included the source code in my previous message above. You can compile this to get a working example.

James

[vilian]

Thank You James,

I will try it.

[vilian]

Hi James,

It's almost perfect to me. There is missing only the quick bar (image bellow). Do you know how to do this ?

[James Bott]

Sorry, I don't have a clue. I suspect you need to use C code to access Windows DLLs.