`

DataGrid 背景颜色的控制(一)

阅读更多
设置行(row)的背景色
主要是通过对DataGrid扩展,对protected函数drawRowBackground()进行重写,具体代码如下:

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,color:uint, dataIndex:int):void

{

     if (dataIndex >= dataProvider.length) {

         super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);

         return;

     }


     if (dataProvider.getItemAt(dataIndex).col3 < 2000) {//set color accordint to datas

         super.drawRowBackground(s,rowIndex,y,height,0xC0C0C0,dataIndex);

     } else {

         super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);

     }

}

这段代码中根据DataGrid的数据源进行判断来设置背景色,但是它有个缺陷,就是这个具体的背景色我们无法自己灵活指定。因此派生出新的CustomRowColorDataGrid,具体代码如下:

package cwmlab.controls

{

      import mx.controls.*;

      import flash.display.Shape;

      import mx.core.FlexShape;

      import flash.display.Graphics;

      import flash.display.Sprite;

      import mx.rpc.events.AbstractEvent;

      import mx.collections.ArrayCollection;

      import flash.events.Event;



      /**

       * This is an extended version of the built-in Flex datagrid.

       * This extended version has the correct override logic in it

       * to draw the background color of the cells, based on the value of the

       * data in the row.

       **/

      public class CustomRowColorDataGrid extends DataGrid

      {

            private var _rowColorFunction:Function;

           

            public function CustomRowColorDataGrid()

            {

                  super();

            }

            /**

             * A user-defined function that will return the correct color of the

             * row. Usually based on the row data.

             *

             * expected function signature:

             * public function F(item:Object, defaultColor:uint):uint

             **/

            public function set rowColorFunction(f:Function):void

            {

                  this._rowColorFunction = f;

            }

           

            public function get rowColorFunction():Function

            {

                  return this._rowColorFunction;

            }

           

          /**

             *  Draws a row background

             *  at the position and height specified using the

             *  color specified.  This implementation creates a Shape as a

             *  child of the input Sprite and fills it with the appropriate color.

             *  This method also uses the <code>backgroundAlpha</code> style property

             *  setting to determine the transparency of the background color.

             *

             *  @param s A Sprite that will contain a display object

             *  that contains the graphics for that row.

             *

             *  @param rowIndex The row's index in the set of displayed rows.  The

             *  header does not count, the top most visible row has a row index of 0.

             *  This is used to keep track of the objects used for drawing

             *  backgrounds so a particular row can re-use the same display object

             *  even though the index of the item that row is rendering has changed.

             *

             *  @param y The suggested y position for the background

             *  @param height The suggested height for the indicator

             *  @param color The suggested color for the indicator

             *

             *  @param dataIndex The index of the item for that row in the

             *  data provider.  This can be used to color the 10th item differently

             *  for example.

           */

          override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number, height:Number, color:uint, dataIndex:int):void

          {

            if( this.rowColorFunction != null ){

                  if( dataIndex < this.dataProvider.length ){

                        var item:Object = this.dataProvider.getItemAt(dataIndex);

                        color = this.rowColorFunction.call(this, item, color);

                  }

            }           

            super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);

          }

      }

}



在具体使用过程中可以这样调用:

<cwmlab:CustomRowColorDataGrid dataProvider="{dp}" rowColorFunction="setCustomColor">



private function setCustomColor(item:Object, color:uint):uint

{

    if( item['col3'] >= 2000 )

    {

        return 0xFF0033;

    }

    return color;

}

设置DataGrid列的背景色
这个很简单,只要设置DataGridColumn的属性backgroundColor="0x0000CC"即可。

设置DataGrid单元格(cell)的背景色
这个主要通过itemRenderer进行设置,itemRenderer可以是Label,也可以是其他如DataGridItemRenderer。

先看看用Label如何设置背景色

<mx:DataGridColumn headerText="Make" dataField="col1">

      <mx:itemRenderer>

             <mx:Component>

                  <mx:Label>  <!--using label as itemRenderer-->

                      <mx:Script><![CDATA[

                          override public function set data(value:Object):void

                          {

                              super.data = value;

                              if(value.col1 == 'Toyota'){

                                 this.opaqueBackground =0xCC0000;

                              }

                          }

                      ]]></mx:Script>

                  </mx:Label>

             </mx:Component>

      </mx:itemRenderer>

</mx:DataGridColumn>

用DataGridItemRenderer进行背景色设置如下:

<mx:DataGridColumn headerText="Year" dataField="col3">

     <mx:itemRenderer>

          <mx:Component>

              <mx:DataGridItemRenderer><!--using DataGridItemRenderer as itemRenderer-->

                   <mx:Script><![CDATA[

                       override public function set data(value:Object):void

                       {

                           super.data = value;

                           if(value.col3 >= 2000){

                                this.background = true;

                                this.backgroundColor =0x00cc00;

                           }

                        }

                   ]]></mx:Script>

              </mx:DataGridItemRenderer>

          </mx:Component>

     </mx:itemRenderer>

</mx:DataGridColumn>

分享到:
评论

相关推荐

    设置datagrid行背景色示例

    在“设置datagrid行背景色示例”中,我们看到开发者已经创建了一个继承自标准 `Datagrid` 的子类。这样的做法是为了能够更深入地控制组件的行为,例如,添加自定义的样式规则。通过子类化,我们可以覆盖或扩展原有...

    DataGrid的单元格背景和文字颜色

    在模板内,你可以直接设置TextBlock或其他元素的Foreground和Background属性,以改变文字和背景颜色。 ```xml &lt;DataGrid&gt; &lt;DataGrid.Columns&gt; &lt;/DataGrid.Columns&gt; &lt;/DataGrid&gt; ``` 2. **使用...

    wpf datagrid 单元格颜色 根据datatable动态显示datagrid内容

    在WPF(Windows Presentation Foundation)开发中,DataGrid控件是一种非常常见的用于展示表格数据的组件。本主题将深入探讨如何根据DataTable中的数据动态显示DataGrid的内容,并且根据特定条件改变单元格的颜色。 ...

    增强颜色设置功能的DataGrid 带示例和源码

    总的来说,这个压缩包提供了对DataGrid控件的一个有价值的增强,让开发者能够更自由地控制界面的视觉表现,从而更好地满足用户的交互需求。通过学习和利用这个源码,开发者不仅可以提升现有项目的功能,也能积累关于...

    C#实现改变DataGrid某一行和单元格颜色的方法

    本文所述实例主要实现WPF项目中C#改变DataGrid某一行和单元格颜色的功能。分享给大家供大家参考。具体方法如下: 如果要改变DataGrid某一行的颜色、高度,以及某个单元格的颜色、单元格字体的颜色,就必需取到...

    C# Wince设置DataGridCell的格式、颜色

    在C#编程环境中,Windows CE (Wince) 平台上的开发经常涉及到用户界面的创建,其中DataGrid控件是一个...通过对DataGridCell的格式和颜色进行控制,以及利用数据绑定技术,可以极大地提升用户体验并优化数据操作流程。

    C#WPF之DataGrid用法

    除了基本的数据展示和操作外,DataGrid还支持丰富的样式设计,比如改变字体、颜色、背景等。通过`Style`、`Template`等属性可以自定义DataGrid的整体外观以及单个列的样式。 #### 六、总结 通过本文的学习,我们...

    flex 中datagrid 动态攺变行颜色

    为了实现行颜色的动态变化,我们需要为Datagrid创建一个自定义的ItemRenderer。在ItemRenderer类中,我们将监听数据源的`data`属性,当数据改变时更新背景色。 ```actionscript public class CustomGridRow extends...

    flex as actionscript datagrid 背景色 flash itemRenderer script iframe overrider 跳转到别的页面

    你可以为整个DataGrid设置背景色,也可以为特定行或列设置不同的颜色,以达到视觉效果或强调特定数据的目的。 5. **Flash集成**: 虽然Flex和Flash在某些方面有交集,但它们在技术上是独立的。在描述中提到的"flash ...

    鼠标移动DataGrid显示详细信息

    - `onmouseout`:当鼠标离开某一项时,恢复该项的原始背景颜色,并调用 `Hide` 函数隐藏详细信息。 - `dtab.Rows[e.Item.ItemIndex+(DataGrid1.CurrentPageIndex*DataGrid1.PageSize)]`:从绑定到 DataGrid 的数据...

    WPF之DataGrid使用示例

    可以自定义表头的样式,例如添加背景色、文字颜色等: ```xml &lt;DataGrid.ColumnHeaderStyle&gt; &lt;/DataGrid.ColumnHeaderStyle&gt; ``` ### 7. 排序和分组 通过设置`SortMemberPath`和`SortDirection`属性,...

    wpf DataGrid 自定义样式!

    通过创建一个新的 `ControlTemplate`,我们可以改变控件的元素结构,调整其颜色、边框、背景、布局等。对于 `DataGrid`,我们可以通过设置 `ControlTemplate` 来更改它的整体布局,包括表头、行、单元格等各个部分。...

    WPF DataGrid样式

    1. **整体外观**:你可以自定义DataGrid的整体背景色、边框颜色、边框宽度等。这可以通过设置DataGrid的Background、BorderBrush和BorderThickness属性来实现。 2. **单元格样式**:DataGrid中的每个单元格都可以有...

    asp.net DataGrid所有的功能讲解实现.rar

    9. **单击datagrid行任意位置选中前面的按钮并且改变行颜色**:通过设定SelectionMode和SelectedIndexChanged事件,可以实现在行被点击时选中对应的行,并改变行的背景色,同时高亮行内的按钮。 这些文档覆盖了ASP...

    DataGrid使用心得

    这里将脚注行的文字颜色设置为黑色,背景颜色设置为浅灰色(`#CCCCCC`)。 2. **SelectedItemStyle:**用于定义被选中行的样式。 - **示例代码**: ```xml ``` 这里设置了选中行的字体加粗显示,文字颜色为...

    VB渐变颜色模块代码

    这个"VB渐变颜色模块代码"很可能是为Visual Basic应用程序添加动态视觉效果的一个组件,使得窗口背景或图片框的填充色能够平滑地从一种颜色过渡到另一种颜色。下面我们将深入探讨这一主题。 首先,我们需要理解什么...

    wpf DataGridStyle

    在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,常用于显示和编辑表格数据。本文将深入探讨如何自定义`DataGrid`的列标题样式、行样式、鼠标悬浮及选择样式,以及滚动条的样式,帮助你...

    DataGrid控件

    使用DefaultCellStyle、HeaderStyle、AlternatingRowStyle等属性可以调整单元格的字体、颜色、背景色等。 7. **事件处理** DataGrid控件有丰富的事件,如CellClick、CellFormatting、RowValidating等,开发者可以...

    vb+datagrid

    可以通过设置`DefaultCellStyle`、`AlternatingRowDefaultCellStyle`、`HeaderStyle`等属性来改变`DataGrid`的显示样式,比如字体、颜色、背景等。此外,还可以调整行高、列宽,以及是否显示网格线。 6. **数据...

    WPF DataGrid Style

    2. 样式属性:可以修改`DataGrid`的背景色、边框、字体、颜色、行高、列间距等视觉属性。 3. 控件模板:通过`ControlTemplate`可以深度定制`DataGrid`的布局和外观,包括滚动条、选择框、表头等元素。 4. 响应状态:...

Global site tag (gtag.js) - Google Analytics