CODEWITHSUNDEEP
apache-flexflex4scrollskinningskin
jobinbasani
jobinbasani

Reputation: 2141

Flex 4 - Scroller skin

I'm trying to skin the Scroller in my application so that it looks like the example mentioned in http://insideria.com/2009/11/flex-101-customize-scrollbars.html

This example was done in Flex 3 and images are set in CSS.

I tried to create a skin for the component Scroller and saw that it uses VScrollBar and HScrollBar. I tried to put skins for these components. VScrollBar uses separate skins for the track, thumb, decrement/increment buttons.

I tried to make some changes in the skin, but they were not reflected at all in the application.

Can some one kindly tell me if I'm heading in the right direction?

I just want to create a customized scroll bar in Flex 4 with custom thumbs. Would appreciate if you could give me suggestions on this.

Upvotes: 1

Views: 8288

Answers (2)

Wade Mueller
Wade Mueller

Reputation: 6059

Create skin files for the following: VScrollBarSkin, VScrollBarThumbSkin, VScrollBarTrackSkin, HScrollBarSkin, HScrollBarThumbSkin and HScrollBarTrackSkin. (I generally use the default skins as a starting point.) Make sure the VScrollBarSkin and HScrollBarSkin files refer to your new track/thumb skins. Then set them in your CSS like so:

s|HScrollBar {
    skinClass: ClassReference("my.path.to.skins.HScrollBarSkin");
}

s|VScrollBar {
    skinClass: ClassReference("my.path.to.skins.VScrollBarSkin");
}

Hope that helps.

Upvotes: 2

shaunhusain
shaunhusain

Reputation: 19748

It sounds like you're going the right direction perhaps try what's posted here as an example first, I haven't given this a run-through yet but it looks like a good example: http://dgrigg.com/blog/2010/07/06/flex-spark-list-with-custom-scroll-bar-and-itemrenderer/

Upvotes: 2

Related Questions