WEB状态条控件
近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个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
变量
47![]()
48
属性
121![]()
122
构造函数
136![]()
137
取得进度条百分比
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

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

47

48

121

122

136

137

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

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

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

OK!就这样行了