Button using separate frame and tile skins like windows

skatt

09-08-2011 20:41:37

I am trying to manage my skin with less stretching.
I want the border of my button to stretch, but the main part of my image should be tiled instead of stretched.
First I tried to just change the Center to be tiled, but that didn't work.
So I separated the frame from the center that same way that WindowFrameSkin and TileClientSkin are setup.
This accomplished the look I want, except now the frame and center act as separate widgets.

Is there a better way to approach this?

Here is my code from my Skin file:

    <Resource type="ResourceSkin" name="ButtonFrameSkin" size="972 44" texture="Abydos_POFSkin.png">

        <BasisSkin type="SubSkin" offset="0 0 2 2" align="Left Top">

            <State name="disabled" offset="1026 579 2 2"/>

            <State name="normal" offset="1026 624 2 2"/>

            <State name="highlighted" offset="1026 670 2 2"/>

            <State name="pushed" offset="1026 714 2 2"/>

            <State name="disabled_checked" offset="1026 579 2 2"/>

            <State name="normal_checked" offset="1026 624 2 2"/>

            <State name="highlighted_checked" offset="1026 670 2 2"/>

            <State name="pushed_checked" offset="1026 714 2 2"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="2 0 968 2" align="HStretch Top">

            <State name="disabled" offset="1028 579 962 2"/>

            <State name="normal" offset="1028 624 962 2"/>

            <State name="highlighted" offset="1028 670 962 2"/>

            <State name="pushed" offset="1028 714 962 2"/>

            <State name="disabled_checked" offset="1028 579 962 2"/>

            <State name="normal_checked" offset="1028 624 962 2"/>

            <State name="highlighted_checked" offset="1028 670 962 2"/>

            <State name="pushed_checked" offset="1028 714 962 2"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="970 0 2 2" align="Right Top">

            <State name="disabled" offset="1996 579 2 2"/>

            <State name="normal" offset="1996 624 2 2"/>

            <State name="highlighted" offset="1996 670 2 2"/>

            <State name="pushed" offset="1996 714 2 2"/>

            <State name="disabled_checked" offset="1996 579 2 2"/>

            <State name="normal_checked" offset="1996 624 2 2"/>

            <State name="highlighted_checked" offset="1996 670 2 2"/>

            <State name="pushed_checked" offset="1996 714 2 2"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="970 2 2 40" align="Right VStretch">

            <State name="disabled" offset="1996 581 2 34"/>

            <State name="normal" offset="1996 626 2 34"/>

            <State name="highlighted" offset="1996 672 2 34"/>

            <State name="pushed" offset="1996 716 2 34"/>

            <State name="disabled_checked" offset="1996 581 2 34"/>

            <State name="normal_checked" offset="1996 626 2 34"/>

            <State name="highlighted_checked" offset="1996 672 2 34"/>

            <State name="pushed_checked" offset="1996 716 2 34"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="970 39 2 2" align="Right Bottom">

            <State name="disabled" offset="1996 618 2 2"/>

            <State name="normal" offset="1996 662 2 2"/>

            <State name="highlighted" offset="1996 706 2 2"/>

            <State name="pushed" offset="1996 750 2 2"/>

            <State name="disabled_checked" offset="1996 618 2 2"/>

            <State name="normal_checked" offset="1996 662 2 2"/>

            <State name="highlighted_checked" offset="1996 706 2 2"/>

            <State name="pushed_checked" offset="1996 750 2 2"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="2 40 968 2" align="HStretch Bottom">

            <State name="disabled" offset="1028 618 962 2"/>

            <State name="normal" offset="1028 662 962 2"/>

            <State name="highlighted" offset="1028 706 962 2"/>

            <State name="pushed" offset="1028 750 962 2"/>

            <State name="disabled_checked" offset="1028 618 962 2"/>

            <State name="normal_checked" offset="1028 662 962 2"/>

            <State name="highlighted_checked" offset="1028 706 962 2"/>

            <State name="pushed_checked" offset="1028 750 962 2"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="0 39 2 2" align="Left Bottom">

            <State name="disabled" offset="1026 618 2 2"/>

            <State name="normal" offset="1026 662 2 2"/>

            <State name="highlighted" offset="1026 706 2 2"/>

            <State name="pushed" offset="1026 750 2 2"/>

            <State name="disabled_checked" offset="1026 618 2 2"/>

            <State name="normal_checked" offset="1026 662 2 2"/>

            <State name="highlighted_checked" offset="1026 706 2 2"/>

            <State name="pushed_checked" offset="1026 750 2 2"/>

        </BasisSkin>

        <BasisSkin type="SubSkin" offset="0 2 2 40" align="Left VStretch">

            <State name="disabled" offset="1026 581 2 34"/>

            <State name="normal" offset="1026 626 2 34"/>

            <State name="highlighted" offset="1026 672 2 34"/>

            <State name="pushed" offset="1026 716 2 34"/>

            <State name="disabled_checked" offset="1026 581 2 34"/>

            <State name="normal_checked" offset="1026 626 2 34"/>

            <State name="highlighted_checked" offset="1026 672 2 34"/>

            <State name="pushed_checked" offset="1026 716 2 34"/>

        </BasisSkin>

        <BasisSkin type="SimpleText" offset="2 2 968 40" align="Stretch">

            <State name="disabled" colour="0.5 0.5 0.5" shift="0"/>

            <State name="normal" colour="1 1 1" shift="0"/>

            <State name="highlighted" colour="1 1 1" shift="0"/>

            <State name="pushed" colour="1 1 1" shift="1"/>

            <State name="disabled_checked" colour="0.5 0.5 0.5" shift="0"/>

            <State name="normal_checked" colour="1 1 1" shift="0"/>

            <State name="highlighted_checked" colour="1 1 1" shift="0"/>

            <State name="pushed_checked" colour="1 1 1" shift="1"/>

        </BasisSkin>

    </Resource>

    <Resource type="ResourceSkin" name="ButtonTileSkin" size="970 40" texture="Abydos_POFSkin.png">

        <BasisSkin type="TileRect" offset="0 0 970 40" align="Stretch">

            <State name="disabled" offset="1028 581 970 40">

                <Property key="TileSize" value="973 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="normal" offset="1028 626 970 40">

                <Property key="TileSize" value="970 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="highlighted" offset="1028 672 970 40">

                <Property key="TileSize" value="970 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="pushed" offset="1028 716 970 40">

                <Property key="TileSize" value="970 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="disabled_checked" offset="1028 581 970 40">

                <Property key="TileSize" value="970 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="normal_checked" offset="1028 626 970 40">

                <Property key="TileSize" value="970 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="highlighted_checked" offset="1028 672 970 40">

                <Property key="TileSize" value="970 42"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

            <State name="pushed_checked" offset="1028 716 970 40">

                <Property key="TileSize" value="970 40"/>

                <Property key="TileH" value="true"/>

                <Property key="TileV" value="true"/>

            </State>

        </BasisSkin>

    </Resource>

And here is the code from my template:

    <Resource type="ResourceLayout" name="Button" version="3.2.0">

        <Widget type="Button" skin="ButtonFrameSkin" position="0 0 972 44" name="Root">

            <Property key="FontName" value="Default"/>

            <Property key="TextAlign" value="Center"/>

            <UserString key="LE_TargetWidgetType" value="Button"/>

            <Widget type="Button" skin="ButtonTileSkin" position="2 2 968 40" align="Top Left" name="Client"/>

        </Widget>

        <Widget type="Button" skin="Button" position="0 0 29 26"/>

    </Resource>