ASP. NET show gradient Images

Final effect:

 

To achieve the effect, first prepare an image with a height of 25 pixel and a gradient of 1 to 3 pixel. You can download http://www.bkjia.com/uploadfile/2012/0405/20120405091437570.gif here.

Prepare the data as follows:
View Code
Dictionary <int, int> Datas
{
Get
{
Dictionary <int, int> d = new Dictionary <int, int> ();
D. Add (1, 35 );
D. Add (2, 45 );
D. Add (3, 20 );
Return d;
}
}

 
OK, the data is ready. put three Label controls in aspx. Of course, you can display them in other controls or labels. Note that Width = "300 ", it is the width of the gradient image at 100%. :
View Code
<Asp: Label ID = "Label1" runat = "server" style = "margin: 3px; "Text =" "Width =" 300 "BorderWidth =" 1 "> </asp: Label> <br/>
<Asp: Label ID = "Label2" runat = "server" style = "margin: 3px; "Text =" "Width =" 300 "BorderWidth =" 1 "> </asp: Label> <br/>
<Asp: Label ID = "Label3" runat = "server" style = "margin: 3px; "Text =" "Width =" 300 "BorderWidth =" 1 "> </asp: Label> <br/>

 
Display the data on the Label:
View Code
Protected void Page_Load (object sender, EventArgs e)
{
Data_Binding ();
}

Private void Data_Binding ()
{
Int totals = 100;
Foreach (KeyValuePair <int, int> kvp in Datas)
{
Double rate = kvp. Value/(double) totals;

Double width = rate * 300;
Switch (kvp. Key)
{
Case 1:
This. Label1.Text = GradientImage (width, rate );
Break;
Case 2:
This. Label2.Text = GradientImage (width, rate );
Break;
Case 3:
This. Label3.Text = GradientImage (width, rate );
Break;
}
}
}

Private string GradientImage (double width, double rate)
{
Return "}

 

From Insus. NET