Comments on: Hiding the border on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/ Just a bunch of Adobe Flex Examples Sat, 11 Feb 2012 11:51:51 +0000 hourly 1 By: Peter deHaan http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/comment-page-1/#comment-7567 Peter deHaan Thu, 22 Apr 2010 22:32:12 +0000 http://blog.flexexamples.com/?p=2396#comment-7567 For marginally more information, see <a href="http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/" rel="nofollow">"Removing the rollover and selection highlight on a Spark List control in Flex 4"</a>. Peter For marginally more information, see “Removing the rollover and selection highlight on a Spark List control in Flex 4″.

Peter

]]> By: Peter deHaan http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/comment-page-1/#comment-7565 Peter deHaan Thu, 22 Apr 2010 22:21:04 +0000 http://blog.flexexamples.com/?p=2396#comment-7565 @Daniel, Create a simple custom item renderer and set the Boolean <code>autoDrawBackground</code> property to <em>false</em>, as seen in the following example: <pre lang="mxml"> <?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer name="CustomItemRenderer" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="false"> <s:Label text="{data.label}" left="2" right="2" top="4" bottom="4" /> </s:ItemRenderer> </pre> Peter @Daniel,

Create a simple custom item renderer and set the Boolean autoDrawBackground property to false, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="false">
 
    <s:Label text="{data.label}"
            left="2" right="2" top="4" bottom="4" />
 
</s:ItemRenderer>

Peter

]]> By: Daniel http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/comment-page-1/#comment-7564 Daniel Thu, 22 Apr 2010 21:29:29 +0000 http://blog.flexexamples.com/?p=2396#comment-7564 Peter, Any suggestions on how to hide the rollover on a list component? Thanks, Daniel Peter,

Any suggestions on how to hide the rollover on a list component?

Thanks,

Daniel

]]> By: Peter deHaan http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/comment-page-1/#comment-6940 Peter deHaan Sat, 06 Feb 2010 02:53:00 +0000 http://blog.flexexamples.com/?p=2396#comment-6940 Done; <a href="http://blog.flexexamples.com/2010/02/05/setting-the-content-background-alpha-a-spark-list-control-in-flex-4/" rel="nofollow">"Setting the content background alpha a Spark List control in Flex 4"</a> Peter Done; “Setting the content background alpha a Spark List control in Flex 4″

Peter

]]> By: Peter deHaan http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/comment-page-1/#comment-6939 Peter deHaan Sat, 06 Feb 2010 02:48:45 +0000 http://blog.flexexamples.com/?p=2396#comment-6939 @Sönke Rohde, Set the <code>contentBackgroundAlpha</code> style to 0.0, as seen in the following example: <pre lang="mxml"> <?xml version="1.0" encoding="utf-8"?> <s:Application name="Spark_List_contentBackgroundAlpha_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Panel title="Spark List test" horizontalCenter="0" verticalCenter="0"> <s:controlBarContent> <mx:Form> <mx:FormItem label="contentBackgroundAlpha:"> <s:HSlider id="sl" minimum="0.0" maximum="1.0" value="1.0" snapInterval="0.1" stepSize="0.1" /> </mx:FormItem> </mx:Form> </s:controlBarContent> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient rotation="45"> <s:GradientEntry color="red" /> <s:GradientEntry color="yellow" /> <s:GradientEntry color="haloBlue" /> </s:LinearGradient> </s:fill> </s:Rect> <s:List id="lst" contentBackgroundAlpha="{sl.value}" left="20" right="20" top="20" bottom="20"> <s:layout> <s:VerticalLayout requestedRowCount="4" gap="0" horizontalAlign="contentJustify" /> </s:layout> <s:dataProvider> <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" /> </s:dataProvider> </s:List> </s:Panel> </s:Application> </pre> Peter PS: I'll also post this as a new entry in a couple minutes, so it is a bit more "searchable". @Sönke Rohde,

Set the contentBackgroundAlpha style to 0.0, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_List_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:Panel title="Spark List test"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <mx:Form>
                <mx:FormItem label="contentBackgroundAlpha:">
                    <s:HSlider id="sl"
                            minimum="0.0"
                            maximum="1.0"
                            value="1.0"
                            snapInterval="0.1"
                            stepSize="0.1" />
                </mx:FormItem>
            </mx:Form>
        </s:controlBarContent>
 
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:LinearGradient rotation="45">
                    <s:GradientEntry color="red" />
                    <s:GradientEntry color="yellow" />
                    <s:GradientEntry color="haloBlue" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
 
        <s:List id="lst"
                contentBackgroundAlpha="{sl.value}"
                left="20" right="20" top="20" bottom="20">
            <s:layout>
                <s:VerticalLayout requestedRowCount="4"
                        gap="0"
                        horizontalAlign="contentJustify" />
            </s:layout>
            <s:dataProvider>
                <s:ArrayList id="arr" source="[red,orange,yellow,green,blue]" />
            </s:dataProvider>
        </s:List>
    </s:Panel>
 
</s:Application>

Peter
PS: I’ll also post this as a new entry in a couple minutes, so it is a bit more “searchable”.

]]> By: Sönke Rohde http://blog.flexexamples.com/2010/02/05/hiding-the-border-on-a-spark-list-control-in-flex-4/comment-page-1/#comment-6938 Sönke Rohde Sat, 06 Feb 2010 02:29:47 +0000 http://blog.flexexamples.com/?p=2396#comment-6938 If it only would be that easy to hide the background too. No other way then providing a custom skin, right? If it only would be that easy to hide the background too.
No other way then providing a custom skin, right?

]]>