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

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

1, 看看成果:

换肤前

换肤后

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

2 如何实现:

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

皮肤配置文件(点击加号展开)

<?xml version="1.0" encoding="utf-8"?>

<Image>player_skin.bmp</Image>

<Icon>

</Position>

</Icon>

<Play>

</Position>

</Play>

<Pause>

</Position>

<Iamge>pause.bmp</Iamge>

</Pause>

<Stop>

</Position>

</Stop>

<Next>

</Position>

</Next>

</Position>

</Previous>

<Mute>

</Position>

</Mute>

<Open>

</Position>

</Open>

<Eq>

</Position>

<Iamge>equalizer.bmp</Iamge>

</Eq>

</Position>

<Iamge>playlist.bmp</Iamge>

</PalyList>

<Lyric>

</Position>

<Iamge>lyric.bmp</Iamge>

</Lyric>

</Position>

</Visual>

</Position>

<Iamge>minimize.bmp</Iamge>

</MiniMize>

</Position>

<Iamge>minimode.bmp</Iamge>

</MiniMode>

<Exit>

</Position>

<Iamge>close.bmp</Iamge>

</Exit>

</Position>

<ThumbImage>progress_thumb.bmp</ThumbImage>

<FillImage>progress_fill.bmp</FillImage>

</Progress>

</Position>

<FillImage>volume_fill.bmp</FillImage>

</Volume>

<Info>

</Position>

simsong

<Align>MiddleLeft</Align>

</Info>

<Led>

</Position>

<Iamge>number.bmp</Iamge>

<Align>MiddleRight</Align>

</Led>

</Position>

simsong

<Align>MiddleLeft</Align>

</Stereo>

</Position>

simsong

<Align>MiddleLeft</Align>

</Status>

</MainWindow>

<Name>Orange</Name>

</PlayerSkin>

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

<Play>

</Position>

</Play>

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

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

2.2 如何组织窗口上的元素

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

public interface ISkinElement

{

string Name

{

get;

}

Position Position

{

get;

set;

}

ElementStatus Status

{

get;

set;

}

void Paint(Graphics g);

event SkinElementStatusChangedHandler SkinElementStatusChanged;

}

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

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

/**//// <summary>

/// 位置信息,由左上角X、Y坐标和右下角X、Y坐标组成

/// </summary>

public struct Position

