ASP.NET显示渐变图片

最终效果：

 

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

还要准备数据：

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

 

把数据显示于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  " <IMG height='21' src='images/bar.gif' width=' " + width +  " ' align='absMiddle'>  " + rate.ToString( " p ");
    }