效果圖

TotalAmount欄位是新加的，用來計算總價（orderPrice*orderCount），在資料庫表中不存在

實現

第一步：新增一個GridControl，設定在父容器中停靠，設定資料來源，將GridControl的MainView轉換成CardView

第二步：在Run DesDesigner設計介面中新加一列TotalAmount，設定列的Caption屬性和FieldName屬性為TotalAmount,

並且將欄位的UnboundType設定成Decimal

第三步：給CardView新增CustomUnboundColumnData事件

private void cardView1_CustomUnboundColumnData(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnDataEventArgs e)
        {

            if (e.Column.FieldName == "TotalAmount" && e.IsGetData)
            {
                DataRow dataRow = jWDBDataSet4.Tables["tb_order"].Rows[e.ListSourceRowIndex];
                decimal orderPrice = dataRow["orderPrice"] == DBNull.Value ? 0 : Convert.ToDecimal(dataRow["orderPrice"]);
                int orderCount = dataRow["orderCount"] == DBNull.Value ? 0 : Convert.ToInt32(dataRow["orderCount"]);
                e.Value = orderPrice * orderCount;
            }
        }
 

第四步：給CardView新增CustomDrawCardFieldValue事件

 private void cardView1_CustomDrawCardFieldValue(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e)
        {
            Brush brush = e.Cache.GetGradientBrush(e.Bounds, Color.Aquamarine, Color.DarkSeaGreen, LinearGradientMode.Horizontal);
            if (e.Column.FieldName == "TotalAmount")
            {
                brush = e.Cache.GetGradientBrush(e.Bounds, Color.White, Color.SkyBlue, LinearGradientMode.Horizontal);
                e.Appearance.ForeColor = Color.Indigo;
                e.Appearance.Font = e.Cache.GetFont(e.Appearance.Font, FontStyle.Bold);
            }
            e.Graphics.FillRectangle(brush, e.Bounds);
            e.Appearance.DrawString(e.Cache, e.DisplayText, e.Bounds);
            e.Handled = true;
        }