DSkinLite採用XML方式來配置界面，並將界面元素抽象爲線條，矩形，圖片，文本等元素。開發人員可以使用這些元素來配置界面，不需要關心底層界面繪製操作。此特性是構成DSkinLite界面庫的基礎。在DSkinLite中，我們稱抽象的界面元素line,rect, image,text爲繪製元素。我們認爲任何一個軟件界面均可抽象爲這些元素，通過配置不同狀態下的繪製元素，基本上可以完成大部分界面繪製需求。
1 繪製元素基礎
我們在XML中配置繪製元素，同時使用state屬性來標識繪製元素所出狀態。同時DSkinLite還提供一些API用於控制繪製元素是否可見，設置繪製元素相關屬性。這樣在應用程序中，用戶也可以根據程序邏輯的需要控制繪製元素是否可見，或更改相關繪製元素屬性。
例如：
01 |
<window
name="buttonico"
type="button"> |
02 |
<property
tooltips="#default"
btransparentbk="true"
width="149"
height="50"/> |
03 |
<buttoninfo
subtype="push"
/> |
04 |
<image
state="down"
picfile="#buttonbase1"
rectinfile="0,0,149,50"/> |
05 |
<image
state="over"
picfile="#buttonbase1"
rectinfile="149,0,149,50"/> |
06 |
<image
state="normal"
picfile="#buttonbase1"
rectinfile="298,0,149,50"/> |
07 |
<image
id="ico"
state="all"
picfile="#buttonico1"
top="7"
left="5"
width="36"
height="36"
/> |
08 |
<text
state="all"
font="#default"
horzalign="left"
vertalign="top"
left="50"
top="5"
bsingleline="true"
textcolor="RGB(0,0,0)"
/> |
09 |
<text
state="all"
id="type"
font="#default"
content="star"
horzalign="left"
left="50"
top="15"
bsingleline="true"
textcolor="RGB(0,0,255)"
/> |
10 |
</window> |
在應用程序中，可以根據程序邏輯通過API
BOOL __stdcall dsSetDrawItemValue( HWND hwnd, LPCTSTR strID, LPCTSTR strValue, BOOL bRedraw);
來設置id="ico" image元素的picfile值，即設置圖片源。
2 繪製元素詳細說明
繪製元素分爲四類line，rect，text，image。這些元素的屬性分爲兩類，一類是共有的屬性，一類是不同元素自己特有的屬性。其中所有元素所共有的屬性列表如下：
| 屬性名 | 取值類型 | 說明 |
| id | string | 繪製元素的標識符，用戶可根據需要任意取名 |
| index | int | 繪製元素的繪製的先後順序，默認按書寫順序繪製 |
| bvisible | bool | 指定繪製元素是否可見，也可以在程序中調用API dsSetDrawItemVisible 來設置繪製元素是否可見 |
| left | int | 如果此值大於零，表示繪製元素左端相對於窗口左邊的開始位置 如果此值小於零，表示繪製元素左端相對於窗口右邊的開始位置 |
| top | int | 如果此值大於零，表示繪製元素上端相對於窗口上邊的開始位置 如果此值小於零，表示繪製元素上端相對於窗口底邊的開始位置 |
| width | int | 繪製元素的寬度 |
| height | int | 繪製元素的高度 |
| right | int | 如果此值大於零，表示繪製元素右端相對於窗口左邊的位置 如果此值小於零，表示繪製元素右端相對於窗口右邊的位置 |
| bottom | int | 如果此值大於零，表示繪製元素底端相對於窗口上邊的位置 如果此值小於零，表示繪製元素底端相對於窗口底邊的位置 |
| state | 組合 | 詳見後面的state列表 |
| relativeto | string | 指定此繪製元素的開始位置相對於某個其他繪製元素。參考繪製元素的相對位置文章 |
| relativepoint | string | 指定相對其他繪製的那個位置，取值left, top,right, bottom.目前實現right |
繪製元素位置定義的說明：
繪製元素的位置大小是相對於控件窗口的位置來定，其位置大小可能是固定值也可能是相對值。當left，top，right，bottom中有數字取負值，則意味着此值爲一個相對位置。如下：
left="-150" top="20" width="50" height="20" 如果此時窗口大小爲（0,0,200,300）
則此時繪製元素在窗口中位置爲left=50,top=20,width=50,height=20
left="50" top="20" right="-50" height="20" 如果此時窗口大小爲（0,0,200,300）
則此時繪製元素在窗口中位置爲left=50,top=20,right=150,bottom=40
我們可以發現此時的繪製元素的大小隨着窗口大小的改變將是變化的，即此時繪製元素大小是相對的。
left="-150" top="20" right="-100" height="20" 如果此時窗口大小爲（0,0,200,300）
則此時繪製元素在窗口中位置爲left=50,top=20,right=100,bottom=40
此設置也等於left="-150" top="20" width="50" height="20"
同理top及bottom值也可以取相對位置，其相對於窗口的底邊位置計算。
繪製元素狀態的說明：
大部分控件中繪製元素需要使用state屬性來標識繪製元素在控件出於何種狀態時顯示，因爲對某些控件而言，不同鼠標狀態下，其界面顯示是不一樣。state取值列表如下：
| "normal" | 此狀態爲鼠標未在控件上時的狀態 |
| "over" | 此狀態爲鼠標位於控件上的狀態 |
| "down" | 鼠標按鈕按下的狀態 |
|
"disable" |
控件窗口disable狀態 |
| "checked" | radiobutton，checkbutton 控件處於checked狀態 |
| "checkeddown" | radiobutton，checkbutton 控件處於checked狀態，且此時鼠標按鈕按下 |
| "checkedover" | radiobutton，checkbutton 控件處於checked狀態，且此時鼠標位於控件上 |
| "checkeddisable" | radiobutton，checkbutton 控件處於checked狀態，且控件disable |
| "all" | 所有狀態 |
| "inactive" | Windows狀態出於非active狀態，此狀態只對於popup的窗口有效 |
| "default" | 此狀態主要針對button控件，當button控件有BS_DEFPUSHBUTTON風格時，且此時button處於normal狀態時，將使用default狀態代替。 |
同時在DSkinLite中，也允許使用組合狀態，比如state="down|over"，則表示在over和down狀態下此繪製元素都顯示。
繪製元素image的屬性說明：
image元素除具有以上公共屬性外，還擁有一些其他自有屬性。DSkinLite支持png,ico,bmp( 8bit, 24bit)等格式的圖片。
| 屬性 | 取值 | 描述 |
| left_part | int | 圖片左側不拉伸的距離，此值在paintmode 爲"stretchparthorz" "stretchpartall"時有效。 |
| right_part | int | 圖片右邊不拉昇的距離，此值在paintmode爲"stretchparthorz" "stretchpartall"時有效 |
| top_part | int | 圖片上端不拉昇的距離，此值在paintmode爲"stretchpartvert" "stretchpartall"時有效 |
| bottom_part | bool | 圖片下端不拉昇的距離，此值在paintmode爲"stretchpartvert" o"stretchpartall" 時有效。 |
| picfile | string | 指定image圖片值，此值定義在xml "<dsimage>" 中。 |
| rectinfile | string | 指定使用圖片中的某部分來作爲圖片繪製源。格式如下：rectinfile="0,0,2,9" 單位爲像素，表示"left,top,width,height". 表示使用改圖片的0,0,2,9 這部分圖像區域來繪製。 需要注意的是，rectinfile主要用於一種圖片的normal,over,down等狀態都做到一張圖片的裏的情況，比如： 如果設置了rectinfile，則不能設置paintmode爲stretchparthorz, stretchpartvert, stretchpartall這些模式。即不能使用一張圖片的部分區域作爲繪製圖片去做以上幾種模式的拉申。 同時帶alpha通道的png圖片，目前不支持rectinfile這種模式。 |
| paintmode | tring | 繪製圖片的模式，取值解釋見下面列表描述。 |
繪製圖片的模式，取值如下：
對於image元素，首先會根據屬性left,top,right, bottom,width,height等計算image元素在窗口的位置。默認爲控件窗口大小。我們稱此時的位置爲計算後位置。
| 模式 | 說明 |
| "left" | 水平方向，圖片位於窗口位置左側，圖片保持原始大小。 |
| "right" | 水平方向，圖片位於窗口位置右側，圖片保持原始大小。 |
| "top" | 豎直方向，圖片位於窗口位置上側，圖片保持原始大小。 |
| "bottom" | 豎直方向，圖片位於窗口位置下側，圖片保持原始大小。 |
| "center" | 圖片位於窗口位置中間，圖片保持原始大小，不拉伸。 |
| "tilefill" | 圖片在窗口中平鋪。即重複繪製此圖片。 |
| "stretch" | 將圖片拉伸繪製到“計算後位置”內。類似win32 api StretchBlt，paintmode默認值爲strech。 |
| "stretchpartvert" | 豎直方向拉伸，此時"top_part","bottom_part"有效，用於指定上端和低端不拉伸的距離。 |
| "stretchparthorz" | 水平方向拉伸，此時"left_part", "right_part"有效，用於指定左邊和右邊不拉伸的距離 |
| "stretchpartall" | 水平豎直方向拉伸，此時"left_part", "right_part","top_part","bottom_part"有效。詳見後面關於九宮格區域的描述。 |
關於繪製圖片的模式，在此做詳細的說明，其中stretch模式比較好理解，就是直接拿圖片去做拉伸。在詳細解釋前，我們先了解一種常見的圖片拉伸方式-九宮格。
其中DSkinLite xml中image屬性設置與以上圖片對應如下：
left_part 區域1的寬度（也等於區域4，7的寬度）
right_part 區域3的寬度（也等於區域6，9的寬度）
top_part 區域1的高度（也等於區域2，3的高度）
bottom_part 區域7的高度（也等於區域8，9的高度）
區域2，4，6，8中的圖片內容會被用來拉伸，區域1，3，7，9的圖片內容在整個圖片繪製的過程中式不變的，這部分通常是帶有圓角或者不規則形狀。
在Windows界面中，由於Popup窗口的大小是變化的，這樣窗口的背景圖片需要用來做拉伸。而九宮格這種方式是使用的最多的。下面我們來看一張具體的窗口背景圖片：
xml中定義如下：
<image index="0" state="all" picfile="#stardard.window.bk" paintmode="stretchpartall" left_part="11" top_part="88" right_part="11" bottom_part="42" />
圖片爲：
如窗口變大後，此圖片也將相應的以九宮格的方式被拉伸，如下圖所示：
可以看到1，3，7，9區域大小保持不變，這些區域多有圓角邊框。如果被拉伸，圖片將失真。其中區域2，8 被水平拉伸，區域4，6被豎直拉伸，區域5被整體拉伸。
以上九宮格即爲DSkinLite中image的paintmode爲“stretchpartall”。理解了stretchpartall模式，另外兩種模式stretchparthorz和stretchpartvert就好理解了。比如一個界面風格中，標準button可能高度是一樣的，但是其寬度會不一樣。
01 |
<window
name="button"
type="button"> |
02 |
<property
bclipwindow="true"
tooltips="#default"
clipcolor="RGB(255,0,255)"
cursor="#handcur"
height="21"/> |
03 |
<buttoninfo
subtype="push"
drawfocus="true"
/> |
04 |
05 |
<image
state="default"
picfile="#stardard.button.default"
paintmode="stretchparthorz"
left_part="4"
right_part="4"
/> |
06 |
<image
state="normal"
picfile="#stardard.button.nor"
paintmode="stretchparthorz"
left_part="4"
right_part="4"
/> |
07 |
<image
state="over"
picfile="#stardard.button.hot"
paintmode="stretchparthorz"
left_part="4"
right_part="4"
/> |
08 |
<image
state="down"
picfile="#stardard.button.down"
paintmode="stretchparthorz"
left_part="4"
right_part="4"
/> |
09 |
<image
state="disable"
picfile="#stardard.button.disable"
paintmode="stretchparthorz"
left_part="4"
right_part="4"
/> |
10 |
<text
state="all"
font="#default"
horzalign="center"
bsingleline="true"
textcolor="RGB(0,0,0)"
/> |
11 |
</window> |
其中圖片定義paintmode使用了stretchparthorz，對應圖片如下：
按照上面XML的定義，left_part及right_part即爲兩道紫色線劃分的區域。這樣在使用此圖片繪製button背景時，左右兩邊區域將不會被拉伸即使用其大小繪製，中間的區域將根據button的寬度來拉伸。
總結：
本文主要介紹DSkinLite繪製元素的基本情況及image元素的詳細內容。在下一篇文章中，將介紹其他幾種繪製元素的定義及繪製元素控制等問題。
