高仿QQMusic播放器,浅谈WinForm关于UI的制作

最新推荐文章于 2021-05-30 21:07:55 发布

宵蓝

最新推荐文章于 2021-05-30 21:07:55 发布

阅读量290

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/airfey/archive/2009/02/12/1389026.html

版权

高仿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_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

<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

<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里的属性的含义我将在随后的窗体制作中顺便介绍！

罗嗦半天了，手头有点事，回头继续写，本文会不断更新，下次我将叙述一下如何简单利用这个图片把主窗体绘制出来，脑子有点乱，吃饭去......

转载于:https://www.cnblogs.com/airfey/archive/2009/02/12/1389026.html