Ribbon and Sidebar Examples
A ribbon window with the tabs of TX Text Control and sidebars for styles, comments or tracked changes is the user interface most WPF applications build around the editor. The samples below show such windows in full, from the XAML that places the Microsoft ribbon and the tabs to the properties that connect the sidebars.
How the Samples Build the Ribbon
The ribbon samples use the ribbon of WPF, System.Windows.Controls.Ribbon, in a RibbonWindow, and fill it with the ribbon tabs of TX Text Control, such as RibbonFormattingTab, RibbonInsertTab and RibbonReportingTab. A Sidebar is docked beside or below the editor, and properties of the tabs connect it to a button by its name, for example RibbonProofingTab.CommentsSidebar or RibbonFormattingTab.StylesSidebar. The following lines of the Ribbon sample declare the three sidebars of its window:
<WPF:Sidebar x:Name="m_sbSidebarBottom" IsShown="False" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>
<WPF:Sidebar x:Name="m_sbSidebarRight" IsShown="False" HorizontalAlignment="Right" DockPanel.Dock="Right"/>
<WPF:Sidebar x:Name="m_sbSidebarLeft" ContentLayout="About" HorizontalAlignment="Left" DockPanel.Dock="Left" ShowPinButton="False" DialogStyle="StandardSizable"/>
IsShown hides a sidebar until a ribbon button opens it, and ContentLayout sets what a sidebar shows. In the same sample, the formatting tab names the right sidebar in its StylesSidebar attribute: StylesSidebar="m_sbSidebarRight". Connecting Ribbon Tabs in XAML explains the connections.
TX Words Samples
The TX Words samples are ribbon applications with the same layout, and each uses other tabs and sidebars; TX Words WPF Sample Application describes each sample and where to find it. For the ribbon and the sidebars, these four are the ones to read:
- Ribbon has all ribbon tabs of TX Text Control, contextual tabs and the three sidebars declared above.
- Reporting connects the field navigation sidebar through RibbonReportingTab.FieldNavigatorSidebar.
- Conditional Instructions connects the conditional instructions sidebar through RibbonFormFieldsTab.ConditionalInstructionsSidebar.
- User Access uses the permissions tab and the comments and tracked changes sidebars for each signed-in user.
Each TX Words sample also shows a sidebar with the About layout, which explains the sample.
Other Samples and Articles
| Example | What it shows | Where |
|---|---|---|
| A ribbon window step by step | A window with the formatting and insert tabs, ruler bars and a status bar, built in Visual Studio and connected to the TextControl in XAML. Written for version 29.0, without a repository | Creating a WPF Ribbon Application |
The mini toolbar sample is listed in Document Editor Examples. No sample shows a ribbon tab or a sidebar of your own; Ribbon and UI describes how to add them.
Next Steps
- Create a WPF Ribbon Application: build a ribbon window step by step.
- Add a Sidebar: add a sidebar to the window.
- XAML and Data Binding Examples: connect WPF controls to the editor in XAML.