Flex 4.6 TabbedViewNavigator - Remove Border

Question

How to completely remove the button borders of a TabbedViewNavigator in Flex?

I've tried CSS, replacing the skin in AS and MXML with no luck:

.

I want to create a custom skin to the TabBar, replacing the background image and the labels with icons, is it possible?

Answer 1

Yes, everything is possible with skins. TabBar is part of TabbedVieNavigator and also TabBar is inherited from ButtonBar. You should to create skin for ButtonBar and set it for your TabbedViewNavigator #tabBar like this:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    s|TabbedViewNavigator #tabBar
    {
        skinClass: ClassReference("views.skins.TabbedViewNavigatorTabBarSkin");
    }
</fx:Style>

where TabbedViewNavigatorTabBarSkin is Skin of ButtonBar host component, please look at the screen below:

Then you just creating you own skins for ButtonBar buttons and set own BG color and icon and other things, which you want. Hope this help you.

Answer 2

Create a custom skin with spark.components.TabbedViewNavigator as HostComponent and define following components to make it work. Now skin your TabBar as u wish. You can add Image instead of Label.