近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,
可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色显示或图片显示(当没有设置图片
的时候就会自动用颜色来显示),状态条的宽度和高度可以自由设定,还是第一次写控件,希望大家多多指教.好了不多说了,还是把
代码贴出来供大家参考吧!有不同想法的希望大家能提出来交流一下!
先看看运行效果:
第一步:
新建一个类文件Guage.cs
代码如下:
1
using
System;
2 using System.Drawing;
3 using System.Web;
4 using System.Web.UI;
5 using System.Web.UI.WebControls;
6 using System.ComponentModel;
7
8 namespace ZYT.Web.UI
9 {
10 /**//// <summary>
11 /// 进度条WEB控件
12
13 [DefaultProperty("Text"),
14 ToolboxData("<{0}:Guage runat=server></{0}:Guage>")]
15 public class Guage : System.Web.UI.WebControls.WebControl
16 {
17 变量#region 变量
18 /**//// <summary>
19 /// 列数(单元格)
20 /// </summary>
21 private int intCellCount = 20;
22
23 /**//// <summary>
24 /// 设置进度条百分比
25 /// </summary>
26 private int intPercentage = 0;
27
28 /**//// <summary>
29 /// 总数量
30 /// </summary>
31 private int intMaxNum = 0;
32 /**//// <summary>
33 /// 现在数量
34 /// </summary>
35 private int intCurNum = 0;
36
37 /**//// <summary>
38 /// 填充图片地址
39 /// </summary>
40 private string strFillImageUrl = "";
41 /**//// <summary>
42 /// 进度条图片地址
43 /// </summary>
44 private string strBarImageUrl = "";
45
46 #endregion
47
48 属性#region 属性
49 [Description("进度条百分比步长(必须被100整除)")]
50 public int PercentageStep
51 {
52 get { return 100 / intCellCount; }
53 set
54 {
55 if ((100 % value) != 0)
56 {
57 throw new ArgumentException("百分比步长必须被100整除");
58 }
59 intCellCount = 100 / value;
60 }
61 }
62
63 [Description("设置进度条百分比"), DefaultValue(0)]
64 public int Percentage
65 {
66 get { return intPercentage; }
67 set
68 {
69 // 确定百分比在指定的范围内
70 //
71 if (value > 100) // 超过100则显示100
72 {
73 intPercentage = 100;
74 }
75 else if (value < 0) // 小于0则显示0
76 {
77 intPercentage = 0;
78 }
79 else
80 {
81 intPercentage = value;
82 }
83 }
84 }
85
86 [Description("总数量")]
87 public int MaxNum
88 {
89 get { return intMaxNum; }
90 set
91 {
92 intMaxNum = value;
93 }
94 }
95
96 [Description("当前数量")]
97 public int CurNum
98 {
99 get { return intCurNum; }
100 set
101 {
102 intCurNum = value;
103 }
104 }
105
106 [Description("填充图片地址")]
107 public string FillImageUrl
108 {
109 get { return strFillImageUrl; }
110 set { strFillImageUrl = value; }
111 }
112
113 [Description("进度条图片地址")]
114 public string BarImageUrl
115 {
116 get { return strBarImageUrl; }
117 set { strBarImageUrl = value; }
118 }
119
120 #endregion
121
122 构造函数#region 构造函数
123 public Guage()
124 {
125 // 初始化进度条的背景颜色、字体颜色和边框颜色
126 BackColor = System.Drawing.Color.LightGray;
127 ForeColor = System.Drawing.Color.Blue;
128 BorderColor = Color.Empty;
129
130 //初始化进度条的宽度和高度
131 base.Width = Unit.Pixel(100);
132 base.Height = Unit.Pixel(16);
133
134 }
135 #endregion
136
137 取得进度条百分比#region 取得进度条百分比
138 /**//// <summary>
139 /// 取得进度条的百分比
140 /// </summary>
141 /// <param name="MaxNum">总数量</param>
142 /// <param name="curValue">当前数量</param>
143 /// <returns></returns>
144 private int GetPercentage(int maxNum, int curNum)
145 {
146 int intLvalue = 0;
147 int intFvalue = (curNum * 100) / maxNum;
148 int intMvalue = (curNum * 100) % maxNum;
149 if (intMvalue > 0)
150 {
151 string strLvalue = intMvalue.ToString().Substring(0, 1);
152 if (int.Parse(strLvalue) > 4)
153 {
154 intLvalue = int.Parse(strLvalue);
155 }
156 }
157 return intFvalue + intLvalue;
158 }
159
160 #endregion
161
162 /**//// <summary>
163 /// 进度条输出参数
164 /// </summary>
165 /// <param name="output"> 进度条 </param>
166 protected override void Render(HtmlTextWriter output)
167 {
168 if (Width.Type != UnitType.Pixel)
169 {
170 throw new ArgumentException("宽度必须为象素");
171 }
172
173 int intWidth = (int)Width.Value;//控件宽度
174
175 if (intPercentage == 0)
176 {
177 //进度条百分比
178 intPercentage = GetPercentage(intMaxNum, intCurNum);
179 }
180
181 if (BorderColor != Color.Empty)//进度条加边框
182 {
183 output.Write("<table border='0' cellspacing='0' cellpadding='1' bgColor='" +
184 ColorTranslator.ToHtml(BorderColor) + "'><tr><td>");
185 }
186 if (BarImageUrl == "")
187 {
188 output.Write("<table border='0' cellspacing='0' cellpadding='0' height='" + Height + "' bgColor='" + ColorTranslator.ToHtml(BackColor) + "'><tr>");
189 int intCellWidth = intWidth / intCellCount;
190 int intCurPercentage = 0;
191 int intPercentageStep = PercentageStep;
192 string strCellColor;
193 string strCellValue = "";
194
195 if (Page.Request.Browser.Browser.ToUpper() == "NETSCAPE")
196 {
197 if (FillImageUrl != "")
198 {
199 strCellValue = "<img src='" + FillImageUrl + "' border='0' width='" + intCellWidth + "'>";
200 }
201 else
202 {
203 strCellValue = " ";
204 }
205 }
206 for (int i = 0; i < intCellCount; i++, intCurPercentage += intPercentageStep)
207 {
208 if (intCurPercentage < intPercentage)
209 {
210 strCellColor = " bgColor='" + ColorTranslator.ToHtml(ForeColor) + "'";
211 }
212 else
213 {
214 strCellColor = "";
215 }
216
217 if (i == 0)
218 {
219 output.Write("<td height='" + Height + "' width='" + intCellWidth + "'" + strCellColor + ">" + strCellValue + "</td>");
220 }
221 else
222 {
223 output.Write("<td width='" + intCellWidth + "'" + strCellColor + ">" + strCellValue + "</td>");
224 }
225 }
226 output.Write("</tr></table>");
227 }
228 else
229 {
230 int intImageWidth = (int)((intPercentage / 100.0) * intWidth);
231
232 output.Write("<table border='0' cellpadding='0' cellSpacing='0' bgColor='" + ColorTranslator.ToHtml(BackColor) + "'><tr><td width='" + intWidth + "'>");
233 output.Write("<img src='" + BarImageUrl + "' width='" + intImageWidth + "' height='" + Height + "'>");
234 output.Write("</td></tr></table>");
235 }
236
237 if (BorderColor != Color.Empty)
238 {
239 output.Write("</td></tr></table>");
240 }
241 }
242
243 }
244}
2 using System.Drawing;
3 using System.Web;
4 using System.Web.UI;
5 using System.Web.UI.WebControls;
6 using System.ComponentModel;
7
8 namespace ZYT.Web.UI
9 {
10 /**//// <summary>
11 /// 进度条WEB控件
12
13 [DefaultProperty("Text"),
14 ToolboxData("<{0}:Guage runat=server></{0}:Guage>")]
15 public class Guage : System.Web.UI.WebControls.WebControl
16 {
17 变量#region 变量
18 /**//// <summary>
19 /// 列数(单元格)
20 /// </summary>
21 private int intCellCount = 20;
22
23 /**//// <summary>
24 /// 设置进度条百分比
25 /// </summary>
26 private int intPercentage = 0;
27
28 /**//// <summary>
29 /// 总数量
30 /// </summary>
31 private int intMaxNum = 0;
32 /**//// <summary>
33 /// 现在数量
34 /// </summary>
35 private int intCurNum = 0;
36
37 /**//// <summary>
38 /// 填充图片地址
39 /// </summary>
40 private string strFillImageUrl = "";
41 /**//// <summary>
42 /// 进度条图片地址
43 /// </summary>
44 private string strBarImageUrl = "";
45
46 #endregion
47
48 属性#region 属性
49 [Description("进度条百分比步长(必须被100整除)")]
50 public int PercentageStep
51 {
52 get { return 100 / intCellCount; }
53 set
54 {
55 if ((100 % value) != 0)
56 {
57 throw new ArgumentException("百分比步长必须被100整除");
58 }
59 intCellCount = 100 / value;
60 }
61 }
62
63 [Description("设置进度条百分比"), DefaultValue(0)]
64 public int Percentage
65 {
66 get { return intPercentage; }
67 set
68 {
69 // 确定百分比在指定的范围内
70 //
71 if (value > 100) // 超过100则显示100
72 {
73 intPercentage = 100;
74 }
75 else if (value < 0) // 小于0则显示0
76 {
77 intPercentage = 0;
78 }
79 else
80 {
81 intPercentage = value;
82 }
83 }
84 }
85
86 [Description("总数量")]
87 public int MaxNum
88 {
89 get { return intMaxNum; }
90 set
91 {
92 intMaxNum = value;
93 }
94 }
95
96 [Description("当前数量")]
97 public int CurNum
98 {
99 get { return intCurNum; }
100 set
101 {
102 intCurNum = value;
103 }
104 }
105
106 [Description("填充图片地址")]
107 public string FillImageUrl
108 {
109 get { return strFillImageUrl; }
110 set { strFillImageUrl = value; }
111 }
112
113 [Description("进度条图片地址")]
114 public string BarImageUrl
115 {
116 get { return strBarImageUrl; }
117 set { strBarImageUrl = value; }
118 }
119
120 #endregion
121
122 构造函数#region 构造函数
123 public Guage()
124 {
125 // 初始化进度条的背景颜色、字体颜色和边框颜色
126 BackColor = System.Drawing.Color.LightGray;
127 ForeColor = System.Drawing.Color.Blue;
128 BorderColor = Color.Empty;
129
130 //初始化进度条的宽度和高度
131 base.Width = Unit.Pixel(100);
132 base.Height = Unit.Pixel(16);
133
134 }
135 #endregion
136
137 取得进度条百分比#region 取得进度条百分比
138 /**//// <summary>
139 /// 取得进度条的百分比
140 /// </summary>
141 /// <param name="MaxNum">总数量</param>
142 /// <param name="curValue">当前数量</param>
143 /// <returns></returns>
144 private int GetPercentage(int maxNum, int curNum)
145 {
146 int intLvalue = 0;
147 int intFvalue = (curNum * 100) / maxNum;
148 int intMvalue = (curNum * 100) % maxNum;
149 if (intMvalue > 0)
150 {
151 string strLvalue = intMvalue.ToString().Substring(0, 1);
152 if (int.Parse(strLvalue) > 4)
153 {
154 intLvalue = int.Parse(strLvalue);
155 }
156 }
157 return intFvalue + intLvalue;
158 }
159
160 #endregion
161
162 /**//// <summary>
163 /// 进度条输出参数
164 /// </summary>
165 /// <param name="output"> 进度条 </param>
166 protected override void Render(HtmlTextWriter output)
167 {
168 if (Width.Type != UnitType.Pixel)
169 {
170 throw new ArgumentException("宽度必须为象素");
171 }
172
173 int intWidth = (int)Width.Value;//控件宽度
174
175 if (intPercentage == 0)
176 {
177 //进度条百分比
178 intPercentage = GetPercentage(intMaxNum, intCurNum);
179 }
180
181 if (BorderColor != Color.Empty)//进度条加边框
182 {
183 output.Write("<table border='0' cellspacing='0' cellpadding='1' bgColor='" +
184 ColorTranslator.ToHtml(BorderColor) + "'><tr><td>");
185 }
186 if (BarImageUrl == "")
187 {
188 output.Write("<table border='0' cellspacing='0' cellpadding='0' height='" + Height + "' bgColor='" + ColorTranslator.ToHtml(BackColor) + "'><tr>");
189 int intCellWidth = intWidth / intCellCount;
190 int intCurPercentage = 0;
191 int intPercentageStep = PercentageStep;
192 string strCellColor;
193 string strCellValue = "";
194
195 if (Page.Request.Browser.Browser.ToUpper() == "NETSCAPE")
196 {
197 if (FillImageUrl != "")
198 {
199 strCellValue = "<img src='" + FillImageUrl + "' border='0' width='" + intCellWidth + "'>";
200 }
201 else
202 {
203 strCellValue = " ";
204 }
205 }
206 for (int i = 0; i < intCellCount; i++, intCurPercentage += intPercentageStep)
207 {
208 if (intCurPercentage < intPercentage)
209 {
210 strCellColor = " bgColor='" + ColorTranslator.ToHtml(ForeColor) + "'";
211 }
212 else
213 {
214 strCellColor = "";
215 }
216
217 if (i == 0)
218 {
219 output.Write("<td height='" + Height + "' width='" + intCellWidth + "'" + strCellColor + ">" + strCellValue + "</td>");
220 }
221 else
222 {
223 output.Write("<td width='" + intCellWidth + "'" + strCellColor + ">" + strCellValue + "</td>");
224 }
225 }
226 output.Write("</tr></table>");
227 }
228 else
229 {
230 int intImageWidth = (int)((intPercentage / 100.0) * intWidth);
231
232 output.Write("<table border='0' cellpadding='0' cellSpacing='0' bgColor='" + ColorTranslator.ToHtml(BackColor) + "'><tr><td width='" + intWidth + "'>");
233 output.Write("<img src='" + BarImageUrl + "' width='" + intImageWidth + "' height='" + Height + "'>");
234 output.Write("</td></tr></table>");
235 }
236
237 if (BorderColor != Color.Empty)
238 {
239 output.Write("</td></tr></table>");
240 }
241 }
242
243 }
244}
第二步:在WEB项目下添加一个WEB文件:GuageDemo.aspx
代码如下:
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
guageDemo.aspx.cs
"
Inherits
=
"
guageDemo
"
%>
2 <% @ Register Assembly = " ZYT.Web.UI " Namespace = " ZYT.Web.UI " TagPrefix = " ZYTControl " %>
3 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4
5 < html xmlns = " http://www.w3.org/1999/xhtml " >
6 < head runat = " server " >
7 < title > 无标题页 </ title >
8 </ head >
9 < body >
10 < form id = " form1 " runat = " server " >
11 < div >
12 < ZYTControl:Guage ID = " guage1 " runat = " server " CurNum = " 34 " MaxNum = " 1000 " Height = " 25px " Width = " 300px " PercentageStep = " 2 " BarImageUrl = " Guage/Images/3.jpg " FillImageUrl = " Guage/Images/1.jpg " ImageGeneratorUrl = "" />
13 </ div >
14 </ form >
15 </ body >
16 </ html >
17
2 <% @ Register Assembly = " ZYT.Web.UI " Namespace = " ZYT.Web.UI " TagPrefix = " ZYTControl " %>
3 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4
5 < html xmlns = " http://www.w3.org/1999/xhtml " >
6 < head runat = " server " >
7 < title > 无标题页 </ title >
8 </ head >
9 < body >
10 < form id = " form1 " runat = " server " >
11 < div >
12 < ZYTControl:Guage ID = " guage1 " runat = " server " CurNum = " 34 " MaxNum = " 1000 " Height = " 25px " Width = " 300px " PercentageStep = " 2 " BarImageUrl = " Guage/Images/3.jpg " FillImageUrl = " Guage/Images/1.jpg " ImageGeneratorUrl = "" />
13 </ div >
14 </ form >
15 </ body >
16 </ html >
17
OK!就这样行了