高仿QQMusic（2008）播放器，VS2008環境下開發，功能陸續開發中，上圖先(右邊那個樂庫沒有啥内容，臨時弄個網頁放上去充數)
軟體UI開發方法我正在整理中，盡量探索出既簡單又功能強大的UI制作方法，随後會釋出方法與大家讨論的，最近比較忙......
[2月13日更新]
首先感謝園友對本随筆的關注！！！！
淺談一下我關于此軟體的UI的制作方法，我的文筆不好，說話可能有點羅嗦，諒解哈！
要想做出好看的界面，素材準備是第一步，我因為超級喜歡QQMusic的界面，萌發了仿造它的想法。本人美工不咋好，直接用QQMusic的皮膚做素材是個不錯的主意（安裝此軟體後找它的皮膚很簡單吧，^-^）。安裝目錄下的QQMusic2008檔案夾下都是皮膚用到的圖檔。
有了素材，還要推敲QQMusic是怎麼樣把這些散亂的圖檔組織起來的，QQMusic2008\Player檔案夾内有個config.xml檔案，我的分析就從這裡入手，看下它的内容：
Code
1
<?xml version="1.0" encoding="gb2312" ?>
2
<theme version="1.0">
3
<Window width="290" height="360" minWidth="290" maxWidth="2048" minHeight="100" maxHeight="2048" clippingColor="#FF00FF" style="hard" >
4
<Picture id="Pic_BG_Left" image="..\Common\mainboard.bmp" x="5" y="23" w="92" h="123" zIndex="0" left="0" top="0" width="92" height="123" relative="lt" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
5
<Picture id="Pic_BG_Mid" image="..\Common\mainboard.bmp" x="98" y="23" w="5" h="123" zIndex="0" left="92" top="0" width="76" height="123" relative="ltr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
6
<Picture id="Pic_BG_Right" image="..\Common\mainboard.bmp" x="103" y="23" w="122" h="123" zIndex="0" left="168" top="0" width="122" height="123" relative="tr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
7
8
<Picture id="Pic_SearchLeft" image="..\Common\Search.bmp" x="0" y="0" w="15" h="21" zIndex="0" left="8" top="6" width="15" height="21" relative="lt" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
9
<Picture id="Pic_SearchMid" image="..\Common\Search.bmp" x="15" y="0" w="10" h="21" zIndex="0" left="23" top="6" width="180" height="21" relative="ltr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
10
<Picture id="Pic_SearchRight" image="..\Common\Search.bmp" x="25" y="0" w="15" h="21" zIndex="0" left="203" top="6" width="15" height="21" relative="tr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
11
12
<Button id="Btn_Search" transparentColor="#FF00FF" left="195" top="7" width="23" height="20" relative="tr" zIndex="0" visible="true" disabled="false" toolTip="搜尋">
13
<Normal image="..\Common\SearchBtn.bmp" x="0" y="0" w="23" h="20" />
14
<Over image="..\Common\SearchBtn.bmp" x="23" y="0" w="23" h="20" />
15
<Down image="..\Common\SearchBtn.bmp" x="46" y="0" w="23" h="20" />
16
<Event OnClick="1041" />
17
</Button>
18
</Window>
19
</theme>
這裡我隻截取了主視窗以及該視窗上幾個按鈕的XML組織。<Window width="290" height="360" minWidth="290" maxWidth="2048" minHeight="100" maxHeight="2048" clippingColor="#FF00FF" style="hard" >
這裡定義主窗體的寬、高等屬性，以下定義主窗體的背景圖的屬性
<Picture id="Pic_BG_Left" image="..\Common\mainboard.bmp" x="5" y="23" w="92" h="123" zIndex="0" left="0" top="0" width="92" height="123" relative="lt" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
<Picture id="Pic_BG_Mid" image="..\Common\mainboard.bmp" x="98" y="23" w="5" h="123" zIndex="0" left="92" top="0" width="76" height="123" relative="ltr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
<Picture id="Pic_BG_Right" image="..\Common\mainboard.bmp" x="103" y="23" w="122" h="123" zIndex="0" left="168" top="0" width="122" height="123" relative="tr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
mainboard.bmp圖檔如下：
上面XML裡的具體屬性我們可以不理會，隻需要明白這是把圖檔按照左上角為坐标原點分成Pic_BG_Left、 Pic_BG_Mid、 Pic_BG_Right三部分，将來我們在做窗體時将用這三部分作為窗體左、中、右的背景。
Pic_BG_Left和Pic_BG_Right這兩塊是包含鈍角背景的，終于明白QQ軟體裡的窗體為什麼都是明顯差別于普通軟體的矩形窗體了。
當然我們不需要完全照搬QQ軟體裡的XML内容，我們自己定義XML時隻需要把所取圖檔的坐标位置、寬度、高度、左距、右距、是否透明這些屬性寫上，随後我們按照自己定義的規則順序讀取出來供使用就OK了，所謂兵無定勢也。
下面我把自己制作的XML配置檔案裡主窗體的代碼帖出來，和QQMUSIC裡的XML稍微有差異，但思想一緻
Code
<player_window name="音樂盒Beta" transparent="Transparent" frontcolor="-11698270" x="20" y="20" w="314" h="147" icon="Logo.png">
<window x="0" y="0" w="50" h="106" image="mainboard.bmp" direction="top_left" dx="0" dy="0"/>
<window x="50" y="0" w="70" h="106" image="mainboard.bmp" direction="top_middle" dx="0" dy="0"/>
<window x="120" y="0" w="109" h="106" image="mainboard.bmp" direction="top_right" dx="0" dy="0"/>
<window x="0" y="106" w="50" h="37" image="mainboard.bmp" direction="left" dx="0" dy="0"/>
<window x="120" y="106" w="109" h="37" image="mainboard.bmp" direction="right" dx="0" dy="0"/>
<window x="0" y="143" w="50" h="25" image="mainboard.bmp" direction="bottom_left" dx="0" dy="0"/>
<window x="50" y="143" w="70" h="25" image="mainboard.bmp" direction="bottom_middle" dx="0" dy="0"/>
<window x="120" y="143" w="109" h="25" image="mainboard.bmp" direction="bottom_right" dx="0" dy="0"/>
</player_window>
此XML裡的屬性的含義我将在随後的窗體制作中順便介紹！
羅嗦半天了，手頭有點事，回頭繼續寫，本文會不斷更新，下次我将叙述一下如何簡單利用這個圖檔把主窗體繪制出來，腦子有點亂，吃飯去......