WEB状态条控件
近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,
可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色显示或图片显示(当没有设置图片
的时候就会自动用颜色来显示),状态条的宽度和高度可以自由设定,还是第一次写控件,希望大家多多指教.好了不多说了,还是把
代码贴出来供大家参考吧!有不同想法的希望大家能提出来交流一下!
先看看运行效果:
第一步:
新建一个类文件Guage.cs
代码如下:
1using System;
2using System.Drawing;
3using System.Web;
4using System.Web.UI;
5using System.Web.UI.WebControls;
6using System.ComponentModel;
7
8namespace 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}
2using System.Drawing;
3using System.Web;
4using System.Web.UI;
5using System.Web.UI.WebControls;
6using System.ComponentModel;
7
8namespace 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}
第二步:在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!就这样行了