Skip to main content

Office View

  • 7 minutes to read

Property Grid - Office View

The Office View emulates settings panels available in Microsoft Office applications. This view type supports the following features:

  • Properties organized into tabs
  • Two editors for numeric properties: a track bar and a text box with spin buttons
  • Custom editors
  • Property markers

To activate the Office View, set the PropertyGridControl.ActiveViewType property to Office.


The Office View does not support multi-editor rows. If the control contains multi-editor rows and you change the ActiveViewType property from Classic to Office in the Windows Forms Designer, the control automatically converts multi-editor rows into multiple single-editor rows. This operation is irreversible.


Run the following demo to see the Office View: Property Grid module in the XtraVerticalGrid MainDemo.

Organize Properties into Tabs

The default Office View displays properties without tabs. To organize properties into tabs, you should create these tabs and assign properties to them. The images below display the same object with and without tabs.

Property Grid - Office View - No Tabs Property Grid - Office View

To create tabs, follow the steps below:

  1. Assign an object to the PropertyGridControl.SelectedObject property.

  2. In the control’s smart tag, click Run Designer. Switch to the Tabs page.

  3. Click Create Tab. Select the created tab and use the check boxes on the right to add properties to the tab. Note that the Property Grid does not display a property if you do not assign it to a tab.

    Use the Tab Properties section to specify the tab’s caption and icon.

    Property Grid - Tabs Design Time

    You can also click the PropertyGridControl.Tabs property’s ellipsis button in the Properties window to invoke a dialog that creates tabs.

    Property Grid - Tabs Collection Editor

Organize Properties into Tabs in Code

Handle the PropertyGridControl.TabPanelCustomize event as follows to create tabs in code and populate them with properties and categories:

  1. Create DevExpress.XtraVerticalGrid.Tab objects.
  2. Add property names to the tab’s FieldNames collection.
  3. Add category names (see CategoryAttribute) to the tab’s CategoryNames collection. If a category name has a space symbol, replace it with an underscore. For example, replace Window Style with Window_Style.
  4. Add tabs to the Tabs collection.
  5. Use the PropertyGridControl.SelectedTab property to specify the selected tab (optional).


The code sample below organizes properties into the following tabs:

  • Accessibility — contains the Accessibility category and the Text property.
  • Appearance — contains the Appearance category.

Property Grid - Customize Tab Panel

using DevExpress.XtraVerticalGrid;
using DevExpress.Utils.Svg;

