Cannot style frame-in-frame? Am missing something

VCL TMS VCL UI Pack
1
Hi @tmssoftware,

I currently try to change an application from not being themed to being themed using the TMS components. I started with a new TMS 2019 application and adjusted menus etc. Since I have a lot of functionality implemented in frames already which I load at runtime, I wanted to do the same in the themed application.

So e.g. in the TMSFrame with the file menu, I want to show frames in the client area when the corresponding wedge item is clicked. I began with one frame loaded to test what to do to get themes/styles right. And this is where I fail.

I replaced all non-TMS components with TMS components on the frame (checkboxes, edit fields, etc.), and I dropped an AdvFormStyler on the TFrame. This frame I instantiate when the file menu frame is created. Then in the main form's existing OnApplyStyle, after the file menu's SetAppStyle is called, I link the frame's AppStyle to the main form AppStyler:

  FRM_FileMenu.Frm_UI.FORMSTYLER_OptFrame.AppStyle := Self.APPSTYLER_Main;

When I run, nothing happens. I first had the correct background, but wrong font color, but this was inherited from parent background etc. So when I uncheck those parent attributes of the frame to instantiate, I have no styling at all.

Went through the manuals etc., but cannot find anywhere what I have to link with what and which attributes to check so I can have a frame created at runtime into e.g. the file menu frame... and everything is styled. Played with attributes "AutoThemeAdapt", "Themed", setting "Style" explicitely and so on, no success.

Any hint welcome!
Matthias
2

When you dynamically load/create a frame, the TAdvFormStyler cannot know this.
Therefore, after dynamic creation of controls/frames, call AdvFormStyler.ApplyStyle to have all controls in sync for their style.

3
Thanks for the fast response. Actually I tried ApplyStyle on the frame, also ApplyStyleToFrame etc., but no luck.

Here is what I did, maybe someone can give this a try if this is the same behaviour, or someone can spot what I am missing.

* Create a new Office 2019 Ribbon application
* Save everything (unit1, unit2, project1)
* Create a new data module
* Save it (unit3)
* Drop an AdvAppStyler onto the data module
* Change the form creation order so the data module is created before the main form

## In unit2 (main form):
* Add implementation:
  uses Unit3, AdvStyleIF;
* For the form "OnCreate":
  AdvFormStyler1.AppStyle := DataModule3.AdvAppStyler1;
* Drop a TAdvOfficeRadioGroup on the main form
  * Add some items to have radio buttons
* For the Toolbar on AdvPage1, add "OnClick" to control some style changes:
  if DataModule3.AdvAppStyler1.Style = tsOffice2019Black
    then DataModule3.AdvAppStyler1.Style := tsOffice2019White
    else DataModule3.AdvAppStyler1.Style := tsOffice2019Black;

When testing this and clicking the toolbar repeatedly, the radio group nicely picks up the style change.

Now for the frame, in unit1 ("File" frame):
* Drop a TAdvFormStyler on the frame
* Drop a TAdvOfficeRadioGroup on the frame
  * Add some items to have radio buttons
* Add to implementation:
  uses Unit3, AdvStyleIF;
* In the frame constructor add:
  AdvFormStyler1.AppStyle := DataModule3.AdvAppStyler1;
* In procedure TTMSFrame1.ChangePage add at the end:
  AdvOfficeRadioGroup1.BringToFront;
  
When you now run the test application and toggle to the black theme, the main form radio group again is okay, but the one on the file frame has a light background with light gray font color. For the light theme selected, it looks okay, but that might be by accident - at least no light gray text.

Thanks for your help!
4

TAdvFormStyler belongs on a TForm or descendent. So, put TAdvFormStyler on the form hosting the frame and AFTER you created the frame at runtime (and set the frame parent), call AdvFormStyler.ApplyStyle for the AdvFormStyler on the form that hosts the frame.

5

Thanks for your help, with a bit forth and back I got it working now and update all the sub frames. One mistake I made was also that I did not place the components on a panel in the frame, so a lot of the parent-inheritance did not work but left the color wrong.


One thing I noticed: a lot of components have clSilver as the border color, shouldn't it be clWindowFrame to pick of style on light, medium dark?
6

Could you tell us for which components you see this border color?

7

Sure. I tested a handful and found these with BorderColor set to default clSilver resp. $00ABABAB:


- TAdvGroupBox
- TAdvOfficeRadioGroup
- TAdvOfficeCheckGroup
- TAdvStringGrid
- TAdvSpreadGrid
- TAdvColumnGrid

This includes the DB-version (if exists) as well.

Just for the fun of it I gripped through the component source and found quite a few with hardcoded colours which were not in styling sections. As a note, I didn't dive deeper though to check if changing style works and updated BorderColor. I used this pattern for grep:

\sBorderColor\s*:=
8

The TAdvGroupBox, TAdvOfficeRadioGroup and TAdvOfficeCheckGroup followed the border color of the TGroupBox. The color clWindowFrame is much darker than the border color used in TGroupBox.

We've changed this now, that in the newer office styles not only the font color but also the border color adapts.

For TAdvStringGrid, TAdvSpreadGrid, TAdvColumnGrid and a lot of other components are initialized with the Office 2019 White look. When you change the style, the border colors are changed as well.

Gjalt Vanhouwaert2020-02-12 15:52:12

9

Thanks, excellent! I am testing resp. changing my application's GUI with some other components I did not use before, testing against style 2019 light / medium / dark. Should I collect my findings, then open a new thread?


Example: When in the AdvTrackBar you use the TrackLabel, that always stays black, even on dark theme when the track bar line and tracker turned white. Is there a best practice for updating? I thought of sitting on a "styleChanged" event and updating the label by "stealing" the color from another component which was updated? So far no real success though.
10

We've changed it for the AdvTrackBar as well.


You can start a new thread or mail your remarks to us.

We will go over our components again to check the look in Office 2019 dark style, but it might always be possible that some properties are missed.