Professional Documents
Culture Documents
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 .
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 .
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" />
</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;
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>
</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.
<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">
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>
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.
hmmits good
2.
Using Ribbon Control with Windows Forms: What I Learnt Today? | Tayyab Bin Tariq says:
[...] 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:
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:
5.
Lem says:
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
Visual
Recent Posts
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