Reader Level:
ARTICLE

Ribbon Control in WPF

Posted by Vishnujeet Kumar Articles | WPF January 12, 2013
Through-out this article you will learn about Microsoft Ribbon control in Windows Presentation Foundation.
  • 14
  • 0
  • 114500
Download Files:
 

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 kept hear 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 passing 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

<Window x:Class=" RibbonBar.MainWindow "
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>      
           
<Ribbon x:Name="RibbonWin"  SelectedIndex="0">         
           
</Ribbon>       
   
</Grid>
</
Window>

Solution Explorer content

Ribbon-with-WPF12.png

<Window x:Class=" RibbonBar.MainWindow "
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
<
Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions> 
       
<Ribbon x:Name="RibbonWin"  SelectedIndex="0"> 
           
<!-- Help Pane, located at the right-hand side -->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="Images\help.png" />
            </Ribbon.HelpPaneContent> 
           
<!-- Quick Access Toolbar - located at the upper-left corner -->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton x:Name ="Save" SmallImageSource="Images\save.png" />
                    <RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\undo.png">
                        <RibbonSplitMenuItem Header="Undo 1" />
                        <RibbonSplitMenuItem Header="Undo 2" />
                        <RibbonSplitMenuItem Header="Undo 3" />
                    </RibbonSplitButton>
                    <RibbonSplitButton x:Name="Redo" SmallImageSource="Images\redo.png" >
                        <RibbonSplitMenuItem Header="Redo 1" />
                        <RibbonSplitMenuItem Header="Redo 2" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar> 
           
<!-- Application Menu, located at the left-hand side (down arrow) -->
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F">
                    <RibbonApplicationMenuItem Header="Options" ImageSource="Images\options.png" />
                    <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\quit.png" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>             
           
<!-- Ribbon Tab #1: Home -->
            <RibbonTab Header="Home" KeyTip="H" >               
               
<!-- Home  group-->
                <RibbonGroup x:Name="ClipboardGroup" Header="Home">
                    <RibbonMenuButton LargeImageSource="Images\paste.png" Label="Paste" KeyTip="V">
                        <RibbonMenuItem ImageSource="Images\paste.png" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Images\paste.png" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Images\cut.png" Label="Cut" KeyTip="X" />
                    <RibbonButton SmallImageSource="Images\copy.png" Label="Copy" KeyTip="C" />
                    <RibbonButton SmallImageSource="Images\format_painter.png" Label="Format Painter" KeyTip="FP" />
                </RibbonGroup>
                <!-- Employee And Payroll group-->
                <RibbonGroup x:Name="Employee" Header="Employee And Payroll">
                    <RibbonMenuButton LargeImageSource="Images\personal.png" Label="Employee" KeyTip="V">
                        <RibbonMenuItem ImageSource="Images\paste.png" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Images\paste.png" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Images\save.png" Label="Save" KeyTip="X" />
                    <RibbonButton SmallImageSource="Images\add.png" Label="Add" KeyTip="C" /> 
               
</RibbonGroup>
            </RibbonTab>
            <!-- Ribbon Tab #2: -->
            <RibbonTab Header="Insert" KeyTip="I">                             
           
</RibbonTab>
            <!-- Ribbon Tab #3: --> 
           
<RibbonTab Header="PageLayout" KeyTip="L">
            </RibbonTab>
        </Ribbon>
    </Grid>
</
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

    Article Extensions
    Contents added by chandrasekhar reddy on Jun 25, 2013
    Contents added by Paddy Evans on May 08, 2013
    As this solution just manipulates XAML I have replicated this in VB.Net (Visual Studio Express 2012) and it works fine apart from one issue which I have also separately raised with Microsoft and am still awaiting an answer: When I maximise the window the icons and text in the title bar are not centred vertically and drift off the screen.

    Has anyone else experienced this problem?
    Contents added by hello world on Apr 03, 2013
    anyway thanks for ribbon article!
    COMMENT USING

    Trending up