Toggle Switch Styling

frankhdz

Seems I can't get the styling right with the ToggleSwitch. Rectable with a curve setting on the skin starts to curve right before the thumb skin. But the core skin does not do that.

https://paste.pics/ac205670de9659e8bb545e2c68fceb86

VS core version:

https://paste.pics/952a2ba6cfef3da3ba16e36242fc7c3a

joshtynjala

Since you didn't share any code, I can only guess what's wrong.

I suspect that you are setting both trackSkin and secondaryTrackSkin. In this case, they are displayed at the same time. The trackSkin appears on the left side of the thumbSkin, and the secondaryTrackSkin appears on the right side of the thumbSkin. They meet in the middle of the thumbSkin.

On the other hand, the default theme sets only trackSkin, but not secondaryTrackSkin. When there is only a trackSkin (and secondaryTrackSkin is null), the trackSkin spans the entire width of the ToggleSwitch.

frankhdz

joshtynjala I see. After looking at it more I see that the background color is switched on change and it is not the secondary skin that creates the on/off color change.

frankhdz

Figured it out. I created variants in my theme and now I switch between the variants based on it's true or false state:

function toggleSwitch_changeHandler(event:Event):Void {
        var toggle = cast(event.currentTarget, ToggleSwitch);
        trace("toggle.selected change: " + toggle.selected);
        if(toggle.selected){
            toggle.variant = "toggleTrue";
        }else{
            var trackSkin:RectangleSkin = new RectangleSkin();
            toggle.variant = "toggleFalse";
        }
    }

joshtynjala

I assume that you're not using one of the shape skins, like RectangleSkin. As you probably know, they can listen for state changes from the component to modify their fill or border. However, if you prefer to use Bitmap or something, it might be worth checking out MultiSkin, which can swap display objects when the component's state changes. You wouldn't need to add a listener manually in that case.

var skin = new MultiSkin();
skin.defaultView = new Bitmap(defaultBitmapData);
skin.selectedView = new Bitmap(selectedBitmapData);
toggle.trackSkin = skin;

frankhdz

joshtynjala Learned something new. Will look in to this method instead.

Yes I am actually using the RectangleSkin.

joshtynjala

If you're using RectangleSkin, then it's very similar:

var trackSkin = new RectangleSkin();
trackSkin.fill = /* fill styles */;
trackSkin.selectedFill = /* selected fill style */;

There's also a disabledFill property, a setFillForState() method, and similar options for the border too.