Tutorial: Create a Ribbon Application

Windows Presentation Foundation User's Guide

This chapter shows you how to create a small word processor with a ribbon interface from scratch with just a few lines of code. It uses the shipped, ready-to-use ribbon tabs that are connected to a System.Windows.Controls.Ribbon.Ribbon object.

The source code for this example is contained in the following directories:

Used TX Text Control controls:

Creating the Project

Assuming that you have already run the TX Text Control installation program, start Visual Studio .NET and create a new project. Select either Visual Basic or Visual C# as the project type and WPF Application as the template.

1. In the XAML view, replace the Grid with a DockPanel control as shown in the below screenshot:

2. Click Choose Toolbox Items... from the Tools main menu to customize the toolbox. In the tab WPF Components, filter for Ribbon and find the Ribbon from the assembly System.Windows.Controls.Ribbon. Select the control and confirm with OK.

3. Find the recently added control Ribbon, drag and drop it into the DockPanel.

4. Find the controls RibbonFormattingTab and RibbonInsertTab in the toolbox group TX Text Control 25.0, drag and drop them into the created Ribbon tag. Add a name parameter to both controls and name them ribbonFormattingTab and ribbonInsertTab. Additionally, set the Header parameter to Home and Insert. The XAML should look like this now:

<Ribbon DockPanel.Dock="Top">
	<WPF:RibbonFormattingTab Name="ribbonFormattingTab" Header="Home" />
	<WPF:RibbonInsertTab Name="ribbonInsertTab" Header="Insert" />

5. In the next steps, the order in which the controls are added to the Window is important.

Double-click the RulerBar in the toolbox to add it to the Window. Repeat this for the StatusBar, a second RulerBar and finally TextControl. Set the DockPanel.Dock property of the first RulerBar to top, set Bottom for the StatusBar, Left for the second RulerBar and finally Top for TextControl. Make sure that all other automatically created parameters such as Width, Height or Margin is removed from the tags.

For the secondly added RulerBar, set the HorizontalAlignment to Left and the VerticalAlignment to Stretch.

Now, add a Name for each control according to the following code:


	<Ribbon DockPanel.Dock="Top">
		<WPF:RibbonFormattingTab Name="ribbonFormattingTab" Header="Home" />
		<WPF:RibbonInsertTab Name="ribbonInsertTab" Header="Insert" />

	<WPF:RulerBar DockPanel.Dock="Top" Name="rulerBar" />
	<WPF:StatusBar DockPanel.Dock="Bottom" Name="statusBar"/>
	<WPF:RulerBar DockPanel.Dock="Left" VerticalAlignment="Stretch" HorizontalAlignment="Left" Name="verticalRulerBar" />
	<WPF:TextControl DockPanel.Dock="Top" Name="textControl" />


6. In this step, the controls must be connected. Therefore, select textControl to open it's properties in the Properties window of Visual Studio. First, look for the RulerBar property and type in the name of the added RulerBar: rulerBar.

7. Set the StatusBar property to statusBar and VerticalRulerBar to verticalRulerBar.

8. Now, the ribbon tabs must be connected. Find the RibbonFormattingTab property and set it to ribbonFormattingTab, the name of the insert ribbon tab control. Repeat this step for the RibbonInsertTab and set it to ribbonInsertTab.

The design view of the Window should now look like in the following screenshot:

9. In the XAML, add the Loaded="textControl_Loaded" event handler to the textControl element as a parameter, so that the line looks like this:

<WPF:TextControl DockPanel.Dock="Top" Name="textControl" Loaded="textControl_Loaded" RulerBar="rulerBar" StatusBar="statusBar"
    VerticalRulerBar="verticalRulerBar" RibbonFormattingTab="ribbonFormattingTab" RibbonInsertTab="ribbonInsertTab"/>

Now, in the XAML right-click on textControl_Loaded and choose Go To Definition from the opened context menu. Add the following code to the event handler:

private void textControl_Loaded(object sender, RoutedEventArgs e)
[Visual Basic]
private void textControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

Now, press F5 to compile and start the application.