DataGrid透明显示背景图片，及表头透明

DataGrid透明显示背景图片，及表头透明

     今天有人问我flex中怎样向DataGrid添加背景图片，以及怎样使表格透明。
   其实这个查下文档就知道，可以如下用setStyle设置：

dataGrid.setStyle( ' backgroundAlpha ' ,alpha)

  
    但是，没多久又告诉我，表头并不透明，看不到后面的背景图片，查了下api，简单继承下DataGrid，重写drawHeaderBackground方法就行，如：

override  protected  function drawHeaderBackground(headerBG:UIComponent): void
  {
   //透明参数
   headerBG.alpha = _headerAlpha;
  //是否可见
   headerBG.visible = _headerVisible;
   
   super.drawHeaderBackground(headerBG);
 }

效果如下：
1，未处理的DataGrid，表格不透明


2,处理DataGrid后


测试效果可以点击： http://www.munkiihouse.com/flexapps/StyleDataGrid/StyleDataGridDemo.html

代码：
1、继承于DataGrid：

package  com.mh.components
{
 import mx.controls.DataGrid;
 import mx.core.UIComponent;
 public class StyleDataGrid extends DataGrid
 {
  
  private var _headerBGAlpha:Number = 1;  
  public function set headerBGAlpha(value:Number):void
  {
   _headerBGAlpha = value;
   invalidateDisplayList();
  }
  
  private var _headerBGVisible:Boolean = true;  
  public function set headerBGVisible(value:Boolean):void
  {
   _headerBGVisible = value;
   invalidateDisplayList();
  }

2、测试用例：

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  xmlns:mhc ="com.mh.components.*"  backgroundColor ="#FF8000"  backgroundGradientColors ="[#ff8040, #e14900]" >

 
  < mx:Panel  x ="10"  y ="10"  width ="550"  height ="500"  layout ="absolute"  title ="Albums"  paddingBottom ="10"  paddingLeft ="10"  paddingRight ="10"  paddingTop ="10"  backgroundImage ="@Embed('bg.jpg')" >
   < mhc:StyleDataGrid  id ="sdg_albums"  dataProvider ="{Catalog.cataglog}"  left ="10"  right ="10"  top ="10"  bottom ="10" >   
    < mhc:columns >
     < mx:DataGridColumn  dataField ="ARTIST"  headerText ="Artist"  width ="200"   />
     < mx:DataGridColumn  dataField ="TITLE"  headerText ="Title"   />
     < mx:DataGridColumn  dataField ="YEAR"  headerText ="Year"  width ="60"   />
    </ mhc:columns >   
   </ mhc:StyleDataGrid >
  </ mx:Panel >
 
 
  < mx:Panel  x ="568"  y ="10"  width ="300"  height ="200"  layout ="vertical"  title ="Controls"  paddingTop ="10"  paddingRight ="10"  paddingBottom ="10"  paddingLeft ="10" >
   < mx:FormItem  label ="Header Alpha:"   width ="100%"  labelWidth ="120" >
    < mx:HSlider  id ="hs_h_alpha"  value ="1"  minimum ="0"  maximum ="1"  snapInterval ="0.1"  allowTrackClick ="true"  change ="{sdg_albums.headerBGAlpha = hs_h_alpha.value}"  width ="100" />    
   </ mx:FormItem >
  
   < mx:FormItem  label ="Header Visable:"   labelWidth ="120" >
    < mx:CheckBox  id ="cb_visible"  label ="Visable"  selected ="true"  change ="{sdg_albums.headerBGVisible = cb_visible.selected}" />      
   </ mx:FormItem >
   < mx:FormItem  label ="Background Alpha:"   width ="100%"  labelWidth ="120" >
    < mx:HSlider  id ="hs_bg_alpha"  value ="0.5"  minimum ="0"  maximum ="1"  snapInterval ="0.1"  allowTrackClick ="true"  change ="{sdg_albums.setStyle('backgroundAlpha',hs_bg_alpha.value)}"  width ="100" />    
   </ mx:FormItem >
  </ mx:Panel >
 
</ mx:Application >

3、测试数据：

package
{
 public class Catalog
 {
  
  public static function get cataglog():XMLList
  {
   return catalog..CD;
  }
  
  private static var catalog:XML =  < CATALOG >
      < CD >
        < TITLE > Empire Burlesque </ TITLE >
        < ARTIST > Bob Dylan </ ARTIST >
        < COUNTRY > USA </ COUNTRY >
        < COMPANY > Columbia </ COMPANY >
        < PRICE > 10.90 </ PRICE >
        < YEAR > 1985 </ YEAR >
      </ CD >
      < CD >
        < TITLE > Hide your heart </ TITLE >
        < ARTIST > Bonnie Tylor </ ARTIST >
        < COUNTRY > UK </ COUNTRY >
        < COMPANY > CBS Records </ COMPANY >
        < PRICE > 9.90 </ PRICE >
        < YEAR > 1988 </ YEAR >
      </ CD >
      < CD >
        < TITLE > Greatest Hits </ TITLE >
        < ARTIST > Dolly Parton </ ARTIST >
        < COUNTRY > USA </ COUNTRY >
        < COMPANY > RCA </ COMPANY >
        < PRICE > 9.90 </ PRICE >
        < YEAR > 1982 </ YEAR >
      </ CD >
      < CD >
        < TITLE > Romanza </ TITLE >
        < ARTIST > Andrea Bocelli </ ARTIST >
        < COUNTRY > EU </ COUNTRY >
        < COMPANY > Polydor </ COMPANY >
        < PRICE > 10.80 </ PRICE >
        < YEAR > 1996 </ YEAR >
      </ CD >
      < CD >
        < TITLE > When a man loves a woman </ TITLE >
        < ARTIST > Percy Sledge </ ARTIST >
        < COUNTRY > USA </ COUNTRY >
        < COMPANY > Atlantic </ COMPANY >
        < PRICE > 8.70 </ PRICE >
        < YEAR > 1987 </ YEAR >
      </ CD >
      < CD >
        < TITLE > Black angel </ TITLE >
        < ARTIST > Savage Rose </ ARTIST >
        < COUNTRY > EU </ COUNTRY >
        < COMPANY > Mega </ COMPANY >
        < PRICE > 10.90 </ PRICE >
        < YEAR > 1995 </ YEAR >
      </ CD >
      < CD >
        < TITLE > 1999 Grammy Nominees </ TITLE >
        < ARTIST > Many </ ARTIST >
        < COUNTRY > USA </ COUNTRY >
        < COMPANY > Grammy </ COMPANY >
        < PRICE > 10.20 </ PRICE >
        < YEAR > 1999 </ YEAR >
      </ CD >
      < CD >
        < TITLE > For the good times </ TITLE >
        < ARTIST > Kenny Rogers </ ARTIST >
        < COUNTRY > UK </ COUNTRY >
        < COMPANY > Mucik Master </ COMPANY >
        < PRICE > 8.70 </ PRICE >
        < YEAR > 1995 </ YEAR >
      </ CD >
      < CD >
        < TITLE > Big Willie style </ TITLE >
        < ARTIST > Will Smith </ ARTIST >
        < COUNTRY > USA </ COUNTRY >
        < COMPANY > Columbia </ COMPANY >
        < PRICE > 9.90 </ PRICE >
        < YEAR > 1997 </ YEAR >
      </ CD >
      < CD >
        < TITLE > Tupelo Honey </ TITLE >
        < ARTIST > Van Morrison </ ARTIST >
        < COUNTRY > UK </ COUNTRY >
        < COMPANY > Polydor </ COMPANY >
        < PRICE > 8.20 </ PRICE >
        < YEAR > 1971 </ YEAR >
      </ CD >

    </ CATALOG > ;
 }
}