Subscribe About

Tayyab Bin Tariq

I like sharing what i know
Computer Programming Digital Image Processing FAST NUCES Microsoft Technologies Misc Technology Uncategorized Web Development WILT
Search

Create A Simple WPF Ribbon Control: What I learnt Today?

If you like this post, please visit our sponsors above. Thanks!
In this tutorial I would explain how to create a simple Ribbon Control using Windows Presentation Foundation .

Image Courtesy MSDN.

The WPF team is sharing new WPF Ribbon control starting on Monday, October 27, 2008! Binaries and source code for the Ribbon can be downloaded at the Office UI Licensing site.

So, your first step is to go to Office UI Licensing site and get yourself a free WPF ribbon control. You must accept and sign license (its not a big deal) and download free WPF ribbon control. Just follow this link .

What is Ribbon Control?

Ribbons are the modern way to help users find, understand, and use commands efficiently and directlywith a minimum number of clicks, with less need to resort to trial-and-error, and without having to refer to Help. The preview version of the WPF Ribbon includes many of the features which Independent Software Vendors (ISVs) need to add a Ribbon control to their WPF applications. Ribbon is a command bar that organizes a programs features into a series of tabs at the top of a window. The Ribbon UI was designed by Microsoft Office to increase discoverability of features and functions, enable quicker learning of the program as a whole, and make users feel more in control of their experience with the program. The Ribbon is designed to replace the traditional menu bar and toolbars. The WPF Ribbon will include all of the basic Ribbon features and functionality, including tabs, groups, controls (buttons, split buttons, galleries, etc.), title bar integration of the application menu button and quick access toolbar, and resizing with dynamic layout. For more information, follow this link .

Step 1: Adding The Ribbon Control to your WPF Application

1. Create a new WPF Project using Visual Studio .NET 2008. 2. Add a reference to RibbonControlsLibrary.dll that you downloaded earlier.

3. Add the XAML Reference to the DLL you have just added to your project by adding this line to your XAML code. xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" 4. Change the root element of your XAML code to r:RibbonWindow instead of Window.
1: <r:RibbonWindow x:Class="FirstRibbonApplication.Window1" 2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4: xmlns:r="clrnamespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" 5: Title="Window1" Height="300" Width="300"> 6: <Grid> 7: 8: </Grid> 9: </r:RibbonWindow>

5. Add the r:Ribbon tag to your XAML code. <r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" />

Your XAML code should now look like this;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" Title="Window1" Height="300" Width="300"> <Grid> <r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" /> </Grid>

</r:RibbonWindow>

Congratulations! you have successfully added a ribbon control to your WPF application. Before you can see the control you would need to make a few changes to the accompanying cs file. Open the cs and add the following library and make sure that the partial class inherits from RibbonWindow instead of Window.
using Microsoft.Windows.Controls.Ribbon;

Compile and run the application to see the results.

Step 2: Adding Tabs, Groups and Buttons

As described earlier a ribbon control contains different tabs, each tab contains a groups and groups in turn contain buttons. In this step we would create tabs, groups and buttons. 1. To add tabs to your ribbon control add the r:RibbonTab tag within the r:Ribbon tag you added in the last step.
<r:RibbonTab Label="Home"> </r:RibbonTab><r:RibbonTab Label="Insert"> </r:RibbonTab><r:RibbonTab Label="Help"> </r:RibbonTab>

Your application should look somewhat like this now. Note that the support for hovering and clicking has been added automatically.

2. To add groups within a tab, place the r:RibbonGroup tag inside the r:RibbonTab tag.
<r:RibbonGroup Name="Clipboard"></r:RibbonGroup><r:RibbonGroup Name="Fonts"></r:RibbonGroup>

I am adding Clipboard and Fonts tabs within the Home tab. Note: If you run the application containing empty Ribbon Groups it would crash. 3. Now to add buttons, place the r:RibbonButton tags inside the r:RibbonGroup tags you just created.
<r:RibbonButton ></r:RibbonButton>

Your code should not look like this;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" Title="Window1" Height="300" Width="300"> <Grid> <r:Ribbon Title="Window1" x:Name="ribbon"> <r:RibbonTab Label="Home"> <r:RibbonGroup Name="Clipboard"> <r:RibbonButton ></r:RibbonButton>

