Simplified mode

When the simplified layout is switched on all elements in the RibbonBar are automatically arranged on a single row. This aims to provide the user with a compact layout which is taking half the height of the standard ribbon. This functionality can be used with new or existing ribbon bars (RichTextEditorRibbonBar, SpreadSheetRibbonBar, and DiagramRibbonBar are supported out of the box). It automatically changes the items' properties in order to fit them on a single line. The process can be customized as well. If the width is not enough the items are shown in a popup just link in the default ribbon layout.

Enabling the simplified mode

To enable the simplified mode set the LayoutMode property:

radRibbonBar1.LayoutMode = RibbonLayout.Simplified;

radRibbonBar1.LayoutMode = RibbonLayout.Simplified

To allow the end user to change the LayoutMode ar runtime show the layout button:

radRibbonBar1.ShowLayoutModeButton = true;

radRibbonBar1.ShowLayoutModeButton = True

Properties

You are allowed to change the height of the ribbon when you are in the simplified mode:

this.radRibbonBar1.SimplifiedHeight = 100;

Me.radRibbonBar1.SimplifiedHeight = 100

Access the simplified mode button:

radRibbonBar1.ShowLayoutModeButton = true;

radRibbonBar1.ShowLayoutModeButton = True

Access the simplified mode label. The following example shows how you can change the text of the label in the upper right corner:

this.radRibbonBar1.RibbonBarElement.LayoutModeTextElement.Text = "Compact Mode";

Me.radRibbonBar1.RibbonBarElement.LayoutModeTextElement.Text = "Compact Mode"

Events

There are 3 events that will be fired when the LayoutMode is changed:

  • LayoutModeChanged: fired when the end user is changing the layout mode with the button.
  • ItemStyleChanged: this event will be fired each time a property of a ribbon item is changed during the layout change operation. The event arguments are specifying the previous and current layout modes.
  • ItemStyleChanging: this event will be fired before a property of a ribbon item is changed, allows you to change properties when the LayoutMode is changed. The event arguments are specifying the previous and current layout modes.

Some of the ribbon items are changed when the simplified mode is turned on or when there is not enough space and the items are shown in a popup. The properties will be restored when switching to the default mode. The following table shows what is changed when switching to the simplified layout and when the items are in a popup.

Item Property Default to Simplified Simplified to DropDown
RadItem (all) Alignment MiddleCenter -
RadItem (all) Margin 2, 0, 2, 0 -
RadItem (all) MaxSize Size.Empty -
RadItem (all) Text Removed new lines -
RadButtonItem MinSize Size.Empty -
RadButtonItem Padding 2, 0, 2, 0 2, 3, 2, 3
RadButtonItem ImageAlignment MiddleLeft -
RadButtonItem TextAlignment MiddleLeft -
RadButtonItem TextImageRelation ImageBeforeText -
RadButtonItem Image The image is resized to 16x16 -
RadButtonItem DisplayStyle - ImageAndText
RadDropDownButtonElement MinSize Size.Empty -
RadDropDownButtonElement Padding 2, 0, 2, 0 2, 3, 2, 3
RadDropDownButtonElement ImageAlignment MiddleLeft -
RadDropDownButtonElement TextAlignment MiddleLeft -
RadDropDownButtonElement TextImageRelation ImageBeforeText -
RadDropDownButtonElement Image The image is resized to 16x16 -
RadDropDownButtonElement DisplayStyle - ImageAndText
RadGalleryElement Padding Top and bottom padding is removed -
RadGalleryElement MaxSize 24 -
RadGalleryItem DisplayStyle Text -
RadGalleryElement Padding Top and bottom padding is removed -
RadGalleryItem TextAlignment MiddleCenter -
RadGalleryItem AutoSize false -
RadGalleryItem Margin Top and bottom set to 1px -

See Also

In this article
Not finding the help you need? Improve this article