|
|
还是先看看最终的效果图(和QQ登陆中的输入框效果差不多)：
8 S0 p/ _# T) C5 Q, C) Z* U
/ G! W; n0 e+ g/ P
$ Q# |, C d0 C* T4 O5 G& d: F: X
效果说明： 1.实现了水印的效果 2.实现了鼠标移上去的时候周围产生辉光 3.输入前端可以设置图片
9 X B/ t5 O! [- c* N 实现辉光效果
. Z0 `2 Y: n2 w- d$ z0 U 整体说明：
; Y0 ^, T( X. p! w; q: A 前面显示的那个图片我采用的是一个picturebox，当然如果你愿意也可以自己画(后续的“button再探讨”中就采用的是自己画的方式)。图片后面的输入文本框采用的是textbox控件，这样一来就避免了许多绘制textbox的麻烦(我一开始打算自己绘制用户输入的字符的，不过发现不理想)。然后边框和辉光都是画出来的。* Z8 ^5 R, H/ @* ~
具体实现：
; w. i5 `9 G: L) m1 z- u2 L 先抛开水印不说。最重要的就是重写的OnPaint方法，如下：* ' K. O+ o1 r& v' Z0 o3 T, N
protected override void OnPaint(PaintEventArgs e)( B9 c$ d1 t$ ]
{
( A" V- p" i! |) E. X3 Y% Z% ]! ^ Graphics g = e.Graphics;
7 U: A0 T3 W) w g.InterpolationMode = InterpolationMode.HighQualityBicubic;1 O5 F7 l& ?7 n$ n+ X* ^
g.SmoothingMode = SmoothingMode.HighQuality;
, ]( f% d, U Z+ B! b9 I2 W
* I' B, {. z: j CalculateSizeAndPosition();# o, @/ {$ d! [# J8 N$ }, d u
Draw(e.ClipRectangle, e.Graphics);. |% S) u5 o% {3 P5 r
! V1 r/ J" z2 e9 q; q base.OnPaint(e);" Y* T* f+ # ?+ W1 C$ X! k
}4 s3 V0 |8 v5 C3 z9 Z6 K; G2 Y
$ N: ^9 I) f# t
+ u% v: z* u( X$ X3 i 可以看出里面调用了两个方法，做过前面窗体换肤的可能对这个不陌生。就是绘画之前计算好所有的位置大小信息，然后再调用draw画出来。那么这次的calculateSizeAndPosition又做了什么呢?2点!1.判断是否有前端图片需要显示，2.判断是否处于multiline模式。代码如下：
2 Y: ]* @8 s/ I7 G/ D r" u$ `2 x8 g; Jprivate void CalculateSizeAndPosition()+ y" h2 B4 y( w1 u; V
{
1 c5 7 J Q* x, i, a& k4 D% L if (ForeImage !=1 t% R( h9 k9 k( C; ]7 m$ [' T
null), ) _8 K; x6 ?; r; g
{
2 ~0 G8 ; ^0 u6 c. f4 _" J //图片大小固定为16- l' K3 l/ v& B' M
pic.Height = pic.Width =, H: x) D: s+ M8 a/ w5 U& @
16;
1 w$ O; b' $ q; C8 P, v2 U pic.Top = pic.Left =
o" n& Y3 g) u- P3;% b) } B) ]% b b
txt.Width = Width - pic.Width -
, + q( u) V, w) s12;
# R; ?# P) v4 Y- b txt.Location =; g7 s+ O% ^/ Y3 y) A
new Point(16
5 o8 p2 C& f7 ]" d+& F* |) ( |&
3
4 r2 a( b9 q9 R6 ]9 g++ x0 y% E; N" [1 a
3, 6);
: ^) b+ ?9 G, r3 ]1 Q# I7 H }! y# Q. o+ w' d. L8 Q2 O( U
else
8 [ P! i) j4 ?7 ~" K {# q4 ?7 ~" R# ?1 |7 W) V( v$ s
pic.Left =9 ^1 h8 `/ N7 W
-40; //隐藏图片
* O# R% O0 8 w7 u _ txt.Width = Width -
: [' J. T/ K6 K8 x0 D: O9;
# m8 T1 Y' S4 K* A% A txt.Location =& d" W$ G4 C% i: g! j" h% H
new Point(3, 6);9 r! _# _* ~1 O, a5 _9 G" U
}
; s) x/ N# h; W: S ^
+ g5 J) d x% - f8 _5 K3 V( j1 V //单行
; f- S( Q; ; H, y# q# f if (!txt.Multiline); n' C& N* F- F& u; F9 v
{6 V; J0 |. K3 x/ [3 o$ t" C
Height = txt.Height +
8 k8 |+ W( N8 X9;
) Z R8 C& X& V6 H9 B! z% }5 Z7 Q+ k }
9 r0 w/ X2 w9 M8 c* 6 b5 V( }% E else
$ y I d) t; y1 t; J/ O {6 I- q3 |! f/ F. _
txt.Height = Height -; b9 Q1 |) a( @3 J0 t: v
9; //如果是多行则设置实际里面的输入文本框的高度
* O/ o, j w0 M0 Y2 t }
- O0 S! a# n6 z" ^3 E }
6 g: H. L! ?* ~
1 o, E& @8 U: X( _2 G6 S( h: y2 q3 l+ `, J1 v
当所有的东西都计算好了，我们就可以安心的拿起我们的画笔竟然绘画了。先画什么?再画什么?请看代码：8 j- M8 d3 U$ A" j2 ]. x& D
private void Draw(Rectangle rectangle, Graphics g)
: E6 [: h& ^/ a! h {' r: R. i8 c" w5 y6 J$ p
8 L/ {+ z/ Y' i; d4 g8 C; g #region 画背景
H" R1 w( K7 [5 `6 N& ^ using (SolidBrush backgroundBrush =
% y$ q. ^9 u/ G+ l) J) i% o; ]new SolidBrush(Color.White))
/ I9 c; @+ g# `. i: V2 E {. B* s" Z5 R/ g' G
g.FillRectangle(backgroundBrush, 2, 2, this.Width -
! I; X* @5 d4 r$ T5, this.Height -4);
- u, l/ z( k: e, Z2 M* h% a }6 O9 O& ]% y# x3 j
#endregion0 q4 Q) L* K$ o% |
: M$ h' n7 f3 g #region 画阴影(外边框)0 i4 C; r2 `- D: |( y3 S1 a
; Q" T1 ^* Y0 }# j8 m* w# y
Color drawShadowColor = _shadowColor;( h2 Y5 M7 ^2 N% G' u4 h7 m- I
if (!_isFouse) //判断是否获得焦点
% k% Z ~6 P' D {
5 g; ^ Y2 O* U7 K! ^ drawShadowColor = Color.Transparent;* U3 o1 _( ~* M" i# p" % @; E. ?
}$ }, n2 Z$ z* O0 K& k5 t7 i9 I
using (Pen shadowPen =- d0 }4 X6 V! o/ I6 d: `& }
new Pen(drawShadowColor))1 H2 {/ D* t& ?
{) R9 W% Z! q5 Z1 v" f, D, M
if (_radius ==3 P/ l! B5 W! x6 e
0)
5 j8 q9 S B t7 ?' |( l* V {0 P. Q d+ l5 x! ~
g.DrawRectangle(shadowPen, new Rectangle(rectangle.X, rectangle.Y, rectangle.Width -; p4 E+ s0 K* G1 @$ |
1, rectangle.Height -/ |* Q( Q" R* k) Y
1));
; G# B1 v0 {/ j Y I( K1 F& q0 K }
. {1 R3 l2 Q" Y else1 f# C9 Q% R; X V
{
8 i% n- p( M! l1 w- `+ H" R% q g.DrawPath(shadowPen, DrawHelper.DrawRoundRect(rectangle.X, rectangle.Y, rectangle.Width -
3 g- J. l1 b5 M) X) L5 X. G% Y2, rectangle.Height -3 n! }. u6 c, e+ u" ; i2 u
1, _radius)); I, Z2 M3 r8 Y# @
}
$ U6 f' h) A/ f8 a }
5 I0 s1 P) K+ E4 ]$ T1 S: y: c #endregion
# ^7 _ d8 [' E5 }- a- k) @! D# o7 k! y
#region 画边框
. m/ H7 g5 f2 U; X) M. p* k# I using (Pen borderPen =
/ K" Z1 Y) [4 y1 ^% ?8 Pnew Pen(_borderColor))/ v8 t' } _8 w; Y% ]% U
{
0 V0 P/ F( J/ l! L! a, A& w if (_radius ==2 k0 ~% H5 x. f7 F2 r
0)* q& S( M& m& }
{- I! o/ I1 P- d3 E
g.DrawRectangle(borderPen, new Rectangle(rectangle.X +
% J# N$ Q6 ?3 K% c0 g& C+ ]; h) i4 H3 B1, rectangle.Y +
8 k: d" 2 J* }. W7 s3 O9 A. ~- t1, rectangle.Width -" T C& [# }+ }$ w% i k
3, rectangle.Height -; g, f5 P& O# f3 {3 V; _$ k
3));5 C* R* X; h0 t
}
# K2 U/ S, x m, X" y2 a else
% q; U! c& d4 K. f {
1 X9 P" O: y* b. _ g.DrawPath(borderPen, DrawHelper.DrawRoundRect(rectangle.X +% X, W! Z' n+ V7 i' c# [; d/ p
1, rectangle.Y +9 O( f' F) |$ ?6 c4 J. v
1, rectangle.Width -4 R" u. D0 h) ?
3, rectangle.Height -
- ^8 ^% `; N) B3 G2, _radius));
4 3 t: y+ G/ S! S9 U) m$ f% B+ G5 K- h }
- L4 f0 z4 J5 {3 K( P }5 z) g G4 A; k O. g
#endregion
- s5 `7 o3 {/ @7 g! ~8 k( _ }* v C9 g0 U0 v2 u d
) N% R) M! E- @' t9 l2 ~ U. ^
" N8 Z4 t9 r" G2 R! F, t, S9 ~
在这个方法里面主要画了三个东西，大家看注释也知道了，分别是：背景，边框，辉光。要注意的就是这里面的微小距离要设置好，我也改了好几次才设置正确。在画边框和辉光的时候，因为实现了圆角边框所以要对圆角度进行判断。5 _# I" o, t8 O! O
现在绘画的方法也做好了，接下来就是出发重绘的事件了。不然它也不会自动帮你绘画啊^_^。显然当鼠标移上去和移出去的时候需要重新绘画。那我们就在下面几个方法中引发重绘事件：5 B0 U) R- O$ B* d* K
private void TextBoxEx2_MouseEnter(object sender, EventArgs e)8 N+ s! q( @6 P1 D
{
& m+ g! L& m4 v" R& _4 Y) t _isFouse =
! n! j( i1 I: X" I1 dtrue;+ k) J: ~$ c( q* A8 ?
this.Invalidate();
$ u- l9 A% j- * D( w }" G+ r; `0 A6 ~, y) c" W8 M
& Z) i' i( C( N; h7 p* Y0 R private void TextBoxEx2_MouseLeave(object sender, EventArgs e)( X) x3 _# P6 }' S2 _
{
/ Y# r; n9 y- {; E3 V9 K _isFouse =" l* K" ^ f3 T) C' m
false;0 w& S U; [) B7 ?" u( i+ c7 _6 b3 c
this.Invalidate();' z) x8 f$ L9 p% T7 M- B
} K2 j2 q" |# P
) [* k4 m0 t3 W# J' b
7 _' J0 {1 x$ Q1 k2 a5 {0 p
代码很简单，不解释。5 `1 e# [1 v& B+ U1 { c
基本上面的做好了，大部分就完成了。下面我们完成水印的功能。至此，textbox美化讲解完毕，希望对你有帮助 |
|
窥视卡
雷达卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