Home>

Use asp.net to write the effect of displaying the gradient of the icon,Simple and practical,See below for details

First give everyone the final effect:

Achieve the effect,First prepare a picture,An image with a gradient of 25 pixels in height and a width of 1 to 3 pixels.You can download it here.

Also prepare the data:

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,One thing to note is, which is the width of the gradient image at 100%:

<asp:label runat="server" text="" width="300" borderwidth="1"></asp:label><br />
 <asp:label runat="server" text="" width="300" borderwidth="1"></asp:label><br />
 <asp:label runat="server" text="" width="300" borderwidth="1"></asp:label><br />

Display the data on the label:

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 "<img height =" 21 "src =" images/bar.gif "width =" "+ width +" "align =" absmiddle ">" + rate.tostring ("p");
 }
  • Previous Android implementation of mobile wallpaper change method
  • Next MySQL 5711 winx64 installation and configuration method graphic tutorial