高仿QQMusic（2008）播放器，VS2008環境下開發，功能陸續開發中，上圖先( 右邊那個樂庫沒有啥內容，臨時弄個網頁放上去充數)
軟件UI開發方法我正在整理中，盡量探索出既簡單又功能強大的UI制作方法， 隨後會發布方法與大家討論的，最近比較忙......
[2月13日更新]
首先感謝園友對本隨筆的關注！！！！
淺談一下我關於此軟件的UI的制作方法，我的文筆不好，說話可能有點羅嗦， 諒解哈！
要想做出好看的界面，素材准備是第一步，我因為超級喜歡QQMusic的界面， 萌發了仿造它的想法。本人美工不咋好，直接用QQMusic的皮膚做素材是個不錯的 主意（安裝此軟件後找它的皮膚很簡單吧，^-^）。安裝目錄下的QQMusic2008文 件夾下都是皮膚用到的圖片。
有了素材，還要推敲QQMusic是怎麼樣把這些散亂的圖片組織起來的， QQMusic2008\Player文件夾內有個config.xml文件，我的分析就從這裡入手，看 下它的內容：
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 稍微有差異，但思想一致
<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裡的屬性的含義我將在隨後的窗體制作中順便介紹！
