Changing the fill colors of a ButtonBar control in Flex

The following example shows how you can change the background fill colors of a ButtonBar control in Flex by setting the buttonStyleName, fillColors, and fillAlphas styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .allButtons2 {
            /* Creates a gradient from red/orange when button is in the
               "out" state. */
            fillColors: red, haloOrange;
        }

        .allButtons4 {
            /* Creates a gradient from red/orange when button is in the
               "out" state. Creates a gradient from green/blue when
               button is in the "over" state. */
            fillColors: red, haloOrange, haloGreen, haloBlue;
        }

        .allButtonsSolid {
            fillColors: red, red;
        }

        .allButtonsSolidOpaque {
            fillAlphas: 1.0, 1.0;
            fillColors: red, red;
        }
    </mx:Style>

    <mx:ViewStack id="viewStack"
            visible="false"
            includeInLayout="false">
        <mx:VBox label="One">
            <mx:Label text="One" />
        </mx:VBox>
        <mx:VBox label="Two">
            <mx:Label text="Two" />
        </mx:VBox>
        <mx:VBox label="Three">
            <mx:Label text="Three" />
        </mx:VBox>
    </mx:ViewStack>

    <mx:Form>
        <mx:FormItem label="2 fill colors defined:">
            <mx:ButtonBar id="buttonBar2"
                    buttonStyleName="allButtons2"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
        <mx:FormItem label="4 fill colors defined:">
            <mx:ButtonBar id="buttonBar4"
                    buttonStyleName="allButtons4"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
        <mx:FormItem label="solid fill:">
            <mx:ButtonBar id="buttonBarSolid"
                    buttonStyleName="allButtonsSolid"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
        <mx:FormItem label="solid opaque fill:">
            <mx:ButtonBar id="buttonBarSolidOpaque"
                    buttonStyleName="allButtonsSolidOpaque"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

As you can see in the previous example, there are four separate ButtonBar controls:
1) The first ButtonBar control, buttonBar2, uses a custom buttonStyleName style (.allButtons2) which has an array of two items defined for its fillColors array:

.allButtons2 {
    /* Creates a gradient from red/orange when button is in the
        "out" state. */
    fillColors: red, haloOrange;
}

These two colors specify the gradient that is used for each button in the ButtonBar control. As you can see, the top of the button has a red-ish hue and the bottom of the button has more of an orange-ish hue.

2) The second ButtonBar control, buttonBar4, uses a custom buttonStyleName style (.allButtons4) which has an array of four items defined for its fillColors array:

.allButtons4 {
    /* Creates a gradient from red/orange when button is in the
       "out" state. Creates a gradient from green/blue when
       button is in the "over" state. */
    fillColors: red, haloOrange, haloGreen, haloBlue;
}

The first two colors specify the gradient that is used for the “out” state (the state where the cursor is not over the button) of each button. The last two colors specify the gradient that is used for the “over” state (the state where the cursor is over the button) of each button. So again, when the cursor is not over the button, the top of the button has a red-ish hue and the bottom of the button has more of an orange-ish hue. When the user moves their cursor over a button in the ButtonBar control, the button switches to a green-to-blue gradient.

3) The third ButtonBar control, buttonBarSolid, uses a custom buttonStyleName style (.allButtonsSolid) which has an array of two items defined for its fillColors array:

.allButtonsSolid {
    fillColors: red, red;
}

Both of the colors are the same, giving each of the buttons a solid fill instead of a gradient fill. Similar to the first ButtonBar control, buttonBar2, moving the mouse cursor over each button in the ButtonBar control a slightly darker looking fill.

4) The fourth ButtonBar control, buttonBarSolidOpaque, uses a custom buttonStyleName style (.allButtonsSolidOpaque) which has an array of two items defined for its fillColors array, but it also defines a new style, fillAlphas, which is an array of alpha fill values:

.allButtonsSolidOpaque {
    fillAlphas: 1.0, 1.0;
    fillColors: red, red;
}

As you can see, the fill colors are again using the same color for each entry, giving the button fill a solid fill instead of a gradient fill. The fillAlphas style is an array of two values, [1.0, 1.0], which controls the alpha for each of the items in the fillColors style array. This causes the fill color to appear as a deeper red, rather than a slightly faded/muted appearance.

You can also set the fillColors and fillAlphas styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .customButtonBarFillColors {
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customButtonBarFillColors");
                cssObj.setStyle("fillColors", [0xFF0000, "haloOrange", "haloOrange", "#FF0000"]);
                cssObj.setStyle("fillAlphas", [1.0, 1.0, 0.2, 0.4]);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="set button styles"
                click="init();" />
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            buttonStyleName="customButtonBarFillColors"
            themeColor="haloOrange">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>One</mx:String>
                <mx:String>Two</mx:String>
                <mx:String>Three</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>

</mx:Application>

View source is enabled in the following example.

Note that you can also specify an additional two values for the fillAlphas style which represent the fill values when the current button in a ButtonBar control is in an “over” state, similar to the second ButtonBar control (buttonBar4) in the first example.

So in the previous example, when you roll over each button in the buttonBar ButtonBar control the fill alpha for the button goes from a solid 1.0/1.0 to a gradient fill alpha of 0.2/0.4 (20% alpha at the top of the button to 40% alpha at the bottom of the button).