CODEWITHSUNDEEP
apache-flexscrollbarskinningspark-skinning
Richard
Richard

Reputation: 1

skinning scroller flex 4

I need to skin the scrollbar. I have figured out how to change base color, however need to change the border color of scrollbar as well (I need it more greyish).

Here's the code:

<s:WindowedApplication name="scrollerSkinning"
           xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark" 
           width="1024" height="780">

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|Scroller {
    verticalScrollPolicy: on;
    }

    s|VScrollBar {
    chromeColor: #FFFFFF;           
    }

</fx:Style>

<s:Scroller width="100%" height="100%">
    <s:Group width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
        </s:layout>
        <s:Image id="imageGeneralPage" source="@Embed('images/genpage.png')"/>
    </s:Group>
</s:Scroller>

</s:WindowedApplication>

Image genpage.png is greater in size than the application window, thus there shows up vertical scrollbar which I need to skin a lil bit, nothing fancy, only color change. Appreciate any hint, thnx

Upvotes: 0

Views: 2294

Answers (1)

Richard
Richard

Reputation: 1

thnx both of you for replies. first I did as RIAstar suggested here: MXML: Spark skin a VGroups scrollbar

then copied the default skins:

<s:Button id="track" top="16" bottom="15" height="54"
          focusEnabled="false" tabEnabled="false"
          skinClass="mySkins.VScrollBarTrackSkin1" />

in "mySkin" package and edited the rectangle SolidColorStroke color property:

<s:Rect top="0" bottom="0" left="0" right="0" minWidth="14" minHeight="14">
    <s:stroke>
        <s:SolidColorStroke color="0x888888" weight="1"/>
    </s:stroke>
    <s:fill>
        <s:SolidColor color="0xCACACA" />
    </s:fill>
</s:Rect>

Thnx alot for help.

P.S. @RIAstar, don't know how to give you kudos, tho :(

Upvotes: 0

Related Questions