ASP.NET显示渐变图片实现方法

先给大家来个最终效果：

实现效果，首先准备一张图片，高度为25pixel,宽度为1至3pixel渐变的图片。可以这里下载。

还要准备数据：

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,数据准备完了，在aspx里放三个label控件，当然你可以显示在其它控件或是标签中，有一点要注意的是width="300"，它是渐变图片在100%的宽度：

<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 /> 

把数据显示于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"); 
 } 

以上就是asp.net实现渐变图片的方法，希望对大家的学习有所帮助。