Finally Microsoft has included the Ribbon control in Windows Presentation Foundation, similar to the Microsoft Office Ribbon Bar, all the basic features and functionality including tabs, groups, controls, Quick Access Toolbar, integration with the Windows Title Bar, and resizing with dynamic layout; everything.

Ribbon Function and Feature

  • Automatic Resizing and Minimization
  • Application Menu, Recent Documents Menu
  • Quick Access Toolbar
  • Nested Controls
  • Screen Tips
  • Styling and Appearance
  • Commands Support
  • Localization Support
  • Enhanced Routed Events Framework
  • WPF Code Compatibility
  • Similar to Office 2010 Interface and function

All features of the Ribbon with a WPF Window

Ribbon-with-WPF1.png

Visual structure of Ribbon

Ribbon-with-WPF2.jpg

Application Menu : Every ribbon includes an Application Menu as the first tab in the ribbon, we kept some commands and application function setting utility command.
Ribbon-with-WPF3.png

Quick Access Toolbar: The Quick Access toolbar is a very useful tool, we can keep here quick access setting command like undo, save etc.

Ribbon-with-WPF4.png

Application Title : In the Application title section, we define the title of the application.

Ribbon Group: This is a very useful container, we use it for categories of related content or to collect related navigation links in a group. We can also keep data in a collection.

Ribbon-with-WP5.png

Ribbon Button: The Ribbon button functionally works nearly similarly the same as a normal WPF button. This is for ing an event and communicating with business logic. It is responsible for providing an interface for the actions exposed by your application.

Ribbon-with-WPF6.png

Help Icon : The help button is located always on the right side of the Ribbon bar.

Ribbon-with-WPF7.png

Ribbon Tab

Ribbon-with-WPF8.png

Step-by-step Ribbon creates one Ribbon sample Example.

Step 1: Open Visual Studio 12, then create a new WPF Project.

Ribbon-with-WPF9.png

Step 2: Add a Ribbon Bar Reference to right-click on the Project Solution Explorer then select "Add reference" and search for the system.windows.controls.ribbon dll.

AddRibbondll.png

Step 3: Add the ribbon control to the code window.

Ribbon-with-WPF11.png

  1. <Window x:Class=" RibbonBar.MainWindow "
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="MainWindow" Height="350" Width="525">
  5. <Grid>
  6. <Grid.RowDefinitions>
  7. <RowDefinition Height="Auto"/>
  8. <RowDefinition/>
  9. </Grid.RowDefinitions>
  10. <Ribbon x:Name="RibbonWin" SelectedIndex="0">
  11. </Ribbon>
  12. </Grid>
  13. </Window>
Solution Explorer content

Ribbon-with-WPF12.png
  1. <Window x:Class=" RibbonBar.MainWindow "
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="MainWindow" Height="350" Width="525">
  5. <Grid>
  6. <Grid.RowDefinitions>
  7. <RowDefinition Height="Auto"/>
  8. <RowDefinition/>
  9. </Grid.RowDefinitions>
  10. <Ribbon x:Name="RibbonWin" SelectedIndex="0">
  11. <!-- Help Pane, located at the right-hand side -->
  12. <Ribbon.HelpPaneContent>
  13. <RibbonButton SmallImageSource="Images\help.png" />
  14. </Ribbon.HelpPaneContent>
  15. <!-- Quick Access Toolbar - located at the upper-left corner -->
  16. <Ribbon.QuickAccessToolBar>
  17. <RibbonQuickAccessToolBar>
  18. <RibbonButton x:Name ="Save" SmallImageSource="Images\save.png" />
  19. <RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\undo.png">
  20. <RibbonSplitMenuItem Header="Undo 1" />
  21. <RibbonSplitMenuItem Header="Undo 2" />
  22. <RibbonSplitMenuItem Header="Undo 3" />
  23. </RibbonSplitButton>
  24. <RibbonSplitButton x:Name="Redo" SmallImageSource="Images\redo.png" >
  25. <RibbonSplitMenuItem Header="Redo 1" />
  26. <RibbonSplitMenuItem Header="Redo 2" />
  27. </RibbonSplitButton>
  28. </RibbonQuickAccessToolBar>
  29. </Ribbon.QuickAccessToolBar>
  30. <!-- Application Menu, located at the left-hand side (down arrow) -->
  31. <Ribbon.ApplicationMenu>
  32. <RibbonApplicationMenu KeyTip="F">
  33. <RibbonApplicationMenuItem Header="Options" ImageSource="Images\options.png" />
  34. <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\quit.png" />
  35. </RibbonApplicationMenu>
  36. </Ribbon.ApplicationMenu>
  37. <!-- Ribbon Tab #1: Home -->
  38. <RibbonTab Header="Home" KeyTip="H" >
  39. <!-- Home group-->
  40. <RibbonGroup x:Name="ClipboardGroup" Header="Home">
  41. <RibbonMenuButton LargeImageSource="Images\paste.png" Label="Paste" KeyTip="V">
  42. <RibbonMenuItem ImageSource="Images\paste.png" Header="Keep Text Only" KeyTip="T"/>
  43. <RibbonMenuItem ImageSource="Images\paste.png" Header="Paste Special..." KeyTip="S"/>
  44. </RibbonMenuButton>
  45. <RibbonButton SmallImageSource="Images\cut.png" Label="Cut" KeyTip="X" />
  46. <RibbonButton SmallImageSource="Images\copy.png" Label="Copy" KeyTip="C" />
  47. <RibbonButton SmallImageSource="Images\format_painter.png" Label="Format Painter" KeyTip="FP" />
  48. </RibbonGroup>
  49. <!-- Employee And Payroll group-->
  50. <RibbonGroup x:Name="Employee" Header="Employee And Payroll">
  51. <RibbonMenuButton LargeImageSource="Images\personal.png" Label="Employee" KeyTip="V">
  52. <RibbonMenuItem ImageSource="Images\paste.png" Header="Keep Text Only" KeyTip="T"/>
  53. <RibbonMenuItem ImageSource="Images\paste.png" Header="Paste Special..." KeyTip="S"/>
  54. </RibbonMenuButton>
  55. <RibbonButton SmallImageSource="Images\save.png" Label="Save" KeyTip="X" />
  56. <RibbonButton SmallImageSource="Images\add.png" Label="Add" KeyTip="C" />
  57. </RibbonGroup>
  58. </RibbonTab>
  59. <!-- Ribbon Tab #2: -->
  60. <RibbonTab Header="Insert" KeyTip="I">
  61. </RibbonTab>
  62. <!-- Ribbon Tab #3: -->
  63. <RibbonTab Header="PageLayout" KeyTip="L">
  64. </RibbonTab>
  65. </Ribbon>
  66. </Grid>
  67. </Window>
Ribbon-with-WPF13.png

To add a ribbon window change some code to only the previous code as in the following 4 steps.

Ribbon-with-WPF14.png

  1. Add using System.Windows.Controls.Ribbon.
  2. Inherit RibbonWindow.
  3. Use RibbonWindow instead of Window.
  4. Use </RibbonWindow> instead of </Window>.

Ribbon-with-WPF15.png