private void propertyGridControl1_TabPanelCustomize(object sender, DevExpress.XtraVerticalGrid.Events.TabPanelCustomizeEventArgs e) {
    //Tab #1.
    Tab tab1 = new Tab();
    tab1.Caption = "Accessibility";
    tab1.ImageOptions.Image = SvgBitmap.FromFile(@"D:\Images\Pages.svg").Render(null, 1);
    //Add a property.
    //Add a category.

    //Tab #2.
    Tab tab2 = new Tab();
    tab2.Caption = "Appearance";
    tab2.ImageOptions.Image = SvgBitmap.FromFile(@"D:\Images\Medium.svg").Render(null, 1);


    propertyGridControl1.SelectedTab = propertyGridControl1.Tabs[0];

Display Trackbars for Numeric Properties

To display a trackbar editor for a numeric property, enable the ShowTrackBar option. Use the MinValue and MaxValue to specify the trackbar’s minimum and maximum values, respectively.

If you generate rows at design time, you can also set these properties in the designer.


You can also use the ShowTrackBar event argument in a PropertyGridControl.CustomRowCreated event handler.

The code below displays a trackbar editor for the Font.Size property. The event handler also specifies the minimum and maximum editor values.

private void PropertyGridControl1_CustomRowCreated(object sender, DevExpress.XtraVerticalGrid.Events.CustomRowCreatedEventArgs e) {
    if (e.Row.Properties.FieldName == "Font.Size") {
        PGridNumericEditorRow row = e.Row as PGridNumericEditorRow;
        row.MinValue = 8;
        row.MaxValue = 72;
        row.ShowTrackBar = true;
        row.IgnoreMinMaxForSpinEdit = true;

Customize Rows Dynamically

The Property Grid fires the PropertyGridControl.CustomRowCreated event when it generates rows. You can handle this event to customize created rows.

The following example displays properties of an AppSettings object in a Property Grid in OfficeView mode. The code handles the PropertyGridControl.CustomRowCreated event to hide editors for the SystemSettings and ReportSettings properties.

Property Grid - Office View - CustomRowCreated

public partial class Form1 : Form {
    public AppSettings Settings { get; set; } = new AppSettings();
    public Form1() {
        propertyGridControl1.ActiveViewType = DevExpress.XtraVerticalGrid.PropertyGridView.Office;
        propertyGridControl1.CustomRowCreated += PropertyGridControl1_CustomRowCreated;
        propertyGridControl1.SelectedObject = Settings;
    private void PropertyGridControl1_CustomRowCreated(object sender, DevExpress.XtraVerticalGrid.Events.CustomRowCreatedEventArgs e) {
        // Hide editors for "SystemSettings" and "ReportSettings" properties.
        if (e.Row.Properties.FieldName == "SystemSettings" || e.Row.Properties.FieldName == "ReportSettings") {
            e.Row = new PGridEmptyRow();
            e.Handled = true;

public class AppSettings {
    [DisplayName("System Settings")]
    public SystemSettings SystemSettings { get; } = new SystemSettings();

    public ReportSettings ReportSettings { get; set; } = new ReportSettings();

public class SystemSettings {
    [DisplayName("Run in background")]
    public bool RunInBackground { get; set; } = true;

    [DisplayName("Process count")]
    public int ProcessCount { get; set; } = 2;

public class ReportSettings {
    public decimal ZoomFactor { get; set; } = 100;

Row Bricks (Property Markers)

The Office View can display property markers — small rectangles displayed next to property editors. A property marker shows whether a property is set to its default value and allows a user to invoke a context menu.

Enable Property Markers and Populate the Context Menu

To display property markers, enable the ShowRowBrick option. The default context menu contains the Reset command that sets the property to its default value. To populate the context menu with custom commands, handle the PropertyGridControl.RowBrickMenuShowing event.

Property Grid - Property Markers

using DevExpress.Utils.Menu;

DXMenuItem createDataBindingItem;
protected DXMenuItem CreateDataBindingItem {
    get {
        if (createDataBindingItem == null) {
            DXMenuItem item = new DXMenuItem("Create Data Binding...");
            item.Click += (s, ee) => MessageBox.Show("'Create Data Binding...' is clicked.");
            createDataBindingItem = item;
        return createDataBindingItem;
private void Grid_RowBrickMenuShowing(object sender, Events.PopupMenuShowingEventArgs e) {
    if(e.Row.Properties.FieldName == "Appearance.BackColor")


When a user right-clicks a property (not a property marker), the context menu does not contain commands added in a RowBrickMenuShowing event handler.

Property Marker Colors

A property marker color depends on whether the property is set to its default value. The default colors depend on the applied skin. You can handle the PropertyGridControl.CustomDrawRowBrick event to customize property marker colors.

private void propertyGridControl1_CustomDrawRowBrick(object sender, DevExpress.XtraVerticalGrid.Events.CustomDrawRowBrickEventArgs e) {
    e.Handled = true;
    Size size = new Size(7, 7);
    Rectangle bounds = RectangleHelper.GetCenterBounds(e.RowBrickInfo.BrickArea, size);
    if (e.RowBrickInfo.State == DevExpress.Utils.Drawing.ObjectState.Normal)
        e.Cache.FillRectangle(Color.Transparent, bounds);
    if (e.RowBrickInfo.State == DevExpress.Utils.Drawing.ObjectState.Hot)
        e.Cache.FillRectangle(Color.LightGray, bounds);
    e.Cache.DrawRectangle(bounds, Color.DarkGray, e.RowBrickInfo.BorderThickness);