WEB进度条控件

近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,
可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色显示或图片显示(当没有设置图片
的时候就会自动用颜色来显示),状态条的宽度和高度可以自由设定,还是第一次写控件,希望大家多多指教.好了不多说了,还是把
代码贴出来供大家参考吧!有不同想法的希望大家能提出来交流一下!

先看看运行效果:
            

第一步:
新建一个类文件Guage.cs
代码如下:

using System;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace ZYT.Web.UI
{
/// <summary>
/// 进度条WEB控件

[DefaultProperty("Text"),
ToolboxData("<{0}:Guage runat=server></{0}:Guage>")]
public class Guage : System.Web.UI.WebControls.WebControl
{
#region 变量
/// <summary>
/// 列数(单元格)
/// </summary>
private int intCellCount = 20;

/// <summary>
/// 设置进度条百分比
/// </summary>
private int intPercentage = 0;

/// <summary>
/// 总数量
/// </summary>
private int intMaxNum = 0;
/// <summary>
/// 现在数量
/// </summary>
private int intCurNum = 0;

/// <summary>
/// 填充图片地址
/// </summary>
private string strFillImageUrl = "";
/// <summary>
/// 进度条图片地址
/// </summary>
private string strBarImageUrl = "";

#endregion

#region 属性
[Description("进度条百分比步长(必须被100整除)")]
public int PercentageStep
{
get { return 100 / intCellCount; }
set
{
if ((100 % value) != 0)
{
throw new ArgumentException("百分比步长必须被100整除");
}
intCellCount = 100 / value;
}
}

[Description("设置进度条百分比"), DefaultValue(0)]
public int Percentage
{
get { return intPercentage; }
set
{
// 确定百分比在指定的范围内
//
if (value > 100) // 超过100则显示100
{
intPercentage = 100;
}
else if (value < 0) // 小于0则显示0
{
intPercentage = 0;
}
else
{
intPercentage = value;
}
}
}

[Description("总数量")]
public int MaxNum
{
get { return intMaxNum; }
set
{
intMaxNum = value;
}
}

[Description("当前数量")]
public int CurNum
{
get { return intCurNum; }
set
{
intCurNum = value;
}
}

[Description("填充图片地址")]
public string FillImageUrl
{
get { return strFillImageUrl; }
set { strFillImageUrl = value; }
}

[Description("进度条图片地址")]
public string BarImageUrl
{
get { return strBarImageUrl; }
set { strBarImageUrl = value; }
}

#endregion

#region 构造函数
public Guage()
{
// 初始化进度条的背景颜色、字体颜色和边框颜色
BackColor = System.Drawing.Color.LightGray;
ForeColor = System.Drawing.Color.Blue;
BorderColor = Color.Empty;

//初始化进度条的宽度和高度
base.Width = Unit.Pixel(100);
base.Height = Unit.Pixel(16);

}
#endregion

#region 取得进度条百分比
/// <summary>
/// 取得进度条的百分比
/// </summary>
/// <param name="MaxNum">总数量</param>
/// <param name="curValue">当前数量</param>
/// <returns></returns>
private int GetPercentage(int maxNum, int curNum)
{
int intLvalue = 0;
int intFvalue = (curNum * 100) / maxNum;
int intMvalue = (curNum * 100) % maxNum;
if (intMvalue > 0)
{
string strLvalue = intMvalue.ToString().Substring(0, 1);
if (int.Parse(strLvalue) > 4)
{
intLvalue = int.Parse(strLvalue);
}
}
return intFvalue + intLvalue;
}

#endregion

/// <summary>
/// 进度条输出参数
/// </summary>
/// <param name="output"> 进度条 </param>
protected override void Render(HtmlTextWriter output)
{
if (Width.Type != UnitType.Pixel)
{
throw new ArgumentException("宽度必须为象素");
}

int intWidth = (int)Width.Value;//控件宽度

if (intPercentage == 0)
{
//进度条百分比
intPercentage = GetPercentage(intMaxNum, intCurNum);
}

if (BorderColor != Color.Empty)//进度条加边框
{
output.Write("<table border=‘0‘ cellspacing=‘0‘ cellpadding=‘1‘ bgColor=‘" +
ColorTranslator.ToHtml(BorderColor) + "‘><tr><td>");
}
if (BarImageUrl == "")
{
output.Write("<table border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘ height=‘" + Height + "‘ bgColor=‘" + ColorTranslator.ToHtml(BackColor) + "‘><tr>");
int intCellWidth = intWidth / intCellCount;
int intCurPercentage = 0;
int intPercentageStep = PercentageStep;
string strCellColor;
string strCellValue = "";

if (Page.Request.Browser.Browser.ToUpper() == "NETSCAPE")
{
if (FillImageUrl != "")
{
strCellValue = "<img src=‘" + FillImageUrl + "‘ border=‘0‘ width=‘" + intCellWidth + "‘>";
}
else
{
strCellValue = " ";
}
}
for (int i = 0; i < intCellCount; i++, intCurPercentage += intPercentageStep)
{
if (intCurPercentage < intPercentage)
{
strCellColor = " bgColor=‘" + ColorTranslator.ToHtml(ForeColor) + "‘";
}
else
{
strCellColor = "";
}

if (i == 0)
{
output.Write("<td height=‘" + Height + "‘ width=‘" + intCellWidth + "‘" + strCellColor + ">" + strCellValue + "</td>");
}
else
{
output.Write("<td width=‘" + intCellWidth + "‘" + strCellColor + ">" + strCellValue + "</td>");
}
}
output.Write("</tr></table>");
}
else
{
int intImageWidth = (int)((intPercentage / 100.0) * intWidth);

output.Write("<table border=‘0‘ cellpadding=‘0‘ cellSpacing=‘0‘ bgColor=‘" + ColorTranslator.ToHtml(BackColor) + "‘><tr><td width=‘" + intWidth + "‘>");
output.Write("<img src=‘" + BarImageUrl + "‘ width=‘" + intImageWidth + "‘ height=‘" + Height + "‘>");
output.Write("</td></tr></table>");
}

if (BorderColor != Color.Empty)
{
output.Write("</td></tr></table>");
}
}

}
}

第二步:在WEB项目下添加一个WEB文件:GuageDemo.aspx
代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="guageDemo.aspx.cs" Inherits="guageDemo" %>
<%@ Register Assembly="ZYT.Web.UI" Namespace="ZYT.Web.UI" TagPrefix="ZYTControl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<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="" />
</div>
</form>
</body>
</html>