2

Spark DataGrid のヘッダー パーツの外観を更新するにはどうすればよいですか? これは、Spark DataGrid のヘッダーの背景色、ヘッダーのテキストの色、列の区切り記号、および並べ替えの矢印インジケーターの記号の色を設定する方法についてのコミュニティ Wiki 投稿です。

4

1 に答える 1

4

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 はグラデーションを使用します。それらが必要ない場合は、上記に加えて追加の作業を行う必要があります。

パート II
グラデーションを削除するには、2 つの新しいスキン クラスを作成する必要があります。spark.skins.spark.DataGridSkin に基づく新しいデータ グリッド スキンと、spark.skins.spark.DefaultGridHeaderRenderer に基づく新しいデータ グリッド ヘッダー スキン。最初のスキンは DataGridSkin を拡張します。2 番目のスキンは、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 には、この例に貼り付けたくないコードがたくさんあるので、変更された部分だけを示します。

最初に、「レイヤー 2 塗りつぶし」を除くすべての Rect レイヤーを削除します。次に、以下に示すように、「レイヤー 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 メソッドを更新する) か、このように塗りつぶしのアルファ値を設定できます。

<!-- 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 に付属するデフォルトのスキン クラスにスタイル値をハードコーディングしました。これらを見つけて変更することは開発者に任されていますが、これは必ずしも簡単なことではありません。

垂直の列線またはその他の不要なスキン パーツを削除するには、次のように初期化イベントでパーツのプロパティを 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

于 2013-03-20T18:38:10.620 に答える