在本教程中，您將學(xué)習(xí)如何使用DevExpress grid View（網(wǎng)格視圖）的CustomDraw…事件，您將從一個(gè)顯示普通任務(wù)數(shù)據(jù)的網(wǎng)格開始。首先使用事件來(lái)自定義單元格外觀，然后修改相同的事件處理程序，來(lái)根據(jù)網(wǎng)格數(shù)據(jù)更改單個(gè)單元格中顯示的文本。接下來(lái)將進(jìn)一步擴(kuò)展處理程序來(lái)在特定單元格中繪制圖像，最后將看到如何自定義繪制列標(biāo)題，同時(shí)保留其交互元素，如過濾器下拉按鈕和排序符號(hào)。

P.S：DevExpress WinForms擁有180+組件和UI庫(kù)，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無(wú)論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

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

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

開始

從一個(gè)應(yīng)用程序開始，它有一個(gè)顯示任務(wù)數(shù)據(jù)的GridControl。

自定義繪制單個(gè)單元格

選擇grid View（網(wǎng)格視圖）并處理事件，這個(gè)事件提供了和參數(shù)，用于標(biāo)識(shí)正在繪制的單元格列參數(shù)。

• 自定義單元格外觀
  如果單元格位于聚焦行中，則不會(huì)應(yīng)用自定義繪制來(lái)確保聚焦樣式的優(yōu)先級(jí)。在第一個(gè)版本的事件處理程序中，更改UnitPrice列中值大于30的單元格背景樣式。默認(rèn)的繪制機(jī)制將在事件處理程序執(zhí)行后調(diào)用，它將自動(dòng)應(yīng)用指定的背景。

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);
}

運(yùn)行應(yīng)用程序來(lái)查看結(jié)果，如您所見，符合指定條件的單元格具有不同的外觀，并且通過這種方式，CustomDraw…事件允許您實(shí)現(xiàn)任何復(fù)雜性的條件格式。

• 更改單元格顯示文本
  關(guān)閉應(yīng)用程序并進(jìn)一步修改自定義繪制事件處理程序，如果單元格位于已分配折扣的行中，則更改事件的RowCellCustomDrawEventArgs.DisplayText參數(shù)，指定的文本也將由默認(rèn)呈現(xiàn)機(jī)制繪制。

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");
}
}

再次運(yùn)行應(yīng)用程序。注意，某些列單元格顯示的是折扣價(jià)而不是單價(jià)。從本質(zhì)上講，這允許您執(zhí)行使用未綁定列表達(dá)式和顯示文本格式可以執(zhí)行的操作，但是使用CustomDraw…事件，您可以將這些更改應(yīng)用于單個(gè)單元格，而不是整個(gè)列。

• 在單元格中顯示自定義圖像
  在包含折扣價(jià)格的單元格的默認(rèn)呈現(xiàn)上繪制自定義圖像，使用e.Cache.DrawImage方法繪制自定義圖像。要在此之前調(diào)用默認(rèn)呈現(xiàn)機(jī)制，請(qǐng)調(diào)用方法，此方法可防止在事件執(zhí)行后重新調(diào)用默認(rèn)繪制。

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);
}

運(yùn)行應(yīng)用程序，為某些單元格顯示自定義圖像。

自定義繪制列標(biāo)題

要自定義繪制列標(biāo)題，請(qǐng)訂閱GridView.CustomDrawColumnHeader事件，使用從“橙紅色”到“白色”的漸變來(lái)填充列標(biāo)題的背景，然后顯示標(biāo)題說(shuō)明。將事件的參數(shù)設(shè)置為true，以防止在事件處理程序完成時(shí)調(diào)用默認(rèn)的繪圖機(jī)制。

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;
}
}

現(xiàn)在運(yùn)行應(yīng)用程序，將列標(biāo)題用“橙紅色”到“白色”漸變繪制。

但是，不會(huì)顯示通常的排序和篩選符號(hào)。有一種方法可以解決這個(gè)問題，并在列標(biāo)題中顯示標(biāo)準(zhǔn)的交互式元素。您需要枚舉.InnerElements集合，并使用一個(gè)特殊設(shè)計(jì)的方法來(lái)繪制它們，如果它們的設(shè)置表明它們當(dāng)前是可見的。

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);
}
}

再次運(yùn)行應(yīng)用程序來(lái)查看結(jié)果，現(xiàn)在標(biāo)題具有自定義外觀，同時(shí)保留了標(biāo)準(zhǔn)元素，因此最終用戶仍然可以以通常的方式與列標(biāo)題進(jìn)行交互。

完整代碼

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);
}
}

更多產(chǎn)品資訊及授權(quán)，歡迎“”！