Office View

  • 3 minutes to read

The PropertyGrid control supports the Office 2016-inspired view. Its features include:

  • flat UI with no vertical and horizontal lines that separate properties in the Classic View;
  • tabbed layout;
  • numeric properties can display two editors at once (a TrackBarControl plus a default SpinEdit);

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

CAUTION

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 several single-editor rows. This operation is irreversible.

Demo: Property Grid module in the XtraVerticalGrid MainDemo

Organize Properties into Tabs at Design Time

Specify the PropertyGridControl.SelectedObject property to set an object whose settings you want to inspect.

In Visual Studio's Property Grid, click the ellipsis button next to the PropertyGridControl.Tabs property. This invokes the Collection Editor dialog that allows you to create tabs and customize their captions and icons.

Property Grid - Tabs Collection Editor

After creating tabs, close the dialog and invoke the control's smart tag. Click "Run Designer" and switch to the designer's "Tabs" page. This page shows all available properties and draws checkboxes next to each one. Select each tab individually and check the properties you want inside them.

Property Grid - Tabs Design Time

Note that the Property Grid does not display properties that have not been assigned to an existing tab.

Organize Properties into Tabs in Code

After you set up the PropertyGridControl.SelectedObject property, do the following to add tabs to the Property Grid:

  1. Handle the PropertyGridControl.TabPanelCustomize event and create new Tab objects.
  2. Modify tabs' FieldNames collection to add rows and row categories to these tabs. Category names should start with the "category" prefix. For instance, to add the "Accessibility" category, add "categoryAccessibility" to the FieldNames collection. If a category name has a space symbol, replace it with an underscore ("Step Details" -> "categoryStep_Details").
  3. Use the PropertyGridControl.SelectedTab property to choose the initially selected tab.

The code sample below organizes the "Appearance" and "Accessibility" categories and "Tabs" property into two tabs. Tab headers display vector icons. Note that this sample code works for SelectedObjects that expose all three fields ("Tabs", "Accessibility", and "Appearance").


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

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

    e.Buttons.Add(tab1);
    e.Buttons.Add(tab2);

    propertyGridControl1.SelectedTab = propertyGridControl1.Tabs[0];
}

Display Trackbars For Numeric Properties

To display trackbars for numeric properties, handle the PropertyGridControl.CustomRowCreated event and specify minimum and maximum editor values. The following code adds a trackbar to the Font.Size property:


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;
    }
}

If the selected object's properties are retrieved at design-time, you can set all these options in the Property Grid Designer.

PropertyGrid - Office - Designer