-
跟我学做
c#
皮肤美化（一）
--
概述与导航
每每看着
QQ,360
等等那些软件漂亮的外衣时，
你是不是总是在想我的软件什么时候才
能穿上这么漂亮的外衣呢？不过
现在当你看到这篇文章的时候不必再发出这样的疑问了，
因
为接
下来我会带领大家一步一步
”
画出
”<
/p>
这些漂亮的外衣！
在写这系列文章之前
要感谢博客园的苏飞，
我也是看来他的文章后才开始接触皮肤的制
作的！
我写的这系列文章中有和苏飞相同的地方，
也有不同的
地方。
还有因为我想使这个系
列的文章能使刚刚接触皮肤编程的
初学者都能跟着我一步一步的实现皮肤的制作，
所以我会
讲解的
很详细很详细。
呵呵，
不知道这点算不算和苏飞大哥的一点小小
的区别呢？！
另外我
写的这一系列暂时还不会包括换肤功能在里
面，
而且控件的健壮性，
功能的全面性上也可能
有不足的地方，
希望大家包涵，
毕竟我也是刚刚接触皮
肤制作这一方面的内容，
写的不好或
者难免有一些错误的地方还
请大家包涵。
当然，
如果大家有好的建议或者是想和我交流这方
面的内容，我也很乐意。我的邮箱
qianlf2008@
接下来所有的控件我都会编写在一个用
户控件库
QLFUI
中，
以后的软件中
想要应用这些
皮肤只要简单的继承或者使用控件就是了。
整个控
件库可以简单的分成两大类
：
用户控件类
和窗体类
。用户控件类就是普通的用户控件比如说
Butto
n
控件，让其不再单调！窗体类就
是写一个带有皮肤的窗体，以
后其他的窗体只要继承一下就会自动带有了皮肤（多方便）
。
说了这么多还是先让大家看看最终做出来的效果图吧！
以后我讲解的内容大体是这个样子的：
（因为时间原因可以会有有一
些控件会增加或减少，
不过我会尽量都讲解全的）
控件类：
---Button
控件的制作
---CheckBox
控件的制作
---RadioButton
控件
的制作
窗体类：
---MainForm
窗体的制作
(
只要继承这个窗体基本上就能披上
最简单的外
衣了
)
本文归
qianlifeng
和如鹏网所共有，装载请注明出处，谢谢！
跟我学做
c#
皮肤美化（二）
--Button
控件的制作
概述与导航
先来看看我们最终要做的效果图（分别对应普通、悬停、按下时的状态）
：
下面就开始正式做。首先让我们新建一个控件库项目，命名为
QLFUI
。如图：
然后将
默认的
UserControl1
重命名为
Button
。接下来，我们就要在这上面来做文章了。
先来稍稍设置一下，让这个用户控件看起来更像一个按钮吧！
Button
的
Size: 78,30
Back
groundImageLayout:Stretch
然后
拖一个
label
控件到这个用户控件上，并设置
label1
的属性为
AutoSize:false
,
Dock:fill
,
TextAlign:MiddleCenter,
BackColor:
Transparent,
Font:
宋体
, 9pt
这几个属性。好了，是不是开始像一个按钮了呢？
哦，
差点忘了最后还要将整个控件（
BUTTON
）的背景色设置为
Tra
sparent
透明色
。因为如
果不设
置成透明色那么透明的图片下面就会显示出
button
的背景
色（默认灰色）
，不好看。
好了，现在样子的已经大概有了，接
下来就是编程了。先贴代码，然后我一个一个解释：
[
DefaultEvent
(
)]
public
partial
class
Button
:
UserControl
{
#region
变量
//
三种不同状态下的图片
Image
_normalImage =
null
;
Image
_moveImage =
null
;
Image
_downImage =
null
;
#endregion
#region
属性
[
Category
(
)]
public
Image
NormalImage
{
get
{
return
_normalImage;
}
set
{
_normalImage =
value
;
}
}
[
Category
(
)]
public
Image
DownImage
{
get
{
return
_downImage; }
set
{
_downImage =
value
;
}
}
[
Category
(
)]
public
Image
MoveImage
{
get
{
return
_moveImage; }
set
{
_moveImage =
value
;
}
}
[
Categor
y
(
)]
public
string
Caption
{
get
{
return
this
.; }
//
控件运行时会自动运行
get
方法得到值
set
{
this
. =
value
;
}
}
#endregion
#region
构造函数
public
Button()
{
this
.SetStyle(
ControlStyles
.All
PaintingInWmPaint |
ControlStyles
.OptimizedDoubleBuffer,
true
);
//
默认的是自带的图片样式，
如果使
用该按钮则必须手工指定当前
按钮你想要的背景图片
_normalImage =
I
mage
.FromStream(
Assembly
.GetExecutingAssembly().GetManifestResource
S
tream(
@
));
_moveImage =
Ima
ge
.FromStream(
Assembly
.GetExecutingAssembly().GetManifestResourceS<
/p>
tream(
@
));
_downImage =
Ima
ge
.FromStream(
Assembly
.GetExecutingAssembly().GetManifestResourceS<
/p>
tream(
@
));
MakeTransparent(_normalImage);
MakeTransparent(_moveImage);
MakeTransparent(_downImage);
InitializeComponent();
this
.BackgroundImage =
_normalImage;
}
#endregion
#region
辅助函数
private
void
MakeTransparent(
Image
image)
{
Bitmap
bitmap = image
as
Bitmap
;
ansparent(
Color
.FromArgb(255
, 0, 255));
}
#endregion
#region
事件
private
void
label1_MouseEnter(
object
sender,
EventArgs
e)
{
this
.BackgroundImage =
_moveImage;
}
private
void
label1_MouseDown(
object
sender,
MouseEventArgs
e)
{
this
.BackgroundImage =
_downImage;
}
private
void
label1_MouseLeave(
object
sender,
EventArgs
e)
{
this
.BackgroundImage =
_normalImage;
}
private
void
label1_MouseUp(
object
sender,
MouseEventArgs
e)
{
this
.BackgroundImage =
_normalImage;
}
private
void
label1_Click(
object
sender,
EventArgs
e)
{
this
.OnClick(e);
}
#endregion
}
先看第一句
：
[
DefaultEvent
(
)]
，这句话是什么意思呢？我们知道平常我们拖一个按
钮后，
在设计模式下
双击这个按钮就会自动产生这个按钮的
Click
事件。
这个默
认的
Click
事件从哪里来的呢，毫无疑问就是
[
DefaultEven
t
(
)]
这一
句
来设置的啦！
这里默认的是
Clic
k
事件，
如果写成
[
< br>DefaultEvent
(
)
]
就是
MouseEnter
事件啦！
接下来的四句分别定义了按钮三种不同状态下的
bitmap
。
下面的四
个属性分别是三种不同状态下
Image
的属性和按钮的文字属
性
Caption,
大家一看应该就明白。
具体要解释的就是
[
Category
(
)]
。
这句话的
意思是将这些属性分类，看个图片大家就都明白了
:<
/p>
以后在项目中设置属性时，
我们定义的属性就自动分类在
QLFSkinDll
下面了。
接下来是构造函数：
public
Button(){}
中的内容
。
<
/p>
第一句是开始了窗体的双缓冲。
双缓冲的意思就是现在内容中将图
像画好了然后
再显示到界面上去。在
c#
中图像一多最怕的就是图像闪烁的问题，开启了双缓
冲虽说不能完全避免图像闪烁，但
起码也能有一定的效果，我们就先开着吧
^
^
！
接下来
的三句就是给三个状态的图像赋值了，
这里我是把图像嵌入进来了，
并没
有放置在外部。要应用嵌入的资源分两步走：第一步在项目中点击图片的属性，
然后将“生成操作”改为嵌入的资源。第二步应用就是我们用到的代码啦：
Assembly
.GetExecutingAssembly().Ge
tManifestResourceStream(
@
.
)
，这句话前面的照写，后面的路径规则是“命名空间
+
文件夹名
+
你的文件名<
/p>
+
文件名后缀”
，
当然如果你的文件直接放在项目下就没有
文件夹名了。
聪明的
大家应该明白吧？呵呵！
其中我们要用到的文件大家可以从
我给
的项目例子中复制。接下来的
MakeTransparent(_normalIma
ge);MakeTransparent(_moveImage);MakeTranspa
rent(_downImage);
三句先不看，可以注释掉，下面会讲解它
的作用的。
第八句
Initiali
zeComponent()
是系统自带的初始化控件一些代码，
我们不用去
管它。最后一句
this
.BackgroundImage = _normalImage;
就是设置按钮的
其实
的图片的样子啦！
好啦，
写了这么久，
咱们还是先来看看能运行出个什么样子出来吧！
看看目前的
状态下，它离我们的目标还差多远！见图：
< br>
从图中我们可以看到明显的一个问题，
就是按钮的边缘有粉红色。
而且如果你也正好做到这
里也会发现鼠标经过按钮时，按钮没有任何反应（废话，我
们还什么都没做呢）
。
好了，接下来
就有目标了，解决这两个问题我们这个按钮美化的就差不多了！
先来解决第一个问题，去掉粉红色。我们需要用到
Bitmap
的一个函数
MakeTransparent(Color),
这个函数的作用是使指定的颜色对
Bitmap
透明。也
就是说我们只要将这个函数的
Color
设置为我们需要去掉的粉红色不就行了
?!
继续看代码，我
们先写一个函数
private
void
MakeTranspar
ent(
Image
image)<
/p>
，
这个函数的作用就是将传进来的图片的指定的颜色进行透明处理
。
函数里就两句
话，第一句话先将
Im
age
转为
Bitmap
。第二句话就
是进行透明处理，这里的
Color
.FromArgb(25
5, 0, 255)
就是我们要去的粉红色啦。那什么时候进行去色
< br>呢？毫无疑问，
当然是在给三种状态赋值后紧接着就去色啦！
所以
我们在构造函
数中的
5,6,
7
句加上透明处理。
(
倒过来讲这个作
用，
大家习惯不习惯呢？
)
好了，
现在我们再来运行一下：看图：
呵呵，
正
如预料的那样，
粉红色没有了
（图中的灰色其实是透明的，
只要在另外一个项目中
引用一下就知道了）
，第一个问题解决！
再来看第二个问题，
要实现按钮的变色肯定是跟鼠标的事件相关啦，
比如说鼠标一进入按钮
的范围之内我们就让按钮的背景改变，
按下和离开按钮的时候也响应的改变背
景。
所以我们
用到这四个事件（注意，事件都是
label1
的事件，因为我们将
label
覆盖在按钮上，所以我
们点击的其实是
labe
l1
）
：
MouseEnter
，
MouseDown,
MouseLeave,
MouseUp
。具体的
事件里面执行的代码也很简单，
就是更换按钮的背
景图片。
好了，
让我们再运行
一下看看
效果：
OK!
两
个问题都解决了，我们的按钮运行的好像也很正常！鼠标进入，移出，按
下的时候也会变
换背景！
但是，
如果你另外建一个项目，
并双击产生点击事件并
编写相应代码时就会发现点击事件没作用了。
< br>多么郁闷的一件事情啊，
点击事件
都没作用了，
我们还要这个按钮干嘛啊！
别急，
让我们来解决
它。
首先要明白的
就是我们在其他项目中引用的这个的
button
控件的点击事件是整个用户控件的
点击事件（还记得我们在整个
button
类的上方设置了默认
的点击事件吗？），
而当我们去点击按钮时我们实际点击的只是
label1
。问题很明了了，我们点击
的是
< br>label1
，设置的却是整个用户控件的事件，当然触发不了事件了。既然问<
/p>
题已经搞明白了，下面就去解决它。
继续看代码：
既然我们点击的是
label1
那么我们就在
label1<
/p>
的点击事件中做文章，
如代码所
示，我们
在
label1
的点击事件中触发了整个类（
< br>this
）的
onclick
事
件，然后
这个
onclick
会去找相
应的类的
click
事件，
就是我们在
其他项目中直接双击的
那个事件啦！
OK
，至此这个按钮空间的美化就做好了看看效果吧！
本文归
qianlifeng
和如鹏网所共有，转载请注明出处，谢谢！
跟我学
做
c#
皮肤美化（三）
--CheckBox
控件的制作
概述与导航
先看最终的效果图：
或许大
家已经猜出来我这个
checkbox
是怎么实现的吧？不错，
就是前面的框是
一个图片，后面的文字是
label
。经过前面
button
的讲解我想有能力的人完
全
可以单独制作出来。还不熟悉的现在就开始跟我一步一步的来吧！
GO
。。。
< br>打开上次的项目
QLFUI,
新建一个名为
CheckBox
的用户控件。如图
同样的，我们先设置一下，使其看起来像一个
checkbox
。具体设置如下：
CheckBox
控件，
Size:70,13
MinimumSize:70,13 BackColor:Transparent
然
后拖一个
picturebox
并设置以下属性：
Size:13,13 Location:0,0
,
BackgroundImageLayout:Stre
tch
再拖一个
label
上来设置以
下属性：
AutoSize:false
Location:15,0 Size:50:13
最终应该是这个样子：
好了，
样子有了接下来就是编码了！
还是一样，
先贴代码，
然后我一句一句
解释：
【代码】
CheckBox
类的开头我定义了
四个
image
的变量用来分别表示选中和未选中状态
下鼠标的移进移出的图像！接下来的
bool check
变量就是代表该控件是否已经
被选中（
checkb
ox
最重要的属性就是这个了吧？！）。
接下来，
就是
2
个属性了，
我代码里面也注释的很清楚。
这里只有两个地方需要
< br>解释一下
:1, [
Description
(
显示的文字
)]
是干什么的？看图你就明白了
，
这下明
白了吧
?
对，就是用来解释你这个属性的（别人用你的控件都不
知道什么
意思，我们当然要适当的注释一下啦）
!
第二点要注意的就是，在设置
Checked
这个属
性的时候要注意更换图片，
选中和不选中的时候的图片不同！
其
他的属性
我想大家经过
button
控
件的讲解已经能很容易看明白里面的内容了。这里就不
再罗嗦了。
接下来看构造函数。
第一句
le<
/p>
我就不说了，不懂可以看
button
里
面的讲解。
接下来的六句话就是得到四种状态下的图片了，
不过得到的好像不是
很简单！这是因为我们的原始图片是这样的
看见没有，图片是画在一张图片中的，
所以我们需要使用
bitmap
的
cl
one
函数
将不同矩形区域下的图片给截取出来。
这样解释大家应该明白了
Clone
的意思了
吧。剩下的两句不罗嗦了，和
button
里
面的一样。
接下来该做什么呢，根
据制作
button
控件的经验，我们就该
开始编写鼠标的各
种事件
了，并在这些事件中处理不同的背
景。开始。。。
-
-
-
-
-
-
-
-
-
上一篇：51单片机C语言变量定义
下一篇：英文版实习证明