TX Text Control .NET for WPF

Create a WPF Ribbon Application

Topic

In WPF, the ribbon itself comes from Microsoft: the Ribbon control of System.Windows.Controls.Ribbon, usually in a RibbonWindow. TX Text Control adds the tabs that fill it, such as Home, Insert and View, each a ready-made set of word processing commands that works as soon as it is connected to the editor. Following the steps below, you turn MainWindow into a RibbonWindow, place five tabs of TX Text Control in the ribbon, add rulers and a status bar, and finish with a Table Tools tab that appears only while the input position is in a table.

Prerequisites

  • A WPF project for .NET 8 or higher with the package TXTextControl.TextControl.WPF.SDK, as in the first two sections of Create Your First WPF Application. Start with the MainWindow.xaml of the template; the ribbon replaces the button bar of that tutorial.
  • The Professional or Enterprise edition: the ribbon tabs are not part of the Standard edition. See Editions and Feature Availability.

Make the Window a RibbonWindow

A RibbonWindow is a WPF window that integrates the ribbon into its title bar, including the headers of contextual tab groups. Two lines change:

  1. In MainWindow.xaml, replace the element name Window with RibbonWindow, in the opening and the closing tag.

  2. In MainWindow.xaml.cs, derive the class from RibbonWindow instead of Window, and add using System.Windows.Controls.Ribbon;:

    public partial class MainWindow : RibbonWindow

In a .NET project, the WPF ribbon assembly is part of the framework, and the XAML finds RibbonWindow, Ribbon and their related elements in the default XAML namespace, without a declaration of their own.

Add the Ribbon and the Tabs

The tabs of TX Text Control are in the toolbox tab TX Text Control 34.0, from RibbonFormattingTab to RibbonViewTab. The XAML is short enough to write by hand. Replace the contents of MainWindow.xaml with the following, and keep the namespace of x:Class that Visual Studio created:

<RibbonWindow x:Class="MyWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:WPF="clr-namespace:TXTextControl.WPF;assembly=TXTextControl.WPF"
        Title="MainWindow" Height="600" Width="1000">
    <DockPanel>
        <Ribbon x:Name="ribbon1" DockPanel.Dock="Top">
            <WPF:RibbonFormattingTab x:Name="ribbonFormattingTab1" />
            <WPF:RibbonInsertTab x:Name="ribbonInsertTab1" />
            <WPF:RibbonPageLayoutTab x:Name="ribbonPageLayoutTab1" />
            <WPF:RibbonViewTab x:Name="ribbonViewTab1" />
            <WPF:RibbonProofingTab x:Name="ribbonProofingTab1" />
        </Ribbon>

        <WPF:StatusBar x:Name="statusBar1" DockPanel.Dock="Bottom" />
        <WPF:RulerBar x:Name="rulerBar1" DockPanel.Dock="Top" />
        <WPF:RulerBar x:Name="rulerBar2" DockPanel.Dock="Left"
                      HorizontalAlignment="Left" VerticalAlignment="Stretch" />

        <WPF:TextControl x:Name="textControl1" Loaded="textControl1_Loaded"
                         RibbonFormattingTab="ribbonFormattingTab1"
                         RibbonInsertTab="ribbonInsertTab1"
                         RibbonPageLayoutTab="ribbonPageLayoutTab1"
                         RibbonViewTab="ribbonViewTab1"
                         RibbonProofingTab="ribbonProofingTab1"
                         RulerBar="rulerBar1"
                         VerticalRulerBar="rulerBar2"
                         StatusBar="statusBar1" />
    </DockPanel>
</RibbonWindow>

