WPF › Ribbon

Ribbon

.NET Framework 4.8.NET 6 / 8 / 10v6.0.0WPF

The ribbon: a row of tabs, each holding labelled groups of commands, under the window's title, an application button and a quick access toolbar – the command surface of an Office-style application.

69public types

753public members

1namespaces

Assembly

Assembly	`Binarymission.WPF.Controls.BinaryRibbon.dll`
Root namespace	`Binarymission.WPF.Controls.Office`
Target frameworks	.NET Framework 4.8, .NET 6 / 8 / 10
Depends on	`Skinning`

Overview

Put it at the top of a BinaryRibbonWindow, which draws the caption buttons and frame around it, as the main menu and toolbar of a document or line-of-business application.

Building a ribbon

Its content is Tabs: each BinaryRibbonTabItem holds BinaryRibbonGroups, and each group holds commands – BinaryRibbonButton, BinaryRibbonSplitButtonControl, BinaryRibbonDropDownButton, BinaryRibbonComboBox, BinaryRibbonGallery and the rest. Add ApplicationMenu, QuickAccessToolBar and TitleText.

Fitting the width

As the window narrows, the groups give way a step at a time from the last: their commands shrink – a large picture over the caption, then a small picture beside it, then the picture alone, as each command allows – and at last the group folds into one button that drops its commands down. SetMinSize, SetMaxSize and SetResizableSize set a command's steps. Below 240 logical pixels the tabs and commands are hidden (IsMinimized).

Showing more or less

DisplayState shows tabs and commands, tabs only (a clicked tab drops its commands over the document) or neither; Ctrl+F1, a double-click on a tab and the right-click menu switch it. RibbonLayout picks the classic three-row or the simplified one-line ribbon, and ContextualTabSet adds tabs for what is selected – a table, a picture – under a coloured title.

Keyboard, tips and skins

BinaryKeyTip.SetAccessKey gives a command a key tip, shown level by level on Alt or F10 in a BinaryRibbonWindow; BinaryRibbonScreenTipService.SetScreenTip gives it a titled screen tip. Users add commands to the quick access toolbar by right-clicking them, and GetQuickAccessToolBarState keeps their choice for the next run. Colours come from BinaryRibbonBuiltInSkinController.Skin.

Getting started

An invoicing window with an application menu, a quick access toolbar and key tips; its code-behind class derives from BinaryRibbonWindow.

<bm:BinaryRibbonWindow x:Class="Invoicing.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:bm="clr-namespace:Binarymission.WPF.Controls.Office;assembly=Binarymission.WPF.Controls.BinaryRibbon"
    Title="Invoicing" Width="1100" Height="700">
  <DockPanel>
    <bm:BinaryRibbonBarPanel DockPanel.Dock="Top" TitleText="Invoicing - Northwind Traders">
      <bm:BinaryRibbonBarPanel.ApplicationMenu>
        <bm:BinaryRibbonApplicationMenu bm:BinaryKeyTip.AccessKey="F">
          <bm:BinaryRibbonApplicationMenuItem Header="New invoice" Image="Images/NewInvoice32.png" Click="OnNewInvoice" />
          <bm:BinaryRibbonApplicationMenuItem Header="Open..." Image="Images/Open32.png" Click="OnOpen" />
          <Separator />
          <bm:BinaryRibbonApplicationMenuItem Header="Exit" Click="OnExit" />
        </bm:BinaryRibbonApplicationMenu>
      </bm:BinaryRibbonBarPanel.ApplicationMenu>
      <bm:BinaryRibbonBarPanel.QuickAccessToolBar>
        <bm:BinaryRibbonQuickAccessToolBar>
          <bm:BinaryRibbonButton SmallImage="Images/Save16.png" ToolTip="Save" Click="OnSave" />
          <bm:BinaryRibbonButton SmallImage="Images/Undo16.png" ToolTip="Undo" Command="ApplicationCommands.Undo" />
        </bm:BinaryRibbonQuickAccessToolBar>
      </bm:BinaryRibbonBarPanel.QuickAccessToolBar>
      <bm:BinaryRibbonTabItem HeaderText="Home" bm:BinaryKeyTip.AccessKey="H">
        <bm:BinaryRibbonGroup TitleText="Invoice" CanShowModalDialog="True" ExecuteModalDialogLauncher="OnInvoiceOptions">
          <bm:BinaryRibbonButton Content="New" LargeImage="Images/NewInvoice32.png" bm:BinaryKeyTip.AccessKey="N" Click="OnNewInvoice" />
          <bm:BinaryRibbonButton Content="Send" LargeImage="Images/Send32.png" bm:BinaryKeyTip.AccessKey="S" Click="OnSendInvoice" />
        </bm:BinaryRibbonGroup>
        <bm:BinaryRibbonGroup TitleText="Clipboard">
          <bm:BinaryRibbonButton Content="Paste" LargeImage="Images/Paste32.png" Command="ApplicationCommands.Paste" />
          <bm:BinaryRibbonButton Content="Cut" SmallImage="Images/Cut16.png" bm:BinaryRibbonBarPanel.MaxSize="Medium" Command="ApplicationCommands.Cut" />
          <bm:BinaryRibbonButton Content="Copy" SmallImage="Images/Copy16.png" bm:BinaryRibbonBarPanel.MaxSize="Medium" Command="ApplicationCommands.Copy" />
        </bm:BinaryRibbonGroup>
      </bm:BinaryRibbonTabItem>
    </bm:BinaryRibbonBarPanel>
    <DataGrid ItemsSource="{Binding Invoices}" />
  </DockPanel>
