Look and Feel

  • 5 minutes to read

The ribbon, bars, and menu's look and feel depends on the skin applied to the application.

XtraBars Look and Feel

To specify the application skin, use the DevExpress Project Settings window:

  • in the Solution Explorer, right-click the project
  • in the context menu, click DevExpress Project Settings
  • use Skin Name to select a skin
  • use Skin Palette to select a color palette (for vector-image-based skins only)

Project Settings

See the following help topic for more information about application settings: Project Settings Page.

Visual Elements and Appearances

Bar and dock controls (ribbons, bars, menus, etc.) consist of multiple visual elements — ribbon pages, application menus, backstage views, etc. The skin specifies each visual element's appearance settings — background and foreground colors, font face, size and style, etc.

To customize appearance settings for bar and dock controls, you can use controllers. The BarAndDockingController component is a controller that specifies appearance settings for the following controls/components:

Use the following components to access controllers:

  • DefaultBarAndDockingController — a toolbox component that allows you to access the default controller.

    The default controller specifies appearance settings for all bar and dock controls/components in the application. You can utilize the controller in the Windows Forms Designer. Use the Controller property to access the default controller.

    XtraBars Default Bar and Dock Controller

    To access the default controller in code, use the static (Shared in VB) Default property.

  • BarAndDockingController — a controller that you can assign to a specific control/component. You can use this controller to customize appearance settings for the assigned control/component only.

    To assign a controller to a control/component, use a dedicated property. For example, use the Controller property to assign a controller to a bar manager. The controller specifies appearance settings for all bars that belong to this manager.

You can specify appearance settings for the following visual elements:

NOTE

Skins use brushes or images to fill the background. The actual behavior depends on the skin. The background color is not in effect if the skin uses an image to fill the background.

See the following help topic for more information about skins and appearance settings: Application Appearance and Skin Colors.

Individual Visual Elements

You can also specify appearance settings for a particular visual element. For example, the Bar.Appearance property allows you to specify appearance settings for a particular bar.


using System.Drawing.Drawing2D;

bFile.Appearance.BackColor = Color.Gray;
bFile.Appearance.BackColor2 = Color.White;
bFile.Appearance.GradientMode = LinearGradientMode.Vertical;
bFile.Appearance.Options.UseBackColor = true;

The table below contains properties that you can use to customize bar and dock controls/components.

Bar and Dock Control/Component

Property

Description

Bar

Bar.Appearance

Appearance settings used to paint a specific bar.

These settings override the Bar appearance settings.

BarItem

BarItem.Appearance

Appearance settings used to paint a specific bar item.

The Font setting overrides the ItemsFont setting.

BarDockControl

BarDockControl.Appearance

Appearance settings used to paint a bar dock control.

These settings override the Dock appearance settings.

BarSubItem

BarCustomContainerItem.MenuAppearance

Appearance settings used to paint a specific sub-menu.

These settings override the SubMenu appearance settings.

PopupMenu

PopupMenu.MenuAppearance

Appearance settings used to paint a specific popup menu.

These settings override the SubMenu appearance settings.

DockPanel

DockPanel.Appearance

Appearance settings used to paint a specific dock panel's client region.

These settings override the Panel appearance settings.

XtraTabbedMdiManager

XtraTabbedMdiManager.Appearance

Appearance settings used to paint an MDI client.

XtraTabbedMdiManager

XtraTabbedMdiManager.AppearancePage

Appearance settings used to paint pages that belong to the XtraTabbedMdiManager component.

RibbonControl

BaseGallery.Appearance

Appearance settings used to paint ribbon gallery elements.

AlertControl

AlertControl.AppearanceCaption,

AlertControl.AppearanceText,

AlertControl.AppearanceHotTrackedText

Appearance settings used to paint an alert window's contents.

Skin Editor

You can also use Skin Editor to customize a specific visual element's appearance.

TIP

To identify a visual element, hold Ctrl and click it.

See the following help topic for more information on how to create a custom skin and apply it to an application: WinForms Skin Editor.

See Also