别人是说了再做，我是做了再说；别人说了不一定做，我是做了不一定说。

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

高仿QQMusic（2008）播放器，VS2008环境下开发，功能陆续开发中，上图先(右边那个乐库没有啥内容，临时弄个网页放上去充数)



软件UI开发方法我正在整理中，尽量探索出既简单又功能强大的UI制作方法，随后会发布方法与大家讨论的，最近比较忙......

[2月13日更新]

首先感谢园友对本随笔的关注！！！！

浅谈一下我关于此软件的UI的制作方法，我的文笔不好，说话可能有点罗嗦，谅解哈！

要想做出好看的界面，素材准备是第一步，我因为超级喜欢QQMusic的界面，萌发了仿造它的想法。本人美工不咋好，直接用QQMusic的皮肤做素材是个不错的主意（安装此软件后找它的皮肤很简单吧，^-^）。安装目录下的QQMusic2008文件夹下都是皮肤用到的图片。

有了素材，还要推敲QQMusic是怎么样把这些散乱的图片组织起来的，QQMusic2008\Player文件夹内有个config.xml文件，我的分析就从这里入手，看下它的内容：

Code

这里我只截取了主窗口以及该窗口上几个按钮的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

此XML里的属性的含义我将在随后的窗体制作中顺便介绍！

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

 

 

posted @ 2009-02-12 13:57  碧血黄沙-java、c#  阅读(7608)  评论(53)  编辑  收藏  举报