</r:RibbonGroup> <r:RibbonGroup Name="Fonts"> <r:RibbonButton ></r:RibbonButton> </r:RibbonGroup> </r:RibbonTab> <r:RibbonTab Label="Insert"> </r:RibbonTab> <r:RibbonTab Label="Help"> </r:RibbonTab> </r:Ribbon> </Grid> </r:RibbonWindow>

Congratulations! You have successfully created tabs, groups and buttons in your ribbon control application.

Note that the buttons are still blank. We will take care of this in Step 3.

Step 3: Adding Commands to Ribbon Groups and Ribbon Buttons

In this step we would define resources for our ribbon groups and ribbon buttons and define commands on them. 1. Create an Images folder and add some images to act as icons for your ribbon buttons. 2. Use the following XAML code to define a resource dictionay within the RibbonWindow tag. We would use this to define resources for our buttons.

<r:RibbonWindow.Resources><ResourceDictionary></ResourceDictionary></r:RibbonWindow.Resources>

3. Now add a resource for our Clipboard Ribbon Group. The code would look like this.
<r:RibbonCommand x:Key="ClipboardGroupCommand"CanExecute="OnCanExecute"Executed="OnShowClipboardGroup"LabelTitle=" Clipboard"/>

x:Key is used to reference this element. CanExecute and Execute are holding names for events that would be fired. LabelTitle holds the title of the group we are creating this resource for. 4. Once the resource has been defined, let us use it for the Clipboard group. Find this part in your XAML code;
<r:RibbonGroup Name="Clipboard">

and replace it with

<r:RibbonGroup Name="Clipboard" HasDialogLauncher="True" Command="{StaticResource ClipboardGroupCommand}">

Now, we have connected our resource with RibbonGroup. I have added HasDialogLauncher=True because that will allow us to fire OnShowClipboardGroup event when user clicks on dialog launcher. 5. Go to your CS code-behind file and add these lines:
private void OnCanExecute(object target, CanExecuteRoutedEventArgs args){args.CanExecute = true;} private void OnShowClipboardGroup(object target, ExecutedRoutedEventArgs args){MessageBox.Show("This is the Clipboard!.", "Clipboard Dialog");}

In principal we are done with this step and the essential concepts have been learnt. You can now learn your application and test to see that the message box is displayed.

Similar to step 4 and 5 create another RibbonCommand, add the resource to the Copy Button and write the corresponding cs code. Creating another RibbonCommand;
<r:RibbonCommandx:Key="CopyCommand"CanExecute="OnCanExecute"Executed="OnCopyCommand"LabelTitle="C opy"LargeImageSource="Images\copy.png"ToolTipTitle="Copy (Ctrl+C)"ToolTipDescription="Copies the selected content on to the clipboard"></r:RibbonCommand>

Adding the RibbonCommand to the RibbonButton;

<r:RibbonButton Name="Copy" Command="{StaticResource CopyCommand}"></r:RibbonButton>

Adding the event to the code-beside file;

