Styling the Flex HRule control

The following example shows you how you can style the HRule (or VRule) control in Flex by setting the strokeWidth, strokeColor, and shadowColor styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/14/styling-the-flex-hrule-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="stokeWidth:">
                <mx:HSlider id="strokeWidthSlider"
                        minimum="0"
                        maximum="20"
                        value="2"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        dataTipPrecision="0" />
            </mx:FormItem>
            <mx:FormItem label="strokeColor:">
                <mx:ColorPicker id="strokeColorColorPicker"
                        selectedColor="red" />
            </mx:FormItem>
            <mx:FormItem label="shadowColor:">
                <mx:ColorPicker id="shadowColorColorPicker"
                        selectedColor="blue" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HRule id="hrule"
            strokeWidth="{strokeWidthSlider.value}"
            strokeColor="{strokeColorColorPicker.selectedColor}"
            shadowColor="{shadowColorColorPicker.selectedColor}"
            width="100%" />

</mx:Application>

View source is enabled in the following example.

Tagged as: shadowColor, strokeColor, strokeWidth