Callout Content Background Styles

In addition to the Spark styles for contentBackgroundColor and contentBackgroundAlpha styles, Callout adds a 3rd style called contentBackgroundAppearance. By default, the value is “inset” and the Callout appears with a slight border around the contentBackgroundColor as well as a drop shadow from the top edge to give an inset appearance. Other values for the style include “flat” and “none”. See the example code and screen shots below.

contentBackgroundAppearance=”inset” (default)



<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="" 
        title="Callout contentBackgroundAppearance">
            import mx.core.UIComponent;
            import spark.components.ContentBackgroundAppearance;
            protected function openCallout(event:MouseEvent, 
                callout.setStyle('contentBackgroundAppearance', value);
        <s:Callout id="callout"
                   width="{Math.floor(this.width * .3)}"
                   height="{Math.floor(this.height * .3)}"
        <s:Button id="button1" label="Inset (default)" 
                  click="openCallout(event, button1)"/>
        <s:Button id="button2" label="Flat"
                  click="openCallout(event, button2, spark.components.ContentBackgroundAppearance.FLAT)"/>
        <s:Button id="button3" label="None"
                  click="openCallout(event, button3, spark.components.ContentBackgroundAppearance.NONE)"/>
        <s:HorizontalLayout verticalAlign="middle" gap="5"/>
Share on Facebook

5 Responses to Callout Content Background Styles

  1. Gunnar says:

    Hi! How can I change the chrome color of the dark grey “frame” from the default mobile color(0x484848) to another color?
    Thanks, Gunnar

  2. Pingback: Cool Stuff with the Flash Platform – 12/1/2011 | Hire Flash Developers

  3. Gunnar says:


  4. Mike says:

    Great post. How would I bind my listbox (firstvewnavigtor) to the above example?

    Hopefully this is an easy question for Mr.Jason