在本教程中，您將學習如何使用DevExpress grid View（網格視圖）的CustomDraw…事件，您將從一個顯示普通任務數據的網格開始。首先使用事件來自定義單元格外觀，然后修改相同的事件處理程序，來根據網格數據更改單個單元格中顯示的文本。接下來將進一步擴展處理程序來在特定單元格中繪制圖像，最后將看到如何自定義繪制列標題，同時保留其交互元素，如過濾器下拉按鈕和排序符號。

P.S：DevExpress WinForms擁有180+組件和UI庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！

獲取DevExpress WinForms v24.1正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

開始

從一個應用程序開始，它有一個顯示任務數據的GridControl。

自定義繪制單個單元格

選擇grid View（網格視圖）并處理事件，這個事件提供了和參數，用于標識正在繪制的單元格列參數。

• 自定義單元格外觀
  如果單元格位于聚焦行中，則不會應用自定義繪制來確保聚焦樣式的優先級。在第一個版本的事件處理程序中，更改UnitPrice列中值大于30的單元格背景樣式。默認的繪制機制將在事件處理程序執行后調用，它將自動應用指定的背景。

C#

private void gridView_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) {
GridView view = sender as GridView;
if (e.RowHandle == view.FocusedRowHandle) return;
if (e.Column.FieldName != "UnitPrice") return;
// Fill a cell's background if its value is greater than 30.
if (Convert.ToInt32(e.CellValue) > 30)
e.Appearance.BackColor = Color.FromArgb(60, Color.Salmon);
}

運行應用程序來查看結果，如您所見，符合指定條件的單元格具有不同的外觀，并且通過這種方式，CustomDraw…事件允許您實現任何復雜性的條件格式。

• 更改單元格顯示文本
  關閉應用程序并進一步修改自定義繪制事件處理程序，如果單元格位于已分配折扣的行中，則更改事件的RowCellCustomDrawEventArgs.DisplayText參數，指定的文本也將由默認呈現機制繪制。

C#

private void gridView_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) {
// ...
// Specify the cell's display text.
double discount = Convert.ToDouble(view.GetRowCellValue(e.RowHandle, view.Columns["Discount"]));
if (discount > 0) {
double unitPrice = Convert.ToDouble(view.GetRowCellValue(e.RowHandle, view.Columns["UnitPrice"]));
double discountPrice = unitPrice * (1 - discount);
e.DisplayText = "Discount price: " + discountPrice.ToString("c2");
}
}

再次運行應用程序。注意，某些列單元格顯示的是折扣價而不是單價。從本質上講，這允許您執行使用未綁定列表達式和顯示文本格式可以執行的操作，但是使用CustomDraw…事件，您可以將這些更改應用于單個單元格，而不是整個列。

• 在單元格中顯示自定義圖像
  在包含折扣價格的單元格的默認呈現上繪制自定義圖像，使用e.Cache.DrawImage方法繪制自定義圖像。要在此之前調用默認呈現機制，請調用方法，此方法可防止在事件執行后重新調用默認繪制。

C#

private void gridView_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) {
// ...
e.DefaultDraw();
// Paint images in cells if discounts > 0.
Image image = Image.FromFile("c:\\important.png");
if (discount > 0)
e.Cache.DrawImage(image, e.Bounds.Location);
}

運行應用程序，為某些單元格顯示自定義圖像。

自定義繪制列標題

要自定義繪制列標題，請訂閱GridView.CustomDrawColumnHeader事件，使用從“橙紅色”到“白色”的漸變來填充列標題的背景，然后顯示標題說明。將事件的參數設置為true，以防止在事件處理程序完成時調用默認的繪圖機制。

C#

private void gridView_CustomDrawColumnHeader(object sender, ColumnHeaderCustomDrawEventArgs e) {
Rectangle rect = e.Bounds;
// Create a new brush
using (Brush brush = new LinearGradientBrush(e.Bounds, Color.Salmon, Color.White, LinearGradientMode.ForwardDiagonal)) {
// Fill a column's background
e.Cache.FillRectangle(brush, rect);
// Draw the column's caption
e.Appearance.DrawString(e.Cache, e.Info.Caption, e.Info.CaptionRect);
e.Handled = true;
}
}

現在運行應用程序，將列標題用“橙紅色”到“白色”漸變繪制。

但是，不會顯示通常的排序和篩選符號。有一種方法可以解決這個問題，并在列標題中顯示標準的交互式元素。您需要枚舉.InnerElements集合，并使用一個特殊設計的方法來繪制它們，如果它們的設置表明它們當前是可見的。

C#

private void gridView_CustomDrawColumnHeader(object sender, ColumnHeaderCustomDrawEventArgs e) {
// ...
// Draw the filter and sort buttons.
foreach (DevExpress.Utils.Drawing.DrawElementInfo info in e.Info.InnerElements) {
if (!info.Visible) continue;
DevExpress.Utils.Drawing.ObjectPainter.DrawObject(e.Cache, info.ElementPainter, info.ElementInfo);
}
}

再次運行應用程序來查看結果，現在標題具有自定義外觀，同時保留了標準元素，因此最終用戶仍然可以以通常的方式與列標題進行交互。

完整代碼

C#

private void gridView_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) {
GridView view = sender as GridView;
if (e.RowHandle == view.FocusedRowHandle) return;
if (e.Column.FieldName != "UnitPrice") return;
// Fill a cell's background if its value is greater than 30.
if (Convert.ToInt32(e.CellValue) > 30)
e.Appearance.BackColor = Color.FromArgb(60, Color.Salmon);
// Specify the cell's display text.
double discount = Convert.ToDouble(view.GetRowCellValue(e.RowHandle, view.Columns["Discount"]));
if (discount > 0) {
double unitPrice = Convert.ToDouble(view.GetRowCellValue(e.RowHandle, view.Columns["UnitPrice"]));
double discountPrice = unitPrice * (1 - discount);
e.DisplayText = "Discount price: " + discountPrice.ToString("c2");
}
e.DefaultDraw();
// Paint images in cells if discounts > 0.
Image image = Image.FromFile("c:\\important.png");
if (discount > 0)
e.Cache.DrawImage(image, e.Bounds.Location);
}

private void gridView_CustomDrawColumnHeader(object sender, ColumnHeaderCustomDrawEventArgs e) {
Rectangle rect = e.Bounds;
// Create a new brush
using (Brush brush = new LinearGradientBrush(e.Bounds, Color.Salmon, Color.White, LinearGradientMode.ForwardDiagonal)) {
// Fill a column's background
e.Cache.FillRectangle(brush, rect);
// Draw the column's caption
e.Appearance.DrawString(e.Cache, e.Info.Caption, e.Info.CaptionRect);
e.Handled = true;
}
// Draw the filter and sort buttons.
foreach (DevExpress.Utils.Drawing.DrawElementInfo info in e.Info.InnerElements) {
if (!info.Visible) continue;
DevExpress.Utils.Drawing.ObjectPainter.DrawObject(e.Cache, info.ElementPainter, info.ElementInfo);
}
}

更多產品資訊及授權，歡迎“”！