This topic provides an overview of the Office 2013 Ribbon features, styles and differences compared with Office 2010.
This topic contains the following sections:
Microsoft introduced a new version of the Ribbon with the release of Office 2013. The Office 2013 Ribbon is similar to the previous versions of the Ribbon with a new color scheme, different styles and other features.
The UltraToolbarsManager component already provides support for multiple view styles to replicate the Office 2007, Office 2010 and Scenic Ribbons. The Office 2013 Ribbon feature typically involves changes to the existing Ribbon design style.
Office 2013 ribbon.
Use the UltraToolbarsManager.Style property to set the Ribbon with Office 2013 style.
Configuring with code example.
In C#:
ultraToolbarsManager1.Style = ToolbarStyle.Office2013;In Visual Basic:
ultraToolbarsManager1.Style = ToolbarStyle.Office2013Using the Properties window in visual Studio to configure the style.
New to Office 2013 Ribbon is the addition of the ribbon display option button; located on the caption area of the Ribbon. Use a drop-down button to display the available Ribbon options. Thus empowering the user with the ability to recover display area by hiding the entire ribbon, including the captions, or replacing it with a caption bar containing three buttons ( Show Ribbon , Ribbon Display Options , and Close ).
Auto-hide Ribbon minimizes the space reserved for the ribbon by replacing the existing ribbon with a narrow bar with three right-aligned buttons ( Show Ribbon , Ribbon Display Options , and Close )
Show Ribbon – Displays the entire ribbon (including Tabs, Quick Access Toolbar, and Caption) in a dropdown that automatically disappears when it loses focus
Ribbon Display Options – Displays the same menu as the display options on the normal caption
Close – Closes the form
Show Tabs – This option is similar to the unpinned state of the Office 2010 version of the ribbon
Show Tabs and Commands – This option is similar to the pinned/normal state of previous versions of the ribbon
Designed with a flat, unembellished appearance, the Office 2013 Ribbon, is less invasive than its Office 2010 equivalent rendered in pseudo 3D. Microsoft disabled the Aero Glass theme in Office 2013.
The IsGlassSupported property resolves to false whenever using the Office 2013 Toolbar Style.
In Office 2013 the pin/unpin button moves from the caption area to the ribbon group area.
Form rendering in Office 2013 is changed with a thin-rectangular border (with shadows/glow).
In Office 2010, when the file menu area, also known as Application Menu 2010, is visible it encompasses the entire lower portion of the container starting just below the tabs. The user would need to press the File tab or any other tab in order to close the Application Menu 2010.
Office 2013 changed the Application Menu 2010 so that it appears to fill the entire container. It displays the Application Menu 2010 over the same area but renders the area above the Application Menu 2010 differently. It removes the tab items and adds a stationary Back button above the navigation area to allow the user to close the Application Menu 2010.
The UltraToolbarsManager has the ability to integrate with the hosting form to render custom form borders. Office 2013 uses a new border style, not seen in previous versions. The form borders are rectangular with a single-pixel border around the form. Additionally, the form is given a glow/shadow affect when active.
1pixel border around the form, colored to match the “ File” Application Menu Button.
Glow / Shadow effect around the form.
1pixel border around the form, colored dark grey with light gray text (Office 2013).
No glow effect.
With the release of Office 2013, the 2 separators used in the Office 2010 Ribbon to separating the tools between the system menu icon and the Quick Access Toolbar (QAT) quick customize menu are gone.
In the Office 2013 Ribbon, there are no separators on the QAT.
Both Office 2010 and Office 2013 have the same ribbon functionality. The only difference between them is their appearance.
For a selected tab, the shape of the tab has changed to have squared instead of rounded corners. Additionally, the font color of the selected tab now matches that of the “ File ” Application Menu Button.
When a non-selected tab is hot tracked (Moving the mouse over it) on the Office 2010 Ribbon, it displays the tab with glowing borders. On the Office2013 Ribbon, the tab border is not shown; only the font color changes to indicate the hot tracking appearance.
Both the Office 2010 and Office 2013 Ribbons use separators between adjacent ribbon groups. In Office 2010, the separator touches the lower edge of the tab page and fades away as it reaches the top edge while in Office 2013 the separator uses a solid line that does not reach the top or the bottom of the ribbon group. The background of the ribbon group is a solid off-white color matching that of the ribbon tab.
The only cosmetic differences exist between Office 2010 and the Office 2013 Ribbon contextual tab groups. Both Office 2010 and Office 2013 contextual tab group headers render with a solid line along the top indicating their group color.
The Office 2010 Ribbon contextual tab group header paints the glass section with a color gradient that fades away from top to bottom; the lines separating the contextual tab group fade away from top to bottom and do not touch the top edge of the tab page. Selecting a tab renders the selected tab page with a top border which has the color of the contextual tab group.
The Office 2013 Ribbon contextual tab group header is no longer a gradient, but a solid rendering using an alpha blend of the group color. Additionally, the top border of the selected tab does not change to match the color of the contextual tab group. Instead, the font color of the selected tab, hot tracked tab, and group header matches the group color.
The styling in Office 2013 tools has changed considerably since the release of Office 2010. In general, replacing the glow effect and gradient styles of previous versions with a solid borderless style.
Microsoft Office Ribbon provides users with keyTips to facilitate their using the keyboard to navigate through the tabs and tab members. Although KeyTips and keyboard navigation are identical in Office 2010 and Office 2013, changes have been made to the appearance of the keyTips element.
Office 2010 and previous versions of the ribbon, renders keyTips as light-gradient with rounded borders while Office 2013 keyTips renders them with a solid dark color and squared corners.
In.
Office 2013 allows the selection of a background image (not provided) to render in the caption area of the application using the following property.
ultraToolbarsManager1.Ribbon.CaptionAreaAppearance.ImageBackground
The addition of new AutoHide functionality to the Office 2010 Ribbon resulted in Application Styling changes between the Office 2010 and Office 2013 Ribbon.
To incorporate the Office 2013 Ribbon features into the current architecture new values were added to the existing Enumerations. Due to the updates in the existing enumerations the assemblies that use those enumerations for styling such as, Editor controls or Button controls were updated as well.
The following list contains the assemblies affected by these changes:
Infragistics4.Win.UltraWinEditors
Infragistics4.Win.UltraWinGrid
Infragistics4.Win.UltraWinMaskedEdit
Infragistics4.Win.UltraWinSchedule
Infragistics4.Win.UltraWinTabControl
Infragistics4.Win.UltraWinListView
Infragistics4.Win.UltraWinDataSource
Infragistics4.Win.UltraWinToolbars
The following table lists the existing enumerations that contain the new values added to them in order to support Office 2013 view style.
The existing Glyph Editor for UltraCheckEditor and UltraOptionSet glyphs were updated to include an option for the Office 2013 style. The Glyph Editor dialog displays for any property of the GlyphInfo type. The Office 2013 style has been added to the AppStylist for Windows Forms design dialog (shown in the screenshot called “Check Box Designer” and “Radio Button Designer”) for the UltraCheckEditor and UltraOptionSet controls. These options are configured using the CheckBoxGlyphInfo and RadioButtonGlyphInfo properties, respectively.
The following screenshot illustrates the Office 2013 Style option selection in the design dialog, which appears by performing the following steps:
Open the AppStylist and click the Roles tab.
Select the UltraCheckEditor control from the list of controls; this displays the “Common Component Properties” section below it.
Select the “CheckBoxGlyphInfo” property; this enables the button with three dots (…) on the far-right of that row.
Click the button to display the designer dialog that contains the Office 2013 Style option.
The following screenshot illustrates the Office 2013 Style option selection in the design dialog, which appears by performing the following steps:
Open the AppStylist and click the Roles tab.
Select the UltraOptionSet control from the list of controls; this displays the “Common Component Properties” section below it.
Select the “RadioButtonGlyphInfo” property; this enables the button with three dots (…) on the far-right of that row.
Click the button to display the designer dialog that contains the Office 2013 Style option.
The following controls support the Office 2013 Ribbon style. The screenshots illustrate the various way items render on the Office 2013 Ribbon.
The menu options and tooltip of the new Auto-Hide button displays localized text For example if the Office 2013 Ribbon runs on a Non-English version of a computer, the developer can use the customizable resource strings to localize the strings displayed in the dropdown menu and the Tooltip based on the language of that environment.
The following table illustrates customizable text elements (Left column) with corresponding resource strings (Right column) that can be used to customize or localize the text element.
Code example for customizing the text elements.
In C#:
private Infragistics.Shared.ResourceCustomizer _rc;
_rc = Infragistics.Win.UltraWinToolbars.Resources.Customizer;
_rc.SetCustomizedString("RibbonDisplayOptions", "[Localized] - RibbonDisplayOptions");
_rc.SetCustomizedString("RibbonDisplayOptions_AutoHide_Title", "[Localized] - AutoHide Title");
_rc.SetCustomizedString("RibbonDisplayOptions_AutoHide_Description", "[Localized] - AutoHide Description");In Visual Basic:
Private _rc As Infragistics.Shared.ResourceCustomizer
_rc = Infragistics.Win.UltraWinToolbars.Resources.Customizer
_rc.SetCustomizedString("RibbonDisplayOptions", "[Localized] - RibbonDisplayOptions")
_rc.SetCustomizedString("RibbonDisplayOptions_AutoHide_Title", "[Localized] - AutoHide Title")
_rc.SetCustomizedString("RibbonDisplayOptions_AutoHide_Description", "[Localized] - AutoHide Description")The result from the above example.
For more information on how to customize resource strings, please refer to Customizing Assembly Resource Strings topic.
The following topics provide additional information related to this topic.