[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: View and Column Appearance

This walkthrough is a transcript of the View and Column Appearance video, available on the DevExpress YouTube Channel.

In this tutorial, you'll learn about appearance settings used to change the look of grid elements, where to find these settings for Views or individual columns and how to change the View's paint style so that you can customize theme-drawn elements.

Expanded View Appearance

Each View type provides a set of appearance settings objects that specify how to paint its elements. To access the list, expand the View's GridView.Appearance property in the Properties window. Every sub-property corresponds to a particular element and has the same type, which allows you to specify background and foreground colors, font style and so on.

You can also use the Appearances Page in the Grid Designer. This page lets you find style objects that apply to a particular grid element by selecting that element in a live grid preview.

Specify the grid row background color. Click a row in the preview section and change the corresponding appearance setting in the Property grid. The preview section immediately reflects the changes.

Change appearance settings for data cells in even rows and the changes aren't reflected by the preview. To enable this style, switch the Enable Appearance EvenRow check box.

You can preview the grid's data by switching to the Layout Page and clicking the Preview Data button. Even and odd rows are painted using the specified colors.

Return to the Appearance page and select the Empty property in the list box. Fill the View's empty space with a linear gradient.

Expanded Column Appearance

The GridControl allows you to specify appearance settings for data cells and headers of individual columns. Change the background color of data cells in the Name column using the GridColumn.AppearanceCell property. Note that the column appearance settings have a higher priority than row appearance settings applied at the grid View level.

Expanded Header Panel Appearance

Specify the background and foreground colors and font settings for the header panel.

The AppearanceObject.ForeColor property's value and AppearanceObject.Font settings are applied to all column headers while the background color is ignored. The reason for this is that column headers are themed elements, painted according to the currently selected look and feel. To enable background color settings, you can change the View's BaseView.PaintStyleName property to Flat.

After that, you can also change the group panel's background color. Run the application to see the appearance customization results at runtime.

Expanded See Also

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