private void OnCopyCommand(object target, ExecutedRoutedEventArgs args){ is the copy button!.", "Copy Dialog");} MessageBox.Show("This

Your XAML code should look like this now;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" Title="Window1" Height="600" Width="400"> <r:RibbonWindow.Resources> <ResourceDictionary> <r:RibbonCommand x:Key="ClipboardGroupCommand" CanExecute="OnCanExecute" Executed="OnShowClipboardGroup"

LabelTitle="Clipboard"> </r:RibbonCommand> <r:RibbonCommand x:Key="CopyCommand" CanExecute="OnCanExecute" Executed="OnCopyCommand" LabelTitle="Copy" LargeImageSource="Images\copy.png" ToolTipTitle="Copy (Ctrl+C)" ToolTipDescription="Copies the selected content on to the clipboard"> </r:RibbonCommand> </ResourceDictionary> </r:RibbonWindow.Resources> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top"> <r:Ribbon Title="Window1" x:Name="ribbon" VerticalAlignment="Top"> <r:RibbonTab Label="Home"> <r:RibbonGroup Name="Clipboard" HasDialogLauncher="True" Command="{StaticResource ClipboardGroupCommand}"> <r:RibbonButton Name="Copy" Command="{StaticResource CopyCommand}"></r:RibbonButton> </r:RibbonGroup> <r:RibbonGroup Name="Fonts"> <r:RibbonButton Name="Paste"></r:RibbonButton> </r:RibbonGroup> </r:RibbonTab> <r:RibbonTab Label="Insert"> </r:RibbonTab> <r:RibbonTab Label="Help"> </r:RibbonTab> </r:Ribbon> </Grid> </r:RibbonWindow>

Now you should be able to see an icon on your Copy Button and an accompanying tooltip.

Share on Facebook

If you like this post, please visit our sponsors blow. Thanks!
Posted April 18, 2010 bytayyabtariq. Comments andtrackbacks are open. Follow the comments feed. Filed under:

Computer Programming Technology WILT WPF Tagged with: GUI, Ribbon,Ribbon control, Visual Studio.NET, What I Learnt Today?, Windows Presentation Foundation, WPF.

5 Responses to Create A Simple WPF Ribbon Control: What I learnt Today?

1. Awais says:

April 18, 2010 at 11:39 PM

hmmits good

thanku for sharing.. Awais FAST Nuces

2.

Using Ribbon Control with Windows Forms: What I Learnt Today? | Tayyab Bin Tariq says:

April 19, 2010 at 10:11 PM

[...] I have been exploring the use of Ribbon Control. Yesterday, I posted a tutorial on its use with Windows Workflow Foundation. However, I am far more comfortable developing [...]

3.

Nethsu says:

September 3, 2010 at 10:03 AM

Hi,, Ive been doing some work about this area..I just want to know that Why cant I use ribbon group header and smallImage Sourse..??it gives me an error The property Header does not exist in XML namespace clrnamespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary. Line 270 Position 26. (MC3072) D:\NethangiWork\Work\WPF\RibbonTutorial\RibbonTutorial\Window1.xaml:270,26

I used the same dll from Micrtosofts and same xmlns:r .What is the issue regrading this..csn u help me as im new to this ribbon controls??

4.

Rajender says:

August 30, 2011 at 5:48 PM

Giving Error of Label

5.

Lem says:

September 23, 2011 at 12:52 PM

Hi I downloaded the latest WPF Ribbon control from MSDN but I cant seem to use the HasDialogueLauncher property. Any ideas why?

Leave a Reply
Name (required) Mail (will not be shared) (required) Website

Submit Comment

CAPTCHA Code

What I learnt Today? Using Ribbon Control with Windows Forms: What I Learnt Today?
Tags

Array Arrays Arrays of Arrays ASP.NET C#

C++callback callback functions Cookie Login cookies Digital

Google GUI Image

Image Processing EventHandling Facebook getuserdata

Processing imread imshowJagged Arrays login login security Matlab Matlab

and Images Matlab Image Matlab User Data MessageBox Area PushButtonRibbon

GUI Matlab GUI: Handling User Data

Microsoft PHP Authentication PHP Login PHP Members

Ribbon control Security session session variablesetuserdata TextBox User Input

Visual
Recent Posts

Studio.NET What I Learnt Today?Windows Forms WPF

Arabian Idol: Our Arabic Language Project :) How to block specific ports in Windows 7 Using unmanaged code/types from managed code Ten things you shouldnt post to Facebook Matlab GUI-Radio Buttons: What I learnt Today? Recent Comments

JanO on Using Ribbon Control with Windows Forms: What I Learnt Today? xcesco on Using Ribbon Control with Windows Forms: What I Learnt Today? pankaj on A conversation between a student and a teacher Crystle on Importing Facebook, Hi5, MySpace and LinkedIn Contacts to MSN Messenger Lina on Matlab GUI-Radio Buttons: What I learnt Today?

o o o o o

XenoGlaux-Solutions
Ahsun Taquveem Chohans Blog War On Technology XenoGlaux-Solutions.com

Meta
Log in Valid XHTML

Home

About

RSS Feed

Powered by WordPress and the PressPlay Theme

Copyright 2012 Tayyab Bin Tariq