如何更改TTabItem的样式 [英] How to change the TTabItem's style

问题描述

请看以下图片:

我需要在TTabItem处修改蓝色条的颜色.但是我没有找到任何可修改的地方. 哪些属性或样式可以对其进行修改?

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?

推荐答案

Sylwester Wojnar的回答部分正确，适用于桌面应用程序，但在移动设备上，这变得更加复杂(至少在XE5上，不确定XE6是否适用)修复该问题.)

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).

当然，您可以(并且必须)使用TStyleBook和StyleLookup属性来设置控件的样式，但是由于移动表单设计器没有Edit custom style菜单选项，因此您无法轻松地复制控件的默认样式. ，因此您必须完全重新创建样式.幸运的是，有一种解决方法.首先切换到要编辑样式的任何平台(Android，iOS 6/7)，然后在文本模式(Alt + F12)中打开dfm，然后再次将设置为DesignerMobile = False切换到设计模式，您会看到自己仍然采用移动样式，但使用经典设计器，然后右键单击所需的控件，然后选择Edit custom/default style.

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.

如果计划在多个平台上运行应用程序，则可以在表单中添加多个TStyleBooks，然后对每个表单重复此操作，以针对所需的所有平台获得不同且正确的样式，那么您需要在表单构建期间选择一个:

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;

更新:仅在Delphi XE5中有效，在XE6中已修复".

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

更新2: 还有另一种解决方案可能也应该在XE6中工作.

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

首先，您需要获取默认的平台样式，iOS样式应保存在Delphi安装的bin\ios下.如何提取Android样式，请阅读 http://delphihaven.wordpress. com/2013/12/31/inspecting-platform-styles-redux/.

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/.

然后将TStyleBook添加到窗体中，双击它并单击Add(不加载，因为这将无法加载)，单击Apply and close并再次重新打开样式(以确保在IDE中正确地创建了样式) ).现在单击Save...并将其保存在您喜欢的任何位置.这会将其保存为文本，因此您可以手动对其进行编辑.查找tabitemstyle并删除其他所有样式，如下所示:

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

现在再次编辑样式簿，然后单击Clear All重新打开样式簿，然后单击Add并选择刚编辑的样式.再次重新打开样式书，现在应该加载样式，将其重命名，这样Delphi就不会在所有TTabItems中使用它.用您刚刚输入的名称在控件中选择样式，并确保在表单中也选择了样式书.

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.

编辑样式:

TTabItem的默认样式使用图像绘制底部的蓝条.修改图像确实很困难，因为它是多分辨率图像，更简便的方法是在样式中添加一个矩形.因此，在样式的top部分下面添加一个矩形，将其定位到底部，并在对位置和大小进行一些调整之后，应该会得到所需的结果.

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.

这篇关于如何更改TTabItem的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！