TX Text Control .NET for WPF

Custom Tabs and Commands

Topic

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;
}
  • Print with a document name and false for the last printer settings opens the standard print dialog and prints the document.
  • EditMode with ReadAndSelect shows the text and lets users select it, but not edit or format it.

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:

MethodReturns, for a WPF RibbonButton
GetLargeIcon, GetSmallIconA BitmapSource for LargeImageSource and SmallImageSource
GetTextThe text, for Label
GetToolTipTitle, GetToolTipDescriptionThe tool tip, for ToolTipTitle and ToolTipDescription
GetKeyTipThe 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:

  • this is the window, so the icons are created for the resolution the window is shown with.
  • Items is the collection of the WPF ribbon classes at every level: groups in a tab, controls in a group, tabs in the ribbon.
  • ribbon is the x:Name of the Ribbon element. The new tab is added after the existing tabs; Items.Insert places 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.

Fill the Application Menu and the Quick Access Toolbar

Both belong to the WPF Ribbon, and the TX Words sample fills them in XAML: the commands of the application menu are RibbonApplicationMenuItem elements in Ribbon.ApplicationMenu, and the buttons of the Quick Access Toolbar are RibbonButton elements in Ribbon.QuickAccessToolBar:

<Ribbon x:Name="ribbon" DockPanel.Dock="Top">
    <Ribbon.ApplicationMenu>
        <RibbonApplicationMenu>
            <RibbonApplicationMenuItem x:Name="openMenuItem" Header="Open..."
                                       Click="OpenMenuItem_Click"/>
        </RibbonApplicationMenu>
    </Ribbon.ApplicationMenu>
    <Ribbon.QuickAccessToolBar>
        <RibbonQuickAccessToolBar>
            <RibbonButton x:Name="undoButton" Click="UndoButton_Click"/>
        </RibbonQuickAccessToolBar>
    </Ribbon.QuickAccessToolBar>
    <!-- The tabs follow here -->
</Ribbon>
private void OpenMenuItem_Click(object sender, RoutedEventArgs e)
{
    // Open the built-in open dialog
    textControl.Load();
}

private void UndoButton_Click(object sender, RoutedEventArgs e)
{
    textControl.Undo();
}

Load without parameters opens the open dialog of the TextControl, and Undo takes back the last change. Give the menu item and the button their images from the ResourceProvider in code, with the identifiers TXITEM_Open of ResourceProvider.FileMenuItem and TXITEM_Undo of ResourceProvider.GeneralItem. Loading and Saving Documents covers the commands behind Open and Save.

Next Steps