The XAML works as follows:

  • The tabs. RibbonFormattingTab is the Home tab with the clipboard, font, paragraph, styles and editing commands. RibbonInsertTab inserts pages, images, hyperlinks, bookmarks, headers and footers, text frames and symbols. RibbonPageLayoutTab edits the page setup and layout, RibbonViewTab the view settings, and RibbonProofingTab the proofing options such as spelling and hyphenation. Each is derived from the WPF RibbonTab and brings its own header, groups and buttons.
  • The connection. Like the bars, each tab is connected by name: RibbonFormattingTab, RibbonInsertTab, RibbonPageLayoutTab, RibbonViewTab and RibbonProofingTab of the TextControl each hold the x:Name of a tab. Through this connection, the commands of a tab act on the document in the editor.
  • The bars. The status bar is docked at the bottom, the horizontal ruler below the ribbon and the vertical ruler at the left. RulerBar, VerticalRulerBar and StatusBar connect them. The TextControl is the last child of the DockPanel and fills the rest of the window.

The TX Words sample adds four more tabs the same way: RibbonReferencesTab, RibbonPermissionsTab, RibbonFormFieldsTab and RibbonReportingTab, each with a property of the same name on the TextControl.

Set the Focus When the Window Opens

The Loaded attribute of the TextControl names a handler in MainWindow.xaml.cs. Complete the file as follows:

using System;
using System.Windows;
using System.Windows.Controls.Ribbon;

namespace MyWPFApp
{
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void textControl1_Loaded(object sender, RoutedEventArgs e)
        {
            // Let the user type at once
            textControl1.Focus();
        }
    }
}

Run the Application

Press F5. The window shows the ribbon with its five tabs, starting with Home and Insert, above the rulers and the editor, and the status bar at the bottom. Type some text and format it with the Home tab, insert a table with Insert, or change the margins of the page with the page layout tab.

Add a Table Tools Tab

A contextual tab belongs to a group that is visible only in a certain context, like the Table Tools of a word processor. In the TX Words sample, the group appears while the input position is in a table and holds the table layout tab:

A ribbon of the TX Words sample for WPF with the tabs Home, Insert, Permissions and Form Fields and, under the header Table Tools, the contextual tabs Table Layout and Formulas.

  1. Add a RibbonTableLayoutTab and a contextual tab group to the Ribbon, after the other tabs:

    <WPF:RibbonTableLayoutTab x:Name="ribbonTableLayoutTab1" ContextualTabGroupHeader="Table Tools" />
<Ribbon.ContextualTabGroups>
    <RibbonContextualTabGroup x:Name="tableToolsGroup" Header="Table Tools"
                              Background="#6600FF00" Visibility="Collapsed" />
</Ribbon.ContextualTabGroups>

  2. Connect the tab to the editor by adding RibbonTableLayoutTab="ribbonTableLayoutTab1" to the WPF:TextControl element.

  3. In MainWindow.xaml.cs, handle the event that reports a new input position. Add the line to the constructor and the method to the class:

    public MainWindow()
{
    InitializeComponent();
    textControl1.InputPositionChanged += textControl1_InputPositionChanged;
}

private void textControl1_InputPositionChanged(object sender, EventArgs e)
{
    // Show Table Tools only while the input position is in a table
    tableToolsGroup.Visibility = textControl1.Tables.GetItem() != null
        ? Visibility.Visible
        : Visibility.Collapsed;
}

  4. Press F5, insert a table with the Insert tab and click into it. The Table Tools header appears in the title bar with the Table Layout tab below it, and it disappears when you click outside the table.

The code works as follows:

  • ContextualTabGroupHeader of the tab and Header of the RibbonContextualTabGroup contain the same text, which is how the WPF ribbon assigns a tab to its group. Visibility="Collapsed" hides the group until the code shows it.
  • RibbonTableLayoutTab of the TextControl connects the tab like the other tabs.
  • InputPositionChanged occurs each time the input position moves. Tables.GetItem returns the table at the input position, or null outside a table.

The TX Words sample puts a RibbonFormulaTab into the same group, and a RibbonFrameLayoutTab into a Frame Tools group, which appears while an image, a text frame or a drawing is selected.

The TX Words Sample

The setup installs a complete ribbon application with all ribbon tabs of TX Text Control, an application menu with recent files, a Quick Access Toolbar, contextual tab groups for tables and frames, and three sidebars. Its source code is in %USERPROFILE%\Documents\TX Text Control 34.0.NET for WPF\CSharp\TX Words\Ribbon. TX Words WPF Sample Application describes it.

Next Steps