# Appearance Customization | WPF Controls | DevExpress Documentation

This topic describes properties and techniques that you can use to customize Bar, Toolbar, and Ribbon UI elements.

## Common Properties

You can use the following standard WPF properties to customize the appearance of [Bar/Toolbar/Ribbon](/WPF/115392/controls-and-libraries/ribbon-bars-and-menu) elements:

- Background
- BorderBrush
- BorderThickness
- CornerRadius
- Foreground
- Margin
- Padding

### Use Triggers for Conditional Customization

Use the [BarItem.Triggers](/WPF/DevExpress.Xpf.Bars.BarItem.Triggers) property to conditionally customize the [BarItem](/WPF/DevExpress.Xpf.Bars.BarItem) appearance properties. The standard WPF triggers applied to [BarItems](/WPF/DevExpress.Xpf.Bars.BarItem) do not customize the [BarItemLink](/WPF/DevExpress.Xpf.Bars.BarItemLink) appearance. The [BarItem.Triggers](/WPF/DevExpress.Xpf.Bars.BarItem.Triggers) property checks the trigger condition for each **BarItemLink** that is bound to the **BarItem**.

Tip

For more information on the bar item structure, refer to the following help topic: [Items and Links](/WPF/118282/controls-and-libraries/ribbon-bars-and-menu/common-concepts/items-and-links).

## Bars

### Bar Item States

Use the following properties to specify the possible states for bar items and bar item links within a RibbonControl:

- [BarItem.RibbonStyle](/WPF/DevExpress.Xpf.Bars.BarItem.RibbonStyle)
- [BarItemLinkBase.RibbonStyle](/WPF/DevExpress.Xpf.Bars.BarItemLinkBase.RibbonStyle)

If the [BarItemLinkBase.RibbonStyle](/WPF/DevExpress.Xpf.Bars.BarItemLinkBase.RibbonStyle) property is set to **Default**, the corresponding [BarItem.RibbonStyle](/WPF/DevExpress.Xpf.Bars.BarItem.RibbonStyle) property is used. Otherwise, the [BarItem.RibbonStyle](/WPF/DevExpress.Xpf.Bars.BarItem.RibbonStyle) property is ignored.

### BarSplitButtonItem

The [BarSplitButtonItem](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem) control consists of a command with a down arrow. You can use appearance properties inherited from the [BarItem](/WPF/DevExpress.Xpf.Bars.BarItem) control to specify the appearance of the [BarSplitButtonItem](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem) command part.

![BarSplitButtonItem](/WPF/images/barsplitbuttonitem10098.png)

Use the following properties to specify the arrow appearance:

- [ArrowAlignment](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowAlignment)
- [ArrowBackground](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowBackground)
- [ArrowBorderBrush](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowBorderBrush)
- [ArrowBorderThickness](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowBorderThickness)
- [ArrowCornerRadius](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowCornerRadius)
- [ArrowForeground](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowForeground)
- [ArrowPadding](/WPF/DevExpress.Xpf.Bars.BarSplitButtonItem.ArrowPadding)

## Ribbon

### Visual Elements

The following table lists styles that define the appearance of the Ribbon’s visual elements:

| Visual Element | Style |
| --- | --- |
| RibbonPage content | [ContentBorderStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.ContentBorderStyle) |
| RibbonPageGroup header | [HeaderBorderStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.HeaderBorderStyle) |
| RibbonPage caption | [NormalPageCaptionTextStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.NormalPageCaptionTextStyle) |
| Selected RibbonPage caption | [SelectedPageCaptionTextStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.SelectedPageCaptionTextStyle) |
| Hovered RibbonPage caption | [HoverPageCaptionTextStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.HoverPageCaptionTextStyle) |

### Paint Styles

The [RibbonControl](/WPF/DevExpress.Xpf.Ribbon.RibbonControl) ships with the following paint styles:

**Office Slim**

The Ribbon style inspired by the ribbon UI introduced in Microsoft “Office Universal” apps. 

![Ribbon OfficeSlim](/WPF/images/dx-ribbon-officeslim25954.png)

**Tablet Office**

A style inspired by the Ribbon control in Microsoft Office for iPad.

![Ribbon TabletOffice](/WPF/images/dx-ribbon-tabletoffice25955.png)

**Office 2019 Ribbon Control**

![Ribbon Office2019](/WPF/images/ribbon_office2019-style.png)

A style inspired by the Ribbon control in Microsoft Office 2019.

**Office 2010 Ribbon Control**

![Ribbon Office2010](/WPF/images/ribbon_office201012384.png)

To implement an application menu found in Microsoft Office 2010, use the [BackstageViewControl](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl). Assign a BackstageViewControl to the [RibbonControl.ApplicationMenu](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.ApplicationMenu) property. Refer to the [Backstage View](/WPF/115363/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-menu) topic for more information.

**Office 2007 Ribbon Control**

This style emulates the Ribbon used in Microsoft Office 2007.

![Ribbon Office2007](/WPF/images/ribbon_office200712383.png)

To implement an application menu found in Microsoft Office 2007, use the [ApplicationMenu](/WPF/DevExpress.Xpf.Ribbon.ApplicationMenu). Assign an ApplicationMenu to the [RibbonControl.ApplicationMenu](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.ApplicationMenu) property. Refer to the [Application Menu](/WPF/115363/controls-and-libraries/ribbon-bars-and-menu/ribbon/ribbon-menu) topic for more information.

Use the following properties to change the paint style of the **RibbonControl** and its elements:

- [ApplicationMenu.RibbonStyle](/WPF/DevExpress.Xpf.Ribbon.ApplicationMenu.RibbonStyle)
- [BackstageItem.RibbonStyle](/WPF/DevExpress.Xpf.Ribbon.BackstageItem.RibbonStyle)
- [BackstageViewControl.RibbonStyle](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl.RibbonStyle)
- [RibbonControl.AeroBorderRibbonStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.AeroBorderRibbonStyle)
- [RibbonControl.RibbonStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.RibbonStyle)