[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Collapse]Get Started With Data Grid and Views
     [Collapse]Appearance and Conditional Formatting
       Tutorial: Conditional Formatting
       Tutorial: Custom Drawing
       Tutorial: Custom Styles for Rows and Cells
       Tutorial: View and Column Appearance
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Filter and Search
     [Expand]Split Presentation
     [Expand]Row Preview Sections
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tutorial: Custom Drawing

This walkthrough is a transcript of the Custom Drawing video available on the DevExpress YouTube Channel.

In this tutorial, you will learn how to use the grid View's CustomDraw… events. You'll start with a grid displaying plain task data. First, you'll use an event to customize the appearance of individual cells. Then, the same event handler will be modified to alter the displayed text in individual cells depending on grid data. You'll then extend the handler even further to draw images within specific cells. Finally, you'll see how to custom paint column headers while keeping their interactive elements, such as filter dropdown buttons and sort glyphs.

Expanded Starting Point

Start with an application that has a GridControl displaying task data.

Expanded Custom Drawing Individual Cells

Choose the grid View and handle the GridView.CustomDrawCell event. This event provides you with the RowCellCustomDrawEventArgs.RowHandle and RowCellCustomDrawEventArgs.Column parameters that identify the cell being painted.

  • Customizing Cell Appearance

    If a cell is in the focused row, custom draw is not applied to ensure the focused style priority. In this first version of the event handler, change the background style of the UnitPrice column's cells whose values are greater than 30. The default painting mechanism will be invoked after event handler execution, and it will automatically apply the specified background.

    Run the application to see the result. As you see, cells that conform to the specified condition have a different appearance, and in that way the CustomDraw… event allow you to implement conditional formatting of any complexity.

  • Changing Cell Display Text

    Close the application and further modify the custom draw event handler. Change the event's RowCellCustomDrawEventArgs.DisplayText parameter if a cell resides within a row that has a discount assigned. The specified text will also be painted by the default rendering mechanism.

    Run the application again. Notice that certain column cells display the discounted price instead of the unit price. In essence, this allows you to do what you could do using Unbound Column expressions and Display Text Formatting, but with CustomDraw... events, you can apply these changes to individual cells, rather than to entire columns.

  • Displaying Custom Images within Cells

    Draw custom images over the default rendering for cells containing discount prices. Paint a custom image using the e.Cache.DrawImage method. To invoke the default rendering mechanism prior to this, call the CustomDrawEventArgs.DefaultDraw method. This method prevents default painting from being re-invoked after event execution.

    Run the application. Custom images are displayed for certain cells.

Expanded Custom Drawing Column Headers

To custom paint column headers, subscribe to the GridView.CustomDrawColumnHeader event. Use the gradient from 'Salmon' to 'White' to fill the background of column headers, and after that, display header captions. Set the event's CustomDrawEventArgs.Handled parameter to true to prevent the default painting mechanism from being invoked when the event handler is completed.

Now run the application. Column headers are painted with the 'Salmon' to 'White' gradient.

However, the usual sort and filter glyphs are not displayed. There is a way to fix this and display standard interactive elements within column headers. You need to enumerate the ColumnHeaderCustomDrawEventArgs.Info.InnerElements collection and use a specially designed method to paint them if their settings indicate that they are currently visible.

Run the application again to see the result. Now, the headers have a custom appearance while keeping the standard elements so end-users can still interact with column headers in the usual manner.

Expanded Complete Code

Expanded See Also

Is this topic helpful?​​​​​​​