How to change the TTabItem's style

问题

Please take a look at the following picture:

I need to modify color of blue bar at the TTabItem. But I did not find any place available for modification. Which attributes or styles can modify it?

回答1:

to change look of tabitems you can design your custom style. Using TStyleBook component or Load an style to StyleBook and modify tabitemstyle on layout tree.

You can watch this film to see how to manage styles properties.

How to style buttons in Firemonkey with Delphi XE4

回答2:

The answer by Sylwester Wojnar is partaily correct and works for desktop apps just fine but on mobile, this gets more complicated (at least on XE5, not sure if XE6 fixed that).

Of course you can (and have to) use TStyleBook and StyleLookup property to style your controls but you cannot easily copy the default style of a control since mobile form designer doesn't have the Edit custom style menu option, so you would have to recreate the style entirely. Luckily there is a workaround. First switch to whatever platform you want to edit style of (Android, iOS 6/7) then open the dfm in text mode (Alt+F12) an set DesignerMobile = False switch to design mode again and you'll see that you're still on mobile style but using classical designer then just right click on your desired control and select Edit custom/default style.

If you plan on running your app on multiple platforms you can add multiple TStyleBooks to your form and repeat this for each one to get different and correct styles for all platforms you need, then you need to select one during form construction:

procedure TForm1.AfterConstruction;
begin
  inherited;
{$IF Defined(MSWINDOWS)}
  StyleBook := StyleBookWindows;
{$ELSEIF Defined(MACOS) AND NOT Defined(IOS)}
  // MAC OS shares the same as Windows both default styles appear to be the same
  StyleBook := StyleBookWindows;
{$ELSEIF Defined(ANDROID)}
  StyleBook := StyleBookAndoird;
{$ELSEIF Defined(IOS)}
  if (TOSVersion.Check(7)) then
    StyleBook := StyleBookIOS7
  else
    StyleBook := StyleBookIOS6;
{$ENDIF}
end;

Update: This only works in Delphi XE5 and is "fixed" in XE6.

Update 2: There is another solution that should probably work in XE6 as well.

First of all you need to obtain default platform style, iOS styles should be saved under bin\ios of your Delphi installation. How to extract Android style read http://delphihaven.wordpress.com/2013/12/31/inspecting-platform-styles-redux/.

Then add TStyleBook to your form, double click it and click Add (not load as this would fail to load), click Apply and close and reopen the style again (to ensure it is properly recreated in the IDE). Now click Save... and save it anywhere you like. This will save it in text so you can edit it manually. Look for tabitemstyle and delete every other style so it looks like this:

object TStyleContainer
  object TLayout
    StyleName = 'tabitemstyle'
    DesignVisible = False
    ...
  end
end

Now edit the style book again and click Clear All reopen the style book and click Add and select the style you just edited. Reopen the style book again, now the style should be loaded, rename it so Delphi won't use it for all TTabItems. Select the style in your control with the name you just entered and make sure the style book is selected in the form as well.

Editing the style:

Default style of the TTabItem uses an image to draw the bottom blue-ish bar. Modifying the image is really difficult as it is a multi-resolution image, easier way is to add a rectangle to the style. So add a rectangle under top section of the style position it to bottom and after some fiddling with the position and size, you should get the desired result.

来源：https://stackoverflow.com/questions/23456877/how-to-change-the-ttabitems-style

标签

Delphi

firemonkey

delphi-xe6