Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Collapse]Appearance and Conditional Formatting
    [Expand]Look and Feel
    [Collapse]Appearances
      Appearances Overview
      Tutorial: Custom Styles for Rows and Cells
      Tutorial: View and Column Appearance
      Customizing Appearances of Individual Columns, Card Fields and Bands
      Customizing Appearances of Individual Rows and Cells
      Style Schemes
    [Expand]Conditional Formats
    [Expand]Custom Painting
    [Expand]Alpha Blending and Background Images
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

How would you rate this topic?​​​​​​​