In VB double-click My Project node in Solution Explorer and click on References tab. Click Add button and in the Add Reference find and select DevComponents WpfRibbon and click OK.

You should already have the default WPF Window created by the VS.NET so open the Window1.xaml and change the Window declaration to:

<dc:RibbonWindowx:Class="WindowsApplication1.Window1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:dc="clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon"Title="My First Ribbon"Height="436"Width="638"ResizeMode="CanResizeWithGrip">

Do not forget to scroll down to the bottom of your XAML file and replace the </Window> with the </dc:RibbonWindow>
Note couple things:

x:Class value WindowsApplication1 should be changed to the name of your assembly/project. Window1 should be changed to the name of your window.

Notice xmlns:dc=“clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon” this adds the Wpf-Ribbon name space so you can reference the Wpf-Ribbon controls by using dc prefix. You are free to choose any other prefix you want. We choose dc because it is short 🙂

Open the Window1.xaml.cs file which is code behind file and change the Window1 class declaration so it inherits from DevComponents.WpfRibbon.RibbonWindow instead of System.Windows.Window

Your XAML file at the end of this step should look like this:

<dc:RibbonWindowx:Class="WindowsApplication158.Window1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:dc="clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon"Title="My First Ribbon"Height="436"Width="638"ResizeMode="CanResizeWithGrip"><Grid></Grid></dc:RibbonWindow>

Try to compile your application and if all changes were successful you should be error free

2. Adding Ribbon control

Ribbon control is added simply by specifying the Ribbon XAML markup tag. Continuing from the step 1 we will change our XAML so it includes better layout to replicate something like RibbonPad sample that we ship with the control. After adding the Ribbon and changing the layout your window XAML file should look like this:

3. Specifying the Application Menu

Application menu is assigned by setting the Ribbon.ApplicationMenu property to the new instance of the ApplicationMenu control. Application menu usually looks something like this (from our RibbonPad sample):

Application menu displayed in the picture above has three parts. Left part which displays the document related commands, like New, Open, Save etc. use main application menu content to specify these. Right part which displays the Most Recently Used list of files, use ApplicationMenu.MruItems collection to specify this. Bottom part which displays the application commands, use AppItems collection to specify these commands. This is how application markup for the menu pictured above looks like:

In the markup above you will notice usage of the styles for certain elements. Styles are used to define common settings for the controls. Here is the markup for the styles used above, place this just below the RibbonWindow declaration in your markup:

Notice the usage of the QatCustomizeButton control. You simply include this control as last control in the Quick Access Toolbar to provide the customization button that allows end user to minimize, maximize ribbon and change the Quick Access Toolbar position.

4. Defining the Ribbon Tabs

Ribbon tabs are defined as the main content of the Ribbon control. They are defined as instances of RibbonTab control. Here is how you define Home tab:

<dc:RibbonTabHeader="Home"dc:Ribbon.KeyTip="H">

Note that you can add controls other than the RibbonTab and they will appear on the same line as tabs. Here is how you define the help button and align it to the right:

5. Adding content to the Ribbon Tabs, Ribbon Bar controls

To add content to the Ribbon Tabs add as content instance of the RibbonBarPanel control with the height specified. To the panel add instances of RibbonBar control. Panel provides the appearance for the tab content and automatic sizing support for the RibbonBar controls.

Here is the markup that adds the single RibbonBar control to the RibbonTab:

<dc:RibbonTabHeader="Home"dc:Ribbon.KeyTip="H"><dc:RibbonBarPanelHeight="85"><dc:RibbonBarHeader="Clipboard"Name="ribbonBarClipboard"Padding="3"LaunchDialog="DialogLauncherClicked"ResizeOrderIndex="1"dc:Ribbon.KeyTip="FO"><dc:ButtonDropDownHeader="Paste"ImagePosition="Top"dc:RibbonBar.MinAutoSizeHint="Medium"ExpandPosition="Bottom"PopupType="Menu"ContentExpands="true"VerticalContentAlignment="Center"dc:Ribbon.KeyTip="V"Command="ApplicationCommands.Paste"><dc:ButtonDropDown.Image><ImageSource="images/Paste32.png"/></dc:ButtonDropDown.Image><dc:ButtonDropDown.ToolTip><dc:SuperToolTipHeader="Paste (Ctrl+V)"Footer="Press F1 for help..."><TextBlockTextWrapping="Wrap"Width="180">Paste the contents of the Clipboard</TextBlock></dc:SuperToolTip></dc:ButtonDropDown.ToolTip><dc:ButtonDropDownHeader="Paste"Role="MenuItem"dc:Ribbon.KeyTip="P"/><dc:ButtonDropDownHeader="Paste Special..."Role="MenuItem"dc:Ribbon.KeyTip="S"/></dc:ButtonDropDown><dc:ButtonDropDownHeader="Cut"dc:Ribbon.KeyTip="X"><dc:ButtonDropDown.Image><ImageSource="images/Cut.png"/></dc:ButtonDropDown.Image><dc:ButtonDropDown.ToolTip><dc:SuperToolTipHeader="Cut (Ctrl+X)"><TextBlockTextWrapping="Wrap"Width="180">Cut the selection from the document and put it on the Clipboard.</TextBlock></dc:SuperToolTip></dc:ButtonDropDown.ToolTip></dc:ButtonDropDown><dc:ButtonDropDownHeader="Copy"dc:Ribbon.KeyTip="C"><dc:ButtonDropDown.Image><ImageSource="images/Copy.png"/></dc:ButtonDropDown.Image><dc:ButtonDropDown.ToolTip><dc:SuperToolTipHeader="Copy (Ctrl+C)"><TextBlockTextWrapping="Wrap"Width="180">Copy the selection and put it on the Clipboard.</TextBlock></dc:SuperToolTip></dc:ButtonDropDown.ToolTip></dc:ButtonDropDown></dc:RibbonBarPanel></dc:RibbonTab>

Markup above introduces number of new properties. From top to bottom here is the explanation:

RibbonBar.LaunchDialog is the event that occurs when RibbonBar dialog launcher button in bottom right corner is pressed.

RibbonBar.ResizeOrderIndex property specifies the automatic resize order index for the RibbonBar control. RibbonBar controls on the same panel with the highest value is resized first as the window size is reduced.

SuperTooltip control which is assigned to the Tooltip property specifies the Super Tooltip for a button.