软件易容术-----换肤

                                      软件易容术-----换肤
                                                      电子科技大学03级02班 周银辉

1, 看看成果:

换肤前


换肤后


(说明: 这里仅仅借用的是"千千静听"中皮肤包中的图片, 本示例程序中的皮肤包文件格式以及换肤方案均为作者原创)

 

2  如何实现:

2.1 皮肤配置文件:
在研究如何实现换肤之前,应该仔细看看以下XML文件,它是皮肤配置文件,由它来组织皮肤包中的图片并告诉软件如何来绘制皮肤:

>

很明显地,该配置文件中规定了皮肤中的各个元素的位置大小等相关信息. 比如:

   <Play>
      <Position>
        <Left>164</Left>
        <Top>39</Top>
        <Right>183</Right>
        <Bottom>58</Bottom>
      </Position>
      <Iamge>play.bmp</Iamge>
    </Play>

规定的"播放"按钮在主窗口中的位置以及其对应的图片.

很简单地,我们只要解析该XML文件并将其对应的图片绘制在指定的位置就可以了(当然此时还只是视觉上的,因为按钮还有事件等,稍后讨论)

2.2 如何组织窗口上的元素

"窗口上的元素"指的是窗口上的"按钮","滚动条"等. 注意:它们不是"Button" "ScrollBar"等控件,它们只是在指定位置上的图片,并响应相应事件)
为更好地组织各个元素,我们设计了一个"皮肤元素接口",让所有元素都实现该接口:

public interface ISkinElement
    }

其中
Name表示该元素的名称.

Position规定了该元素的大小和位置,它是这样一个结构:

    }

Status表示该元素的当前状态,它是这样一个枚举:

    }

void Paint(Graphics g)是该元素的绘制函数
event SkinElementStatusChangedHandler SkinElementStatusChanged;是该元素状态发生改变时所引发的事件.

然后,比如"播放"按钮,就可以是如下的一个类:

其它元素同理.


2.3 如何绘制元素

以按钮为例:
一张按钮图片由四部分组成 , 它分别代表按钮的不同状态(Normal,MouseEnter,MouseDown, Disable), 我们只需要根据按钮的当前状态切取图片的不同部分并绘制在指定位置上便可.比如:

2.4 如何响应键盘鼠标等事件

以鼠标事件为例:
其实皮肤上的元素并没有这些事件,我们只是当用户点击主窗口时,根据鼠标点击的位置来确定点击在了哪个元素指上,并引发该元素所对应的事件.
查找鼠标点击的元素:

比如，我们鼠标点击落在"关闭"元素内时,将关闭窗口:

 private void FormMain_MouseClick(object sender, MouseEventArgs e)
        }

2.5 局部区域更新

比如鼠标移动到"播放"按钮上时,其状态将转换为"MouseEnter",将重新绘制该按钮以响应鼠标.此时只需要更新该按钮所对应的区域便可:

 private void FormMain_MouseMove(object sender, MouseEventArgs e)
}

其中UpdateSkinElement(ISkinElement element):

        }

3 DEMO下载:
https://files.cnblogs.com/zhouyinhui/Pastime.rar