How do I reduce the minimum width of a Button on a ButtonBar in Flex 4?

I have created a spark ButtonBar which is dynamically populated with XML and skinned to look like a standard TabBar.

When I used the TabBar in Flex 3, the width of each Tab would shrink or grow to the size of the Label, plus a litt开发者_JS百科le padding either side.

When using the spark ButtonBar in Flex 4, I find that no matter how short the label (even an empty string), the Buttons will be at least 70 pixels wide, and will expand for longer labels.

I have tried setting the minWidth to 20 in various places, including on my ButtonBarButton skin, but this has no effect.

Any help is appreciated!

You need to create both a custom ButtonBarSkin as well as ButtonBarButtonSkin(s). The default ButtonBarSkin uses three different ButtonBarButtonSkins:

1. ButtonBarFirstButtonSkin
2. ButtonBarMiddleButtonSkin
3. ButtonBarLastButtonSkin

These skins are your culprits. (1) and (3) both have a <s:Rect id="shadow"... width="69"...> as the bottom-most layer. The middle one has a border Rect with a width of 69, this time on the upper-most layer. Remove those elements and you can make the minWidth in the skins whatever you'd like. :)