Monthly ArchiveJuly 2008
16 Jul 2008 03:35 pmAdventures in Flex
In Flex, if you have a custom slider thumb, it will always be scaled to a set size that Flex wants (I think 20×20).
For example,
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#ffffff"
width="300" height="100">
<mx:HSlider thumbSkin="@Embed(source='resources/images/mario8bit.png')" />
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#ffffff"
width="300" height="100">
<mx:HSlider thumbSkin="@Embed(source='resources/images/mario8bit.png')" />
</mx:Application>
would give you this:
To fix this, I wrote a class that extends SliderThumb and sets to the measured size of the skin image:
package controls.sliderClasses {
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;
use namespace mx_internal;
public class FlexibleSliderThumb extends SliderThumb {
override protected function measure():void {
super.measure();
measuredWidth = currentSkin.measuredWidth;
measuredHeight = currentSkin.measuredHeight;
}
}
}
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;
use namespace mx_internal;
public class FlexibleSliderThumb extends SliderThumb {
override protected function measure():void {
super.measure();
measuredWidth = currentSkin.measuredWidth;
measuredHeight = currentSkin.measuredHeight;
}
}
}
Now, modifying the mxml file like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#ffffff"
width="300" height="100">
<mx:Script>
<![CDATA[
import controls.sliderClasses.FlexibleSliderThumb;
]]>
</mx:Script>
<mx:HSlider
thumbSkin="@Embed(source='resources/images/mario8bit.png')"
sliderThumbClass="{controls.sliderClasses.FlexibleSliderThumb}"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#ffffff"
width="300" height="100">
<mx:Script>
<![CDATA[
import controls.sliderClasses.FlexibleSliderThumb;
]]>
</mx:Script>
<mx:HSlider
thumbSkin="@Embed(source='resources/images/mario8bit.png')"
sliderThumbClass="{controls.sliderClasses.FlexibleSliderThumb}"/>
</mx:Application>
gives you this:
