Question

I have a SkinnableContainer that I would like to add a border to. I have already created a skin class that creates a 1 pixel border around all four sides of the container successfully, however, I would like the border to only be for the top and bottom of the container, not the sides (left, right). How can I achieve such a thing? I have attached my current skin class. Please help! Thanks in advance.

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\mySkins\MyBorderSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark" >

<fx:Metadata>
    [HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>

<!-- Define the skin states. -->
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<!-- Define a Rect to fill the area of the skin. -->
<s:Rect x="0" y="0"
        height="100%" width="100%">
    <s:stroke>
        <s:LinearGradientStroke weight="1"/>
    </s:stroke>         
</s:Rect>

<!-- Define the content area of the container. -->
<s:Group id="contentGroup"
         left="5" right="5" top="2" bottom="2">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
</s:Group>        
</s:Skin>

Answer 1

Use something like:

<s:Line left="0" top="0" right="0">
    <s:stroke>
        <s:LinearGradientStroke weight="1"/>
    </s:stroke>
</s:Line>

<s:Line left="0" bottom="0" right="0">
    <s:stroke>
        <s:LinearGradientStroke weight="1"/>
    </s:stroke>
</s:Line>

instead of your Rect declaration.