</bm:BinaryRibbonWindow>

API reference

`Binarymission.WPF.Controls.Office`

enum `ApplicationMenuButtonStyle`	How the round application menu button at the top left of a `BinaryRibbonWindow` is drawn.
class `BinaryKeyTip`	Key tips: the letters shown over ribbon commands when the user presses Alt, so that every command can be reached from the keyboard.
enum `BrushChangeTargetProperty`	Says which brush `ChangeColorForAccessTips` sets.
class `BinaryRibbonApplicationMenu`	The application button at the start of the ribbon's tab row, and the menu it drops down: the file commands - New, Open, Save As, Print, Exit - on the left, and a list such as recent documents on the right.
class `BinaryRibbonApplicationMenuItem`	A command in a `BinaryRibbonApplicationMenu`: a large picture and its caption, and optionally a submenu under a title of its own - Save As, Print, Share.
class `BinaryRibbonBackstageApplicationMenu`	An application button whose menu opens as a panel across the width of the window - a backstage view - holding whatever elements the application puts in it.
class `BinaryRibbonBackstageBorderWidthConverter`	Takes 8 device-independent units off a bound width - the margin the backstage menu's border leaves around its content.
class `BinaryRibbonBarPanel`	The ribbon: a row of tabs, each holding labelled groups of commands, under the window's title, an application button and a quick access toolbar - the command surface of an Office-style application.
enum `BinaryRibbonBarRenderingAlignment`	Which end of a tab's groups is in view when the groups are wider than the ribbon and it shows scroll buttons.
class `BinaryRibbonBuiltInSkinController`	Switches every ribbon in the application between the built-in looks - the Office 2007 and Windows 7 skins, ten colour skins and the Fluent skins of current Office - with one property.
class `BinaryRibbonButton`	The ribbon's push button: a command with a picture and a caption that redraws itself large, medium or small as the ribbon gives it room.
enum `BinaryRibbonButtonControlStyle`	The kinds of ribbon button: a plain button, a drop-down button or a pop-up button.
class `BinaryRibbonButtonGroup`	A row of small ribbon buttons joined edge to edge into one rounded strip, like Office's Bold, Italic and Underline or its paragraph alignment buttons.
class `BinaryRibbonComboBox`	A drop-down list for the ribbon, with an optional caption beside it and room for your own content above and below the list - a font size box, a style picker, a list of saved views.
class `BinaryRibbonComboBoxItem`	An entry in a ribbon drop-down list, drawn in the ribbon's style with an optional small picture to the left of its text.
class `BinaryRibbonControlContextualTabSet`	A set of contextual tabs: extra tabs at the end of the ribbon's tab row, under a coloured title, that are on show only while the user works on one kind of thing - a picture, a table, a chart.
class `BinaryRibbonControlGroupSizingOrderConverter`	Reads a comma-separated list of names into a `StringCollection`, for the ribbon tab's own record of the order in which its groups give up width.
enum `BinaryRibbonControlSize`	How large a ribbon command is drawn, from a large picture with a caption beneath it down to nothing at all.
class `BinaryRibbonControlSizeCollection`	The sizes a ribbon command takes at each step as its group gives up width - the value of the attached `ResizableSizeProperty`.
class `BinaryRibbonControlSizingCollectionConverter`	Reads the XAML text of `ResizableSizeProperty` - "Large,Medium,Small" or "L,M,S" - into a `BinaryRibbonControlSizeCollection`.
enum `BinaryRibbonDisplayState`	How much of the ribbon is on screen.
class `BinaryRibbonDropDownButton`	A ribbon button that opens a drop-down of further commands - Office's Paste Special, Insert Table or Export menus.
class `BinaryRibbonFontFamilyComboBox`	A ribbon drop-down that lists every font installed on the computer, ready to use as a Font box.
class `BinaryRibbonGallery`	A ribbon gallery: a strip of picture choices shown right on the ribbon, a row or two at a time, that opens into a full drop-down of every choice - Office's Styles, Table Styles and Themes galleries.
class `BinaryRibbonGalleryControlColumns`	The column counts a `BinaryRibbonGallery` takes at each step as its group gives up width - the value of the attached `RenderableGalleryColumnsProperty`.
class `BinaryRibbonGalleryControlColumnsCollectionConverter`	Reads the XAML text of `RenderableGalleryColumnsProperty` - "6,4,0" - into a `BinaryRibbonGalleryControlColumns`.
class `BinaryRibbonGroup`	A titled group of related commands on a ribbon tab - Clipboard, Font, Paragraph - with an optional dialog launcher in its corner, which folds into a single drop-down button when the ribbon runs out of room.
enum `BinaryRibbonLayout`	How the ribbon lays its commands out beneath the tabs.
class `BinaryRibbonLivePreview`	The routed events a ribbon gallery raises so that an application can show the effect of a choice in its document before the user commits to it, and the methods for handling them.
class `BinaryRibbonLivePreviewEventArgs`	The data for the live preview events of `BinaryRibbonLivePreview`: which item to preview or apply.
class `BinaryRibbonMenuItem`	A menu entry in the ribbon's style - for the drop-downs of ribbon buttons and for the application menu - with a small picture, a tick when checked, and an arrow that opens a sub-menu.
class `BinaryRibbonQuickAccessToolBar`	The quick access toolbar: a short row of small commands - Save, Undo, Redo - kept on show above the ribbon's tabs, or below the ribbon, whichever tab is selected.
class `BinaryRibbonScreenTip`	A screen tip: the titled tool tip a ribbon shows for a command - its name in bold, a sentence on what it does, an optional picture, and a footer offering help.
class `BinaryRibbonScreenTipHelpRequestedEventArgs`	The data for `HelpRequestedEvent`, raised when the user presses F1 while a screen tip is showing: which screen tip it was, and the help topic it names.
class `BinaryRibbonScreenTipService`	Attaches a `BinaryRibbonScreenTip` to a command, with the timing and placement a ribbon command wants.
class `BinaryRibbonScrollViewer`	The scroll viewer the ribbon uses inside its own drop-downs, with scroll bars drawn in the colours of the ribbon's skin.
class `BinaryRibbonSeparator`	A thin vertical rule between commands in a ribbon group, in the colours of the ribbon's skin.
class `BinaryRibbonSmartTextBox`	A ribbon text box with a watermark prompt while it is empty, a button that clears it, an optional filter on what can be typed, and a small flag picture that changes when the box is left empty - for search boxes, quick filters and required fields on the ribbon.
class `BinaryRibbonSplitButtonControl`	A ribbon button in two parts: the main part runs a default command at once, and the arrow part holds a drop-down of alternatives - Office's Paste, Undo or Insert Date buttons.
class `BinaryRibbonTabItem`	One tab of a `BinaryRibbonBarPanel`: a heading in the tab row, and the `BinaryRibbonGroup`s of commands shown beneath it while it is selected.
class `BinaryRibbonTextBoxControl`	A labelled text box for the ribbon: an optional small picture and a caption, then the box - Office's "Height" and "Width" boxes, or a "Find" box.
class `BinaryRibbonThemeResources`	The resource keys behind every colour, brush and template the ribbon draws with, for restyling any part of it with values of your own.
class `BinaryRibbonThumbnailControl`	One picture choice in a `BinaryRibbonGallery` - a style, a colour, a layout - drawn as a cell that highlights under the pointer and stays pressed while it is selected.
class `BinaryRibbonToggleButtonControl`	A ribbon button that stays pressed while it is on - Bold, Show Ruler, Track Changes - drawn large, medium or small as the ribbon gives it room.
class `BinaryRibbonWindow`	The window a ribbon application lives in: it gives its caption to a `BinaryRibbonBarPanel` - title, application button and quick access toolbar - and draws caption buttons, frame and corners to match the ribbon's skin.
enum `BitmapEffect`	Kinds of visual effect.
class `BooleanToRibbonGroupTitleTextPanelHeightConverter`	Turns whether a ribbon group shows its title into the height of the title strip: 16 units when it does, 1 when it does not.
enum `DataEntryMode`	Which characters a `BinaryRibbonSmartTextBox` lets the user type, set through its `DataEntryMode` property.
interface `IBinaryRibbonApplicationMenu`	Marks a control as one that can be a ribbon's application menu - the type of `ApplicationMenu`. It declares no members.
interface `IBinaryRibbonComponent`	Implemented by every ribbon command. A group sizes the commands that implement it as the ribbon narrows, and the quick access toolbar puts them on its bar rather than in its menu.
interface `IBinaryRibbonComponentActAsGallery`	Implemented by galleries: a group shrinks them by showing fewer columns of items rather than by making them smaller, and shows them as a drop-down button when no columns are left.
interface `IBinaryRibbonComponentAlwaysRenderLarge`	Marks a ribbon command that breaks a run of small commands: the group does not stack the commands before it and after it together into rows of three. Galleries and flow groups implement it.
interface `IBinaryRibbonComponentCanDisplayImage`	Implemented by ribbon controls that show a picture of their own - `BinaryRibbonGroup`, `BinaryRibbonComboBox`, `BinaryRibbonComboBoxItem`.
interface `IBinaryRibbonComponentCanRenderInReducedSizeState`	Implemented by ribbon controls that have a title of their own, kept when the ribbon shrinks them - `BinaryRibbonGroup`, `BinaryRibbonComboBox`.
interface `IBinaryRibbonComponentCanStretchAndBeRotated`	Marks a ribbon command that is stretched to the width of the widest command in its column, as the combo boxes are.
interface `IBinaryRibbonContentElement`	Implemented by ribbon commands that have a caption and a large and a small picture - buttons, toggle buttons and drop-down buttons. The ribbon shows the picture that suits the size it gives the command.
interface `IBinaryRibbonContentElementBoundsConfigurable`	Implemented by ribbon commands with a caption and pictures whose corners can be rounded - as a `BinaryRibbonButtonGroup` rounds the outer corners of its first and last buttons.
interface `IBinaryRibbonElementBoundsConfigurable`	Implemented by ribbon elements whose corners can be rounded, such as `BinaryRibbonButtonGroup`.
interface `IBinaryRibbonInformationTagContainer`	Implemented by ribbon elements that carry an object of the application's own.
interface `IBinaryRibbonKeyTipControl`	Implemented by a control that does something of its own when its key tip is typed - a button clicks, a tab selects itself, a menu opens.
interface `IBinaryRibbonTextBoxControl`	Implemented by the ribbon's text boxes: an editable box with a caption and a picture beside it, as `BinaryRibbonTextBoxControl` is.
class `IsLessThanValueConverter`	Reports whether a bound size is under 40 device-independent units.
class `LongTextToTextBlockConverter`	Turns a caption into a centred two-line `TextBlock`, broken at the space nearest its middle - how a large ribbon button sets its caption under its picture.
enum `QuickAccessToolbarChildPlacementTarget`	Where a command attached to the quick access toolbar is meant to appear: on the toolbar, in its overflow menu, or in both.
enum `QuickAccessToolbarPlacementLocation`	Where the quick access toolbar sits: above the ribbon, in the title area, or below it.
enum `RibbonSkin`	The built-in looks for the ribbon and its window, chosen with `Skin`.
class `RibbonWindowBorder`	Holds `CornerStyle`, the choice of rounded corners for a `BinaryRibbonWindow`.
enum `CornerStyle`	Which corners of a `BinaryRibbonWindow` are rounded, set through its `WindowBorderEdgeRenderingMode` property.
enum `WindowTitleBarBackgroundRenderingStyle`	A choice of fill for the title bar of a `BinaryRibbonWindow`, taken by its `WindowTitleBarBackgroundRenderingStyle` property.