Office View

  • 6 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.

IMPORTANT

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.

TIP

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

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

To create tabs in code, handle the PropertyGridControl.TabPanelCustomize event and do the following:

  1. Create DevExpress.XtraVerticalGrid.Tab objects.
  2. Add property and category (see CategoryAttribute) names to the tab's FieldNames collection.

    Category names must 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. For example, replace Step Details with "categoryStep_Details".

  3. Add tabs to the Buttons collection.

  4. 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

Note that this code works for objects that expose all three data fields: the Text property, and the Accessibility and Appearance categories.

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:\Work\Images\_SVG\Pages.svg").Render(null, 1);
    //Add a property.
    tab1.FieldNames.Add("Text");
    //Add a category.
    tab1.FieldNames.Add("categoryAccessibility");

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

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

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

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")
        e.Menu.Items.Add(CreateDataBindingItem);
}
NOTE

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