Showing Images in ToggleButtonBar control

Question

I have a ViewStack and I am using ToggleButtonBar to navigate
between the views in the view stack. I would like to use Graphics
to represent the buttons instead of using the buttons. How can I do
this? I found a way with HBox instead of the ToggleButtonBar
control. Below is the code :
<mx:HBox borderStyle="solid" width="778" paddingTop="0"
x="21" y="131" horizontalAlign="center" horizontalGap="1">
<mx:Image source="assets/MenuGraphics_3.png"
click="storeViews.selectedChild=vwOne;"/>
<mx:Image source="assets/MenuGraphics_5.png"
click="storeViews.selectedChild=vwTwo;" />
<mx:Image source="assets/MenuGraphics_7.png"
click="storeViews.selectedChild=vwThree;" />
<mx:Image source="assets/MenuGraphics_9.png"
click="storeViews.selectedChild=vwFour;" />
</mx:HBox>
But,
I would like to use the ToggleButtonBar control to process
the ViewStack. Appreciate the help. Thanks.

Answer 1

If the above example works, why do you want to use the
ToggleButtonBar control?
Either way, it sounds like you want to overlay images on a
ToggleButtonBar.
This is complicated, since the graphical skin for a
ToggleButtonBar is merely 3 buttons that get mutated to stretch
over the required number by slice-9 scaling. There are two ways
round it, one would be to work on a programmatic ToggleButtonBar
skin that draws graphical children over the bar (sounds like the
easiest).
Alternatively, I believe
Flexlib has a nifty component called
a CanvasButton or something, which allows the drawing of graphical
children over an existing button. You could attempt to subclass the
ToggleButtonBar with a similarly inspired component.