Using the code
Our progress bar is a simple HTML table with single row and two columns:
<table width="200" border="0">
<tr>
<td width="50%" bgcolor="#999999">Indicator</td>
<td width="50%" ></td>
</tr>
</table>
Should be like:
We assign column widths with percent values, if your score or progressed value is 300 and Max. Score/Progressed Value is 1000,then your percentage is { (300/1000)*100 = 30 }. So, the First column width is (width="30%"
), and second column width is { 100-30=70 } (width="70%"
)
So:
<tr>
<td width="30%" bgcolor="#999999">Indicator</td>
<td width="70% "></td>
</tr>
</table>
Should be:
Create your own Web Control
If you are not familiar with custom Web controls, here is a partial definition from the Microsoft documentation:
Web controls run on the server and include form controls such as buttons and text boxes, as well as special purpose controls such as a calendar. This allows you to programmatically control these elements on a Web page. Web controls are more abstract than HTML controls. Their object model does not necessarily reflect HTML syntax. (See msdn.microsoft.com.)
We need two variables only to implement this control progressed value and max value, and let Render
method write above the HTML table with our two values to web page..
public class WebCustomControl1 : System.Web.UI.WebControls.WebControl
{
private float progressedValue;
private float maxValue;
public float Value
{
get{return progressedValue;}
set{progressedValue=value}
}
public float MaxValue
{
get{return maxValue;}
set{maxValue=value}
}
protected override void Render(HtmlTextWriter output)
{
output.Write("<table width="200" border="0">");
output.Write("<tr>");
output.Write("<td");
output.Write(" width=\""+progressedValue*100/maxValue);
output.Write("\" bgcolor=\"#999999\">"+
progressedValue*100/maxValue+"% </td>");
output.Write("<td");
output.Write("" width=\""+(100-(progressedValue*100/maxValue))");
//the rest of column start&end tags
output.Write("\" ></td>");
output.Write("</tr>");
output.Write("</table>");
}
}
Step Further
Our 3D ASP.NET Control
In the above table, I use background image attribute in this control , then I've great result, 3D Bar!!
The Code modification
There are five member properties and two methods, one method writes the above code with help of StringBuilder then returns it as string
to Render
method, there is nothing new..!
Render
method becomes:
protected override void Render(HtmlTextWriter output)
{
output.Write(Progress(currentValue,totalValue));
}
where the Progress(....)
method do what we do in the above example, but with additional tags (just images & styles....):
private string Progress(float _value,float _total)
{
float result=(_value*100/_total);
float spent=100-result;
StringBuilder s=new StringBuilder("");
switch(result.ToString())
{
case "0":
{
s.Append("<center>");
s.Append("<table border=\"0\" width=\"622\">");
s.Append("<tr><td width=\"100%\">");
s.Append("<img border=\"0\" src=\"images/zero.jpg\" " +
" width=\"622\" height=\"29\">");
s.Append("<p align=\"center\" dir=\"ltr\">");
s.Append("<p align=\"center\"><font color=\"#FF0000\" " +
" size=\"6\" face=\"Impact\">");
s.Append(minText);
s.Append("</font><font size=\"6\" face=\"Impact\" " +
"color=\"#FF9933\">");
s.Append("</font><font color=\"#FF9933\" " +
"face=\"Impact\" size=\"5\"> X 10");
s.Append("<sup>6</sup></font>" +
"<font color=\"#FF0000\" size=\"6\" face=\"Impact\">");
s.Append(" ...!</font></td></tr></table>");
s.Append("<font color=\"#8585AD\" face=\"Impact\" " +
"size=\"2\"> Completed ");
s.Append(_value+" / "+_total);
s.Append("</font></font></p>");
s.Append("</center>");
break;
}
case "100":
{
s.Append("<center>");
s.Append("<table border=\"0\" width=\"622\">");
s.Append("<tr><td width=\"100%\">");
s.Append("<img border=\"0\" src=\"images/full.jpg\" " +
"width=\"622\" height=\"33\">");
s.Append("<p align=\"center\" dir=\"ltr\">");
s.Append("<p align=\"center\"><font " +
"size=\"6\"face=\"Impact\" color=\"#FF6600\">");
s.Append(fullText);
s.Append("</font>");
s.Append("<font size=\"5\" face=\"Impact\" " +
"color=\"#FF0000\">. . . !</font>");
s.Append("<font size=\"5\" color=\"#FF0000\">" +
"</font></td></tr></table>");
s.Append("<font color=\"#8585AD\" face=\"Impact\" " +
"size=\"2\"> Completed ");
s.Append(_value+" / "+_total);
s.Append("</font></font></p>");
s.Append("</center>");
break;
}
default:
{
s.Append("<center>");
s.Append("<table border=\"0\"width=\"622\" " +
"background=\"images/bg.jpg\"height=\"26\"");
s.Append("dir=\"rtl\">");
s.Append("<tr><td width=\"100%\"> " +
"<div align=\"left\">");
s.Append(" <table border=\"0\" width=\"100%\"> <tr>");
s.Append("<td width=\"");
s.Append(spent);
s.Append("%\"></td>");
s.Append("<td width=\"");
s.Append(result);
s.Append("%\">");
s.Append("<table border=\"0\" width=\"100%\">");
s.Append("<tr><td width=\"1%\">");
s.Append("<img border=\"0\" src=\"images/endprogressBG.JPG\" " +
"width=\"9\"height=\"");
s.Append("29\"></td>");
s.Append("<td width=\"97%\" background=\"images/progressBG.JPG\"> " +
"</td><td width=\"");
s.Append("2%\">");
s.Append("<img border=\"0\" src=\"images/lprogressBG.JPG\" " +
"width=\"16\"height=\"");
s.Append("29\"></td>");
s.Append("</tr></table></div></td> " +
"</tr></table></td></tr></table>");
s.Append("<table border=\"0\" width=\"500\">" +
"<tr><td width=\"100%\">");
s.Append("<p dir=\"ltr\" align=\"center\">< " +
"font face=\"Impact\"><font size=\"4\">");
s.Append(" </font><font color=\"#FF6600\" size=\"6\">");
s.Append(result.ToString());
s.Append("</font><font size=\"4\" color=\"#FF6600\">");
s.Append(" % </font><font color=\"#8585AD\" " +
"> Completed ");
s.Append(_value+" / "+_total);
s.Append("</font></font></td></tr></table>");
s.Append("</center>");
break;
}
}
return s.ToString();
}
The images used by this control are within ZIP file, you should copy this folder to your web solution.
========== Build: 1 succeeded, 0 failed, 0 skipped ==========