The controls I’ve built attempt to replicate the exact functionality of those used in Microsoft Office 2007. The Ribbon is quickly becoming a familiar cross application user interface, mimicking the Ribbon’s functionality allows for a seamless transition from Office to applications that make use of this control.
Controls currently under construction are as follows; (I’ll describe the first two items below in this post and the rest in later posts...)
1. Ribbon / RibbonTab / RibbonTabGroup
2. RibbonButton
3. RibbonButtonGroup / RibbonButtonGroupButton
4. RibbonLabel
5. RibbonSeparator
6. RibbonToolTip
7. RibbonMainMenu /RibbonMainMenuPinableItem
8. Menu / MenuItem / MenuSeparator
9. DropDownList
10. NumericUpDown
11. CheckBox
12. Document / DocumentPage
1. Ribbon / Ribbon Tab / RibbonTabGroup
The main Ribbon control features a large button known as the ‘OfficeButton’ in the top left which can be given an image via the OfficeButtonImageSource property.
The control can have multiple tabs (RibbonTab objects - figure 1) which in turn can have multiple tab groups (RibbonTabGroup objects - figure 2).
Figure 1 - Tabs
Figure 2 - Tab Group
A tab group can have a two or three row layout (Rows property). As controls are added to the tab group they are automatically positioned. For example, a large button will take up two or three rows regardless of the tab group row setting, whilst a small button will take up one row. If there is not enough space for a control to be added in the current column the tab group will expand to another column.
Both RibbonTab and RibbonTabGroup objects have a Title property which controls the text displayed on the tab or tab group respectively.
RibbonTabGroup objects have a Dialog property (Hidden [default] | Enabled | Disabled) which controls the appearance of the dialog button in the bottom right hand corner of the tab group.
RibbonTab objects are the default content for the Ribbon control, other properties that may have content are; QuickLaunchButtons, Menus and ToolTips.
The quick launch tool bar sits to the right of the OfficeButton; this will take RibbonButton objects as children (ignoring the Format property as these must be small buttons).
Example XAML
<rbn:Ribbon x:Name="RibbonCtrl" OfficeButtonImageSource="Images/OfficeLogo.png">
<rbn:Ribbon.QuickLaunchButtons>
<rbn:RibbonButton SmallImageSource="Images/Save.png" />
<rbn:RibbonButton SmallImageSource="Images/Undo.png" />
</rbn:Ribbon.QuickLaunchButtons>
<rbn:RibbonTab Title="Home">
<rbn:RibbonTabGroup Title="Clipboard" Dialog="Enabled" />
<rbn:RibbonTabGroup Title="Font" Rows="Two" Dialog="Enabled" />
<rbn:RibbonTabGroup Title="Paragraph" Rows="Two" Dialog="Enabled" />
<rbn:RibbonTabGroup Title="Styles" Dialog="Enabled" />
<rbn:RibbonTabGroup Title="Editing" />
</rbn:RibbonTab>
<rbn:RibbonTab Title="Insert" />
<rbn:RibbonTab Title="Page Layout" />
<rbn:RibbonTab Title="References" />
<rbn:RibbonTab Title="Mailings" />
<rbn:RibbonTab Title="Review" />
<rbn:RibbonTab Title="View" />
<rbn:Ribbon.ToolTips />
<rbn:Ribbon.Menus />
</rbn:Ribbon>
2. RibbonButton
The RibbonButton has different appearances based on its Format property (Large [default] | SmallWithText | Small). It also has two image source properties that are used with the appropriate Format, these are LargeImageSource and SmallImageSource.
The RibbonButton has a MenuID property which can be the name of a menu in the parent Ribbon control’s MenuCollection (also accessible via the Menus property). The button also has a Click event which can be subscribed to.
RibbonButton controls have a read-only ButtonMenuStyle property that describes the buttons menu behaviour (None [default] | Simple | Split). The style is derived in the following way;
|
MenuID |
Click Event Handler |
ButtonMenuStyle |
|
n/a |
n/a |
None |
|
n/a |
<event handler> |
None |
|
<menu id> |
n/a |
Simple |
|
<menu id> |
<event handler> |
Split |
Depending on the ButtonMenuStyle and Format the button will be rendered as a default button, a simple menu button or a split menu button in either large or small. Examples of each style can be seen in figures 3 and 4 below.
Figure 3 - Large Buttons
Figure 4 - Small Buttons
RibbonButton objects also have a ToolTipID property which can be the name of a tooltip in the parent Ribbon control’s ToolTipCollection (also accessible via the ToolTips property).
Example XAML
<rbn:RibbonTabGroup Title="Editing">
<rbn:RibbonButton Format="SmallWithText" Text="Find"
SmallImageSource="Images/Find.png" MenuID="MenuFind"
ButtonClick="RibbonButton_ButtonClick" />
<rbn:RibbonButton Format="SmallWithText" Text="Replace"
SmallImageSource="Images/Replace.png" />
<rbn:RibbonButton Format="SmallWithText" Text="Select"
SmallImageSource="Images/Select.png" MenuID="MenuSelect" />
</rbn:RibbonTabGroup>
Until next time...