如何設置Spark DataGrid的標題樣式

Question

如何更新Spark DataGrid中標題部分的外觀？ 這是一種如何在社區Wiki帖子中設置Spark DataGrid的標題背景顏色，標題文本顏色，列分隔符和排序箭頭指示符符號顏色的方法。

Answer 1

我在網上找到了一些有關如何設置Spark DataGrid標頭樣式的示例，但並非以我所描述的方式進行。 這就是我的做法。

MXML ：

<s:DataGrid />

CSS ：

    s|DataGrid {
        symbolColor:#FF0000; /* defines the sort indicator color */
    }

    s|GridItemRenderer {
        color:#0000FF;       /* defines the header text color */
        chromeColor:#00FF00; /* defines the header background color */
    }

而已。 好吧，不完全是。 GridItemRenderer使用漸變。 如果您不想要這些，則除了上述內容之外，還必須做一些額外的工作。

第二部分
要刪除漸變，我們必須創建兩個新的外觀類。 基於spark.skins.spark.DataGridSkin的新數據網格外觀，以及基於spark.skins.spark.DefaultGridHeaderRenderer的新數據網格頭外觀。 第一個皮膚擴展了DataGridSkin。 第二層皮膚是DefaultGridHeaderRenderer的副本。

MXML ：

<s:DataGrid skinClass="view.skins.AbstractDataGridSkin"/>

AbstractDataGridSkin ：

<?xml version="1.0" encoding="utf-8"?>
<spark:DataGridSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    xmlns:spark="spark.skins.spark.*" 
    xmlns:skins="view.skins.*"
    >

    <fx:Declarations>
        <fx:Component id="headerRenderer">
            <skins:AbstractDataGridHeaderSkin />
        </fx:Component>


    <!--- Change the look of the column separator  -->
    <fx:Component id="columnSeparator">
        <s:Line>
            <s:stroke>
                <s:SolidColorStroke color="0xA6A6A6" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
    </fx:Component>

    <!--- Defines the look of the header column separator -->
    <fx:Component id="headerColumnSeparator">
        <s:Line>
            <s:stroke>
                <s:SolidColorStroke color="0x00FF00" weight="1" caps="square" />
            </s:stroke>
        </s:Line>
    </fx:Component>
    </fx:Declarations>
</spark:DataGridSkin>

此類指向新的DataGridHeaderSkin。

AbstractDataGridHeaderSkin ：

在DefaultGridHeaderRenderer中有很多代碼我不想粘貼到此示例中，因此我僅顯示更改內容。

首先刪除所有的Rect圖層，除了“第2層填充”。 接下來，將“第2層填充”更新為純色填充，如下所示：

<s:GridItemRenderer minWidth="21" minHeight="21"
                xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx">

<!-- ...original code here.. -->

<!-- layer 2: fill -->
<!--- @private -->
<!---  Set left and right to -1 to fill out header width 
<s:Rect id="fill" left="0" right="0" top="0" bottom="-1"> -->
<s:Rect id="fill" left="-1" right="-1" top="0" bottom="0">
    <s:fill>
        <s:SolidColor color="0xFFFFFF" color.hovered="0xBBBDBD" color.down="0xAAAAAA" alpha="1" >   
        </s:SolidColor>
    </s:fill>
</s:Rect>

<!-- ...original code here.. -->

</s:GridItemRenderer>

我們還必須更新sortIndicatorArrow從那里刪除漸變。

<fx:Component id="defaultSortIndicator">
    <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
        <fx:Script>
            <![CDATA[
                import spark.components.DataGrid;
                import spark.components.Grid;

                /**
                 *  @private
                 */
                public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                {
                    const dataGrid:DataGrid = grid.dataGrid;
                    if (!dataGrid)
                        return;

                    const color:uint = dataGrid.getStyle("symbolColor");
                    arrowFill.color = color;
                }
            ]]>
        </fx:Script>

        <s:fill>
            <s:SolidColor id="arrowFill" color="0" />
        </s:fill>
    </s:Path>
</fx:Component>

而已。

注意 ：如果您使用的是鍍鉻顏色，它將轉換標題填充背景。 您可以將填充添加到排除項中（更新updateDisplayList方法），也可以像這樣設置填充alpha值。

<!-- layer 2: fill -->
<!--- @private -->
<!---  Set left and right to -1 to fill out header width 
<s:Rect id="fill" left="0" right="0" top="0" bottom="-1"> -->
<s:Rect id="fill" left="-1" right="-1" top="0" bottom="0">
    <s:fill>
        <s:SolidColor alpha="1" 
                      alpha.hovered=".95"
                      alpha.down="1"/>
    </s:fill>
</s:Rect>

or add this to updateDisplayList and set the colors on the fill (chromeColor would not need to be set then)
var exclusions:Array = [fill, labelDisplay, sortIndicatorInstance];

在某些時候，這些常見樣式有望在Spark DataGrid上可用。 Spark使定義組件的外觀變得更加靈活，這雖然不錯，但隨后將樣式值硬編碼到Flex SDK隨附的默認外觀類中。 現在，留給開發人員查找和修改這些內容並不總是那么容易。

要刪除垂直列線或任何其他不需要的外觀部件，請在initialize事件中將部件的屬性設置為null，如下所示：

AbstractDataGridSkin ：

<?xml version="1.0" encoding="utf-8"?>
<spark:DataGridSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    xmlns:spark="spark.skins.spark.*" 
    xmlns:skins="view.skins.*"
    initialize="caretIndicator = null;columnSeparator=null"
    />

要設置標題的高度，請在headerComponent屬性中設置它：

    <fx:Component id="headerRenderer">
        <skins:AbstractDataGridHeaderSkin height="36" />
    </fx:Component>

資料來源： http : //ramblingdeveloper.com/ramblings/2011/9/25/skinning-a-flex-spark-datagrid-header.html