Изменение стиля разделителя в заголовке mx:DataGrid

Этот вопрос задавался много раз… (даже на флешере спросили уже:) - прим. пер.)

Как изменить или избавится от вертикальных линий в заголовке mx:DataGrid? Изменить стиль вертикальных и горизонтальных линий можно легко с помощью CSS, но как быть с линиями в заголовке?

... Вот простой ответ: Есть несколько способов сделать это. Если посмотреть API документацию для mx:DataGrid, можно найти стиль "headerSeparatorSkin". Стиль headerSeparatorSkin определяет скин, используемый для вертикальных линий заголовка виджета datagrid. Самым простым способом избавиться от этих линий будет изменение этого скина на прозрачное gif или png изображение.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send();"> 
        <mx:Style source="/styles.css" />
        
        <mx:DataGrid 
               id="dg" 
               dataProvider="{feedRequest.lastResult.rss.channel.item}" 
               top="0" bottom="0" left="0" right="0" 
               headerSeparatorSkin="@Embed('/assets/transparent.gif')" >
               
               <mx:columns>
                       <mx:DataGridColumn headerText="Posts" dataField="title"/>
                       <mx:DataGridColumn headerText="Date" dataField="pubDate"/>
               </mx:columns>
        
        </mx:DataGrid>
        
        <mx:HTTPService 
               id="feedRequest"  
               url="http://www.cynergysystems.com/blogs/rss/andrewtrice" 
               useProxy="false"   />
        
</mx:Application>

Это не единственный способ избавиться от разделителей.
Можно также создать собственный класс, который будет обрабатывать прорисовку разделителей. Класс делать ничего не будет, кроме прорисовки разделителя. 
Результат будет аналогичным, но код немного усложненным.

В предыдущем коде изменится только одна строка:
headerSeparatorSkin="skin.DataGridHeaderSeparator"

Это инструкция Flex приложению использовать класс skin.DataGridHeaderSeparator для прорисовки разделителя вместо использования класса по умолчанию mx.skins.halo.DataGridHeaderSeparator. Ниже приведен код моего класса. В нем переопределен метод measuredWidth, который возвращает всегда 0, а setActualSize убирает графику для компонента.

package skin
{
        import mx.skins.halo.DataGridHeaderSeparator;
        
        public class DataGridHeaderSeparator extends mx.skins.halo.DataGridHeaderSeparator
        {
               override public function get measuredWidth():Number
               {
                       return 0;
               }
               
               override public function setActualSize(newWidth:Number, newHeight:Number):void
               {
                       graphics.clear();
               }
        }
}

Второй подход не требует внедрения в приложение 1x1 px прозрачного изображения.

Таким образом, используя вышеприведенные способы, можно легко менять разделители компонента datagrid.

Например, чтобы иметь изображения настоящих разделителей вместо простых линий можно опять же использовать картинку:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send();"> 
        <mx:Style source="/styles.css" />
        
        <mx:DataGrid  
               id="dg" 
               dataProvider="{feedRequest.lastResult.rss.channel.item}" 
               top="0" bottom="0" left="0" right="0" 
               headerSeparatorSkin="@Embed('/assets/fx.png')" >
                
               <mx:columns>
                       <mx:DataGridColumn headerText="Posts" dataField="title"/>
                       <mx:DataGridColumn headerText="Date" dataField="pubDate"/>
               </mx:columns>
        
        </mx:DataGrid>
        
        <mx:HTTPService 
               id="feedRequest"  
               url="http://www.cynergysystems.com/blogs/rss/andrewtrice" 
                useProxy="false"   />
        
</mx:Application>

Или же сделать разделители программно:

package skin
{
        import mx.skins.halo.DataGridHeaderSeparator;
        import flash.display.Graphics;
        
        public class DataGridHeaderSeparator2 extends mx.skins.halo.DataGridHeaderSeparator
        {
               override public function get measuredWidth():Number
               {
                       return 11;
               }
               
               override public function setActualSize(newWidth:Number, newHeight:Number):void
               {
                       var g:Graphics = graphics;
                       
                       g.clear();
               
                       g.beginFill(0xFF0000);
                       g.moveTo(0,0);
                       g.lineTo(11, 0);
                       g.lineTo(6,19);
                       g.lineTo(0,0);
                       g.endFill();
               }
        }
}

Этот урок относится к огромной теме: скинование во Flex. Каждому компоненту, имеющему скин, можно его изменить двумя способами: картинками или кодом. См. также:

Исходники урока: