UIPro的宗旨是：讓Windows UI開發像寫小網頁一樣簡單!
從高中時代開始，QQ一直伴隨着我，一直覺得QQ的UI都是那麼的漂亮，說實話，細節處理的真好。QQ自然成了我模仿的對象。
一直想模仿，但手上缺少一個強大靈活的UI庫，直到現在,UIPro的出現，才讓我又拾起那個想法，編寫這個QQCopy的demo。
在該系列的最後一講，會附上源碼哦！
UIPro的配置文件分爲兩個，一個是resource.xml，描述資源的類型（圖片，字體，顏色），一個ui.xml文件，描述容器、控件、佈局。換膚的話，一般重新加載resource.xml文件即可。如果涉及的控件的變形和移動，還需要加載新的ui.xml。
下面開始講解QQ主面板的開發：
咱們把QQ主面板分爲下圖紫色方框示意的三個容器：
主窗口類（這裏不再貼這幾行代碼，可以在源碼中看到）創建完畢，加載資源和ui.xml。開始在ui.xml中配置控件；
1. 背景和陰影邊框
對應的資源文件：
<?xml version="1.0" encoding="utf-8"?>
<resource>
<img_extent>
<item id="uipro.window.frame" margin="670,170,0,0" type="stretch" name="main.png"/>
<item id="uipro.window.shadow" margin="7,7,7,7" type="frame" name="shadow.png"/>
</img_extent>
</resource>
對應的ui.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<!--跟ui-->
<canvas id="root" layout="relative" layout_width="match_parent" layout_height="match_parent">
<!--icon繪製陰影-->
<icon id="mainpanel.shadow" resid='uipro.window.shadow' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>
<!--跟ui的一個子容器-->
<stackpanel id="panel.controls" layout="relative" layout_width="match_parent" layout_height="match_parent" layout_marginLeft="7" layout_marginTop="7" layout_marginRight="7" layout_marginBottom="7">
<!--主面板的背景圖片-->
<icon id="mainpanel.background" resid='uipro.window.frame' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>
</stackpanel>
</canvas>
運行效果：
下面添加標題欄圖標：
ui.xml文件格式：
<?xml version="1.0" encoding="utf-8"?>
<!--跟ui-->
<canvas id="root" layout="relative" layout_width="match_parent" layout_height="match_parent">
<!--icon繪製陰影-->
<icon id="mainpanel.shadow" resid='uipro.window.shadow' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>
<!--跟ui的一個子容器-->
<stackpanel id="panel.controls" layout="relative" layout_width="match_parent" layout_height="match_parent" layout_marginLeft="7" layout_marginTop="7" layout_marginRight="7" layout_marginBottom="7">
<!--主面板的背景圖片-->
<icon id="mainpanel.background" resid='uipro.window.frame' mode='stretch' layout_width="match_parent" layout_height="match_parent"/>
<stackpanel id="panel.top.controls" layout="relative" layout_width="match_parent" layout_height="wrap_content" layout_alignCenterHorizontal="mainpanel.background">
<icon id="panel.logo" resid='caption.logo' layout_marginLeft="8" layout_marginTop="3" layout_marginBottom="20"/>
<button id="uipro.window.close" resid="uipro.caption.button.close" background="0" layout_alignParentRight="true"/>
<button id="uipro.window.minimize" resid="uipro.caption.button.minimize" background="0" layout_toLeftOf="uipro.window.close"/>
<button id="panel.skin" resid="caption.button.skin" background="0" layout_toLeftOf="uipro.window.minimize"/>
<icon id="skin.new" resid="yuanred.0" layout_alignTop="panel.skin" layout_alignRight="panel.skin" layout_marginTop="5" layout_marginRight="5"/>
<simplestatic id="uipro.window.caption" font='uipro.caption.text.font' color='uipro.caption.text.color' content='' layout_width="match_parent" layout_height="match_parent" layout_toLeftOf="panel.skin" layout_alignTop="panel.logo" layout_alignBottom="panel.logo"/>
</stackpanel>
</stackpanel>
</canvas>
運行效果：
添加上部的按鈕和edit，菜單等：
添加下部的按鈕：
添加tab，好友列表：
至此：一個QQ主面板大體已經成形
本講解demo下載（可以修改裏面的xml修改UI哦）：
商業合作方式：
優視工作室
QQ：305108678
email：[email protected]