{

public int Left;

public int Top;

public int Right;

public int Bottom;

public Position(int left, int top, int right, int bottom)

{

this.Left = left;

this.Top = top;

this.Right = right;

this.Bottom = bottom;

}

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

/**//// <summary>

/// 元素状态

/// </summary>

public enum ElementStatus

{

Normal,

MouseHover,

MouseDown,

Disabled

}

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

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

播放按捏(点击加号展开)

/**//// <summary>

/// 播放元素(播放按钮)

/// </summary>

public class PlayElement : ISkinElement

{

private Position position;

private string image = string.Empty;

[NonSerialized]

private ElementStatus status;

SkinElement 成员#region SkinElement 成员

/**//// <summary>

/// 获取该元素的名称

/// </summary>

public string Name

{

get

{

return "PlayElement";

}

/**//// <summary>

/// 获取或设置该元素的位置

/// </summary>

public Position Position

{

get

{

return this.position;

}

set

{

this.position = value;

}

/**//// <summary>

/// 绘制该元素

/// </summary>

public void Paint(Graphics g)

{

SkinPainter.PaintSkinElement(g, this.position, this.image, this.status);

}

/**//// <summary>

/// 获取或设置该对象的状态

/// </summary>

public ElementStatus Status

{

get

{

return this.status;

}

set

{

if (this.status != value)

{

this.status = value;

this.OnSkinElementStatusChanged(new SkinElementStatusChangedArges(value));

}

/**//// <summary>

/// 当元素状态改变时发生

/// </summary>

public event SkinElementStatusChangedHandler SkinElementStatusChanged;

#endregion

protected void OnSkinElementStatusChanged(SkinElementStatusChangedArges arg)

{

if (this.SkinElementStatusChanged != null)

{

this.SkinElementStatusChanged(this, arg);

}

/**//// <summary>

/// 获取或设置该对象对应的图片文件(相对于皮肤文件夹的相对路径)

/// </summary>

public string Iamge

{

get

{

return this.image;

}

set

{

this.image = value;

}

其它元素同理.

2.3 如何绘制元素

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

/**//// <summary>

/// 绘制普通的类似于按钮的皮肤元素。

/// 进度条、音量控制等不应该采用此函数

/// </summary>

/// <param name="g">用其进行绘制</param>

/// <param name="pos">绘制的位置</param>

/// <param name="imgPath">绘制的图片的路径（相对路径，在此之前应该确定SkinRootDir属性已经被设置）</param>

/// <param name="status">皮肤元素的当前状态</param>

public static void PaintSkinElement(Graphics g, Position pos, string imgPath, ElementStatus status)

{

ImageAttributes imgAttributes = new ImageAttributes();

imgAttributes.SetColorKey(transparentKey, transparentKey);

try

{

Image img = Image.FromFile(SkinRootDir + System.IO.Path.DirectorySeparatorChar + imgPath);

Rectangle destRect = new Rectangle(pos.Left, pos.Top, pos.Right - pos.Left, pos.Bottom - pos.Top);

int x = 0;

int y = 0;

int width = img.Width / 4;

int height = img.Height;

switch (status)

{

case ElementStatus.Normal:

x = 0;

break;

case ElementStatus.MouseHover:

x = width;

break;

case ElementStatus.MouseDown:

x = 2 * width;

break;

case ElementStatus.Disabled:

x = 3 * width;

break;

default:

break;

}

g.DrawImage(img, destRect, x, y, width, height, GraphicsUnit.Pixel, imgAttributes);

}

catch

{

}

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

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

/**//// <summary>

/// 确定在指定的皮肤元素集合中,指定的点包含在哪个元素中.

/// 如果同时包含在多个元素中,则以最内层的那个为准.

/// <para>注意:由于元素之间没有Z轴层次关系,所以不应该让两个元素处在相交却不包含的关系中</para>

/// </summary>

/// <param name="elementList">元素集合,在它们中间查找</param>

/// <param name="loc">要进行判断的点</param>

/// <returns>如果不包含在指定的任一元素中,则返回null,否则返回包含该点的元素</returns>

public static ISkinElement FindSkinElementFormPosition(List<ISkinElement> elementList, Point loc)

{

Rectangle rect = new Rectangle();

Rectangle lastRect = Rectangle.Empty;

ISkinElement res = null;

foreach (ISkinElement element in elementList)

{

rect.X = element.Position.Left;

rect.Y = element.Position.Top;

rect.Width = element.Position.Right - element.Position.Left;

rect.Height = element.Position.Bottom - element.Position.Top;

if (rect.Contains(loc))

{

if (lastRect == Rectangle.Empty || lastRect.Contains(rect))

{

lastRect = rect;

res = element;

}

return res;

}

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

private void FormMain_MouseClick(object sender, MouseEventArgs e)

{

ISkinElement element =

Helper.FindSkinElementFormPosition(this.skinMainFormElementList, e.Location);

if (element != null)

{

switch (element.Name)

{

case "ExitElement":

this.Close();

break;

default:

break;

}

2.5 局部区域更新

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

private void FormMain_MouseMove(object sender, MouseEventArgs e)

{

ISkinElement element =

Helper.FindSkinElementFormPosition(this.skinMainFormElementList, e.Location);

if (element != null &&

element.Status != ElementStatus.MouseHover &&

element.Status != ElementStatus.Disabled)

{

element.Status = ElementStatus.MouseHover;

this.UpdateSkinElement(element);

}

其中UpdateSkinElement(ISkinElement element):

/**//// <summary>

/// 更新指定皮肤元素(重新绘制皮肤的指定区域)

/// </summary>

/// <param name="element">要被重绘的元素</param>

private void UpdateSkinElement(ISkinElement element)

{

Rectangle updateRect = new Rectangle(

element.Position.Left,

element.Position.Top,

element.Position.Right - element.Position.Left,

element.Position.Bottom - element.Position.Top);

this.Invalidate(updateRect);

this.Update();

}

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

转载于:https://www.cnblogs.com/zhouyinhui/archive/2006/10/30/544132.html

软件易容术-----换肤相关推荐

【Qt样式（qss）-2】使用小结（软件换肤，比如暗黑模式）
1.背景: Qt style sheet(qss)跟前端技术一样,就是为了美化界面.关键是,太好用了.之前还为此写过一篇博客. [Qt样式(qss)-1]手册小结 [Qt样式(qss)-3]几套配色方 ...
用QT开发软件怎么实现一键换肤
QT开发软件实现一键换肤可以使用QSS样式表和QResource动态加载资源. 创建不同的QSS样式表文件,定义不同的样式. 使用QResource动态加载样式表文件. 在程序中设置当前使用的样式表. ...
Android应用换肤
换肤,我们都很熟悉,像XP的主题,塞班的主题.看过国外的一些技术博客,就会发现国内和国外对软件的,或者说移动开发的软件的需求的不同.国外用户注重社交.邮件等功能,国内用户则重视音乐.小说.皮肤等功能, ...
Qt之界面换肤的两种方式
概述像现在市面上有很多软件都有换肤功能,例如:QQ.360.迅雷等.换肤其实很简单,并没有想象中那么难,下面介绍两种实现换肤的方式,仅供参考! 方式一 1. 实现原理创建多个QSS文件首先,根据 ...
很好的 .NET 换肤软件 IrisSkin
当前.NET下提供换肤的控件有IrisSkin和DotNetSkin. 但是DotNetSkin提供的Demo版本,功能有限制,一时找不到可以破解的完全版. IrisSkin 的功能不比DotNetS ...
代码换肤术——C#和VB(摘抄)
代码换肤术(一)--C#和VB 日期:2005-6-13 16:41:00 代码换肤术(一)--C#和VB 现在流行程序"换肤术",就是把操作界面变个样子,程序当然还是原来的 ...
SkinSharp(Skin#)软件换肤库!
SkinSharp又称Skin#,是Windows环境下一款强大的换肤组件. SkinSharp作为换肤控件,只需要在您的程序中添加一行代码,就能让您的界面焕然一新,并拥有多种主题风格和色调的动态切换 ...
ActiveSkin 4.3 软件换肤
ActiveSkin是一款给软件更换皮肤的ActiveX控件.它很还好的将软件界面设计工作从繁琐程序代码编写中解放出来,使得功能设计者可以专心于功能代码的实现,而把软件界面交给美工人员处理.提高了界面 ...
.NET 换肤软件 IrisSkin 2.0 破解版下载及多款皮肤下载
当前.NET下提供换肤的控件有IrisSkin和DotNetSkin. 但是DotNetSkin提供的Demo版本,功能有限制,一时找不到可以破解的完全版. IrisSkin 的功能不比DotNetS ...

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

软件易容术-----换肤相关推荐

最新文章

热门文章