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">
    <!--主面板的背景圖片-->

執行效果：

下面新增標題欄圖示：

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]