Look and Feel Technology - Much More than just Paint Styles

This white paper will introduce you to the LookAndFeel technology developed by Developer Express for its .NET WinForms controls. This technology lets you provide a consistent appearance across different controls (XtraGrid, XtraTreeList, XtraVerticalGrid, XtraBars and etc.) making it much easier to customize their appearance.

 

What is look and feel?

With the release of the XtraGrid Suite v2 we have introduced the unique LookAndFeel technology to our Windows® Forms .NET products. This technology enables you to provide a consistent appearance across your entire application and then to change the appearance of all the controls at once.

It is important not to confuse LookAndFeel technology with Styles. Modifying a control's look and feel settings doesn't involve specifying the colors and fonts used to paint individual elements. The LookAndFeel determines how the control's elements such as headers, scrollbars, borders, buttons are painted and the way in which they respond to user actions such as clicking, hovering with the mouse cursor, etc.

Currently, Developer Express controls provide you with 5 look and feel choices (Flat, Style3D, UltraFlat, XP and Office2003) and this collection constantly being added to, so you can imitate the latest Office and Windows look and feel solutions. For example, the recently added Office2003 style emulates the look and feel of Microsoft Office® 2003. The image below shows you a sample of an application with the Office2003 look and feel applied.

Figure 1. A Windows® Forms application with the Office2003 look and feel applied.

A Common Look and Feel for an Application

When Developer Express .NET controls (XtraGrid, XtraTreeList, XtraVerticalGrid, etc.) are placed on a form they are painted with the native Windows XP style, as shown below:

Figure 2. The controls' default look and feel.

By default, all the controls residing on the application's forms use the default look and feel settings. To access these settings at design time, you should drop a DefaultLookAndFeel component onto a form. This allows you to change just a single property setting which then changes the entire look and feel of your application. The image below shows you what you will see on-screen when you disable the WindowsXP style, the controls are painted flat.

Figure 3. The controls' look and feel after disabling the WindowsXP style.

This can be also performed at runtime using the UserLookAndFeel.Default static property which accesses the default LookAndFeel object:

C#:

using  DevExpress.LookAndFeel;
//  
UserLookAndFeel.Default.UseWindowsXPTheme  =   false ;

VB.NET

Imports  DevExpress.LookAndFeel
'  
UserLookAndFeel.Default.UseWindowsXPTheme  =   False

 

How does This Work

The Look and feel settings used (either by default or by a single control) are represented by a DevExpress.Utils.UserLookAndFeel object whose main properties are shown below:

Figure 4. The Look and Feel settings of a DefaultLookAndFeel component.

Every control supporting look and feel technology publishes its own LookAndFeel property just like the default look and feel object. The UseDefaultLookAndFeel property is set to true by default, and that’s why you can change the appearance of all the controls at once just by modifying the default look and feel.

As you can see there are two properties that allow you to change the look and feel applied – Style and UseWindowsXPTheme. The UseWindowsXPTheme property specifies whether the control should be painted using the current Windows XP theme. If it's set to true, the control is painted using the current XP theme while the Style property's value is ignored. In the cases listed below the control will be painted according to the Style property:

			the UseWindowsXPTheme property is set to false;

			the application is not running under WindowsXP;

			a Windows Classic theme is used.

Thus, using two properties instead of one enables you to apply Windows XP painting to controls and at the same time, specify the style that will be used if XP themes are unavailable.

Total Flexibility in Look and Feel Customization

If you prefer not to use a centralized look and feel, and instead prefer to specify the painting style for an individual control(s), then you can do so with ease by setting the UseDefaultLookAndFeel property to false. Again, the manner in which the control will be painted is determined by a pair of properties: UseWindowsXPTheme and Style.

LookAndFeel technology is not limited to using the default settings or a single control's look and feel settings. It also gives you the ability to provide a common appearance for a group of controls independently of the overall look and feel of the application. This is particularly useful when you have several forms in an application and want to provide different look and feel settings for the controls residing on each of them. In this case you should create a custom look and feel object (DevExpress.LookAndFeel.UserLookAndFeel object) and assign it to the controls' ParentLookAndFeel property. Once a parent look and feel has been assigned to the control, the default and its own look and feel settings are ignored. Changes made to the parent’s look and feel immediately affect its children. This saves you from having to write additional code lines.

The sample code below demonstrates how to create a user look and feel and assign it to a group of controls:

C#:

using  DevExpress.LookAndFeel;
//  
//  creating a new look and feel and customizing its settings
UserLookAndFeel customLookAndFeel  =   new  UserLookAndFeel();
customLookAndFeel.UseDefaultLookAndFeel  =   false ;
customLookAndFeel.Style  =  LookAndFeelStyle.Office2003;
//  assigning the created look and feel to the tree list and grid controls
treeList1.LookAndFeel.ParentLookAndFeel  =  customLookAndFeel;
gridControl1.LookAndFeel.ParentLookAndFeel  =  customLookAndFeel;

VB.NET:

Imports  DevExpress.LookAndFeel
'  
'  creating a new look and feel and customizing its settings
Dim  customLookAndFeel  As  UserLookAndFeel   =   New  UserLookAndFeel()
customLookAndFeel.UseDefaultLookAndFeel  =   False
customLookAndFeel.Style  =  LookAndFeelStyle.Office2003
'  assigning the created look and feel to the tree list and grid controls
TreeList1.LookAndFeel.ParentLookAndFeel  =  customLookAndFeel
GridControl1.LookAndFeel.ParentLookAndFeel  =  customLookAndFeel

 

The following image illustrates the look and feel mechanism, and the way in which it affects the controls' appearances.

Figure 5. The Look And Feel mechanism.

Extra Look and Feels

Some Developer Express Windows® Forms .NET controls (XtraGrid, XtraNavBar, XtraEditors, etc.) support unique look and feels. For example, the XtraGrid has the MixedXP style that can be applied to its views. This style is the same as "WindowsXP", but column headers, band headers, footer, group footers and some other elements are painted flat. This paint style has been introduced to allow flat-painted elements to have custom styles while the rest are painted using the Windows XP theme applied.

Figure 6. The XtraGrid control with the MixedXP style applied.

One more example is the XtraNavBar control that has 13 predefined views which enable you to specify its desired look and feel. The views provided by the XtraNavBar are not affected by the LookAndFeel technology since the control introduces several different XP theme painted views, ultra-flat views, etc.

Figure 7. The XtraNavBar control with different views applied.

Summary

With Developer Express controls you get:

			The latest look and feels

			Quicker customization of the appearances of controls - fewer code lines

			Several approaches to look and feel customization – from the entire application down to individual controls

			A flexible approach to specifying the look and feel – with and without XP themes

			More than just the standard appearances – some controls give you unique paint styles

Note that this is not all. The appearance of all Developer Express Windows® Forms .NET controls can be also customized by setting their individual style properties which gives you the ability to provide exactly the look and feel that your Business needs dictate.