Search code examples
apache-flexflex4flex-spark

Is there a style that will change the caret selection color in a Spark List?


Is there a style or property that will change the caret selection color in a Spark List?

Note: The caret selection is the border color around a row when using the keyboard navigation. It is not the selected row.


Solution

  • Okay, tested around a bit and

    <?xml version="1.0" encoding="utf-8"?>
    <s:ItemRenderer 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="true" height="60">
    <fx:Script>
        <![CDATA[
    
            [Bindable] public var color1:uint = 0xE54545;
            [Bindable] public var color2:uint = 0xE5D145; 
            [Bindable] public var color3:uint = 0xA3E545;
            [Bindable] public var color4:uint = 0x45E5C6;
            [Bindable] public var color5:uint = 0x4564E5;
            [Bindable] public var color6:uint = 0xE545C6;
    
    
        ]]>
    </fx:Script>
    
    
        <s:states>
            <s:State name="normal"/>            
            <s:State name="hovered"/>
            <s:State name="selected"/>
            <s:State name="normalAndShowsCaret"/>
            <s:State name="hoveredAndShowsCaret"/>
            <s:State name="selectedAndShowsCaret"/>
        </s:states>
    
    
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:stroke.normalAndShowsCaret>
                <s:SolidColorStroke 
                    color="{color1}" 
                    weight="1"/>
            </s:stroke.normalAndShowsCaret>
            <s:stroke.hoveredAndShowsCaret>
                <s:SolidColorStroke 
                    color="{color2}" 
                    weight="1"/>
            </s:stroke.hoveredAndShowsCaret>
            <s:stroke.selectedAndShowsCaret>
                <s:SolidColorStroke 
                    color="{color3}" 
                    weight="1"/>
            </s:stroke.selectedAndShowsCaret>
            <s:fill>
                <s:SolidColor 
                    color.normal="{color1}"
                    color.normalAndShowsCaret="{color2}" 
                    color.hovered="{color3}"
                    color.hoveredAndShowsCaret="{color4}"
                    color.selected="{color5}"
                    color.selectedAndShowsCaret="{color6}"
                    />
            </s:fill>
        </s:Rect>
    
       <s:Label text="{data}"/> 
    </s:ItemRenderer>
    

    and the actual caret color is third stroke, "s:stroke.selectedAndShowsCaret". Why my first comment didn't work was because it is also binded to color="{selectionColor}" by default, so you need to make a custom itemrender or adjust your current itemrenderer to match.