Custom Tabs and Commands
Because the ribbon of a WPF application is Microsoft's Ribbon control, your own commands use the same classes as any WPF ribbon: RibbonTab, RibbonGroup, RibbonButton and their relatives from System.Windows.Controls.Ribbon. TX Text Control adds what makes them look like its predefined tabs: the ResourceProvider, which returns the icons, texts and tool tips of the built-in items. With both, you add a tab of your own in XAML or in code, extend a predefined tab and fill the application menu and the Quick Access Toolbar.
The predefined tabs, and how to change or remove their items, are described in Built-in Ribbon Tabs. The window and the connections are set up as in Connecting Ribbon Tabs in XAML.
Add a Tab in XAML
A tab of your own is a RibbonTab beside the tabs of TX Text Control. It is not connected to the TextControl; its buttons call the editor in their event handlers. The following tab has an Output group with a print button and a toggle button that makes the document read-only:
<Ribbon x:Name="ribbon" DockPanel.Dock="Top">
<WPF:RibbonFormattingTab x:Name="ribbonFormattingTab" Header="Home"/>
<RibbonTab x:Name="reviewTab" Header="Review">
<RibbonGroup x:Name="outputGroup" Header="Output">
<RibbonButton x:Name="printButton" Label="Print" Click="PrintButton_Click"/>
<RibbonToggleButton x:Name="readOnlyButton" Label="Read Only"
Checked="ReadOnly_Changed" Unchecked="ReadOnly_Changed"/>
</RibbonGroup>
</RibbonTab>
</Ribbon>
The handlers in MainWindow.xaml.cs use the TextControl named textControl:
private void PrintButton_Click(object sender, RoutedEventArgs e)
{
// Open the print dialog for the document
textControl.Print("My Document", false);
}
private void ReadOnly_Changed(object sender, RoutedEventArgs e)
{
// Switch between read-only and edit mode
textControl.EditMode = readOnlyButton.IsChecked == true
? TXTextControl.EditMode.ReadAndSelect
: TXTextControl.EditMode.Edit;
}
Give Your Buttons the Built-In Icons
The ResourceProvider in TXTextControl.WPF returns the resources of a built-in item for an identifier string. The identifiers are the values of ResourceProvider.FileMenuItem, such as TXITEM_Print, TXITEM_Open and TXITEM_Save, and the RibbonItem values of the predefined tabs, such as RibbonInsertTab.RibbonItem.TXITEM_InsertHyperlink:
| Method | Returns, for a WPF RibbonButton |
|---|---|
| GetLargeIcon, GetSmallIcon | A BitmapSource for LargeImageSource and SmallImageSource |
| GetText | The text, for Label |
| GetToolTipTitle, GetToolTipDescription | The tool tip, for ToolTipTitle and ToolTipDescription |
| GetKeyTip | The key tip, for KeyTip |
The icon methods take either a resolution in dpi or a FrameworkElement, whose resolution they use. The text methods have an overload with a CultureInfo for the language of the text.
Add a Tab in Code
Tabs that depend on the user or on settings are added in code, for example in the Loaded handler of the TextControl. The following code creates a Company tab with a print button that looks like the built-in one:
using System.Windows;
using System.Windows.Controls.Ribbon;
using TXTextControl.WPF;
private void TextControl_Loaded(object sender, RoutedEventArgs e)
{
string print = ResourceProvider.FileMenuItem.TXITEM_Print.ToString();
// A button with the resources of the built-in print command
RibbonButton printButton = new RibbonButton()
{
Label = ResourceProvider.GetText(print),
LargeImageSource = ResourceProvider.GetLargeIcon(print, this),
SmallImageSource = ResourceProvider.GetSmallIcon(print, this),
ToolTipTitle = ResourceProvider.GetToolTipTitle(print),
ToolTipDescription = ResourceProvider.GetToolTipDescription(print),
KeyTip = ResourceProvider.GetKeyTip(print)
};
printButton.Click += (s, args) => textControl.Print("My Document", false);
// Put the button into a group, the group into a tab, the tab into the ribbon
RibbonGroup outputGroup = new RibbonGroup() { Header = "Output" };
outputGroup.Items.Add(printButton);
RibbonTab companyTab = new RibbonTab() { Header = "Company" };
companyTab.Items.Add(outputGroup);
ribbon.Items.Add(companyTab);
}
The code works as follows:
thisis the window, so the icons are created for the resolution the window is shown with.Itemsis the collection of the WPF ribbon classes at every level: groups in a tab, controls in a group, tabs in the ribbon.ribbonis thex:Nameof theRibbonelement. The new tab is added after the existing tabs;Items.Insertplaces it at another position.
Add a Group to a Predefined Tab
A predefined tab is a RibbonTab as well, so its Items collection takes groups of your own. The following line inserts an empty Company group before the Clipboard group of the Home tab:
// Put a group of your own at the start of the Home tab
ribbonFormattingTab.Items.Insert(0, new RibbonGroup() { Header = "Company" });
Fill the group with buttons as above. To put a button into a predefined group, find the group with FindName and a RibbonItem value ending in Group, as shown in Built-in Ribbon Tabs.
Next Steps
- Toolbars and Mini Toolbars: add groups of your own to the mini toolbar.
- Styles, Resources, and Themes: styles and colors of the controls.
- Localization and Resource Kit: the texts of the ribbon in other languages.
- Built-in Dialog Boxes: dialogs your buttons can open.