概述,大家都知道我们在开发web项目的时候为了加载数据的时候我们中间可能出现等待的时间,所以在这段时间中我们为防止用户误操作别的按钮我们会加载透明的遮罩层意识遮挡操作界面组织用户操作,二是给用户一个提示避免造成误解。
首先,我们要新建一个组件类,来实现我们的透明这罩层,如下代码:
1: namespace FlexGridLoading
2: {
3: /// <summary>
4: /// 自定义控件:半透明控件
5: /// </summary>
6: /*
7: * [ToolboxBitmap(typeof(MyOpaqueLayer))]
8: * 用于指定当把你做好的自定义控件添加到工具栏时,工具栏显示的图标。
9: * 正确写法应该是
10: * [ToolboxBitmap(typeof(XXXXControl),"xxx.bmp")]
11: * 其中XXXXControl是你的自定义控件,"xxx.bmp"是你要用的图标名称。
12: */
13: [ToolboxBitmap(typeof(MyOpaqueLayer))]
14: public class MyOpaqueLayer : System.Windows.Forms.Control
15: {
16: private bool _transparentBG = true;//是否使用透明
17: private int _alpha = 125;//设置透明度
18:
19: private System.ComponentModel.Container components = new System.ComponentModel.Container();
20:
21: public MyOpaqueLayer()
22: : this(125, true)
23: {
24: }
25:
26: public MyOpaqueLayer(int Alpha, bool IsShowLoadingImage)
27: {
28: SetStyle(System.Windows.Forms.ControlStyles.Opaque, true);
29: base.CreateControl();
30:
31: this._alpha = Alpha;
32: if (IsShowLoadingImage)
33: {
34: PictureBox pictureBox_Loading = new PictureBox();
35: pictureBox_Loading.BackColor = System.Drawing.Color.White;
36: pictureBox_Loading.Image = FlexGridLoading.Properties.Resources.loading;
37: pictureBox_Loading.Name = "pictureBox_Loading";
38: pictureBox_Loading.Size = new System.Drawing.Size(48, 48);
39: pictureBox_Loading.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
40: Point Location = new Point(this.Location.X + (this.Width - pictureBox_Loading.Width) / 2, this.Location.Y + (this.Height - pictureBox_Loading.Height) / 2);//居中
41: pictureBox_Loading.Location = Location;
42: pictureBox_Loading.Anchor = AnchorStyles.None;
43: this.Controls.Add(pictureBox_Loading);
44: }
45: }
46:
47:
48: protected override void Dispose(bool disposing)
49: {
50: if (disposing)
51: {
52: if (!((components == null)))
53: {
54: components.Dispose();
55: }
56: }
57: base.Dispose(disposing);
58: }
59:
60: /// <summary>
61: /// 自定义绘制窗体
62: /// </summary>
63: /// <param name="e"></param>
64: protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
65: {
66: float vlblControlWidth;
67: float vlblControlHeight;
68:
69: Pen labelBorderPen;
70: SolidBrush labelBackColorBrush;
71:
72: if (_transparentBG)
73: {
74: Color drawColor = Color.FromArgb(this._alpha, this.BackColor);
75: labelBorderPen = new Pen(drawColor, 0);
76: labelBackColorBrush = new SolidBrush(drawColor);
77: }
78: else
79: {
80: labelBorderPen = new Pen(this.BackColor, 0);
81: labelBackColorBrush = new SolidBrush(this.BackColor);
82: }
83: base.OnPaint(e);
84: vlblControlWidth = this.Size.Width;
85: vlblControlHeight = this.Size.Height;
86: e.Graphics.DrawRectangle(labelBorderPen, 0, 0, vlblControlWidth, vlblControlHeight);
87: e.Graphics.FillRectangle(labelBackColorBrush, 0, 0, vlblControlWidth, vlblControlHeight);
88: }
89:
90:
91: protected override CreateParams CreateParams//v1.10
92: {
93: get
94: {
95: CreateParams cp = base.CreateParams;
96: cp.ExStyle |= 0x00000020; //0x20; // 开启 WS_EX_TRANSPARENT,使控件支持透明
97: return cp;
98: }
99: }
100:
101: /*
102: * [Category("myOpaqueLayer"), Description("是否使用透明,默认为True")]
103: * 一般用于说明你自定义控件的属性(Property)。
104: * Category用于说明该属性属于哪个分类,Description自然就是该属性的含义解释。
105: */
106: [Category("MyOpaqueLayer"), Description("是否使用透明,默认为True")]
107: public bool TransparentBG
108: {
109: get
110: {
111: return _transparentBG;
112: }
113: set
114: {
115: _transparentBG = value;
116: this.Invalidate();
117: }
118: }
119:
120: [Category("MyOpaqueLayer"), Description("设置透明度")]
121: public int Alpha
122: {
123: get
124: {
125: return _alpha;
126: }
127: set
128: {
129: _alpha = value;
130: this.Invalidate();
131: }
132: }
133: }
134:
135: }
然后,为了我们方便调用不用在每个页面调用时去new并且设置很多属性,我们需要调用一个通用的Command类 1: namespace FlexGridLoading
2: {
3: class OpaqueCommand
4: {
5: private FlexGridLoading.MyOpaqueLayer m_OpaqueLayer = null;//半透明蒙板层
6:
7: /// <summary>
8: /// 显示遮罩层
9: /// </summary>
10: /// <param name="control">控件</param>
11: /// <param name="alpha">透明度</param>
12: /// <param name="isShowLoadingImage">是否显示图标</param>
13: public void ShowOpaqueLayer(Control control, int alpha, bool isShowLoadingImage)
14: {
15: try
16: {
17: if (this.m_OpaqueLayer == null)
18: {
19: this.m_OpaqueLayer = new FlexGridLoading.MyOpaqueLayer(alpha, isShowLoadingImage);
20: control.Controls.Add(this.m_OpaqueLayer);
21: this.m_OpaqueLayer.Dock = DockStyle.Fill;
22: this.m_OpaqueLayer.BringToFront();
23: }
24: this.m_OpaqueLayer.Enabled = true;
25: this.m_OpaqueLayer.Visible = true;
26: }
27: catch { }
28: }
29:
30: /// <summary>
31: /// 隐藏遮罩层
32: /// </summary>
33: public void HideOpaqueLayer()
34: {
35: try
36: {
37: if (this.m_OpaqueLayer != null)
38: {
39: this.m_OpaqueLayer.Visible = false;
40: this.m_OpaqueLayer.Enabled = false;
41: }
42: }
43: catch (Exception ex)
44: {
45: //MessageBox.Show(ex.Message);
46: }
47: }
48: }
49: }
最后,我们在FlexGrid加载数据时加载提示,如图效果
1: private void button1_Click(object sender, EventArgs e)
2: {
3: cmd.ShowOpaqueLayer(panel1, 125, true);
4: this.customerTableAdapter.Fill(this.c1NWindDataSet.Customer);
5:
6: }
如果你有疑问,可以到GCDN获得技术支持:
http://gcdn.grapecity.com.cn/showforum-68.html
GCDN:http://gcdn.grapecity.com.cn/
官方网站:/developer