HOW TO: Use and add ribbon to your WPF applications? (Part 5)
Going deeper into adding and organization of controls in ribbon. How to add split button with drop-down menu and combine it with 3 smaller buttons while implementing resize behavior in WPF ribbon? What about group collapsing in WPF ribbon? Everything is covered in this article.
Be sure to check previous parts of this tutorial because I am building on premise that you have grasped concepts introduced earlier in tutorials.
Here are the all tutorials:
How to get free WPF ribbon? Read this article and you will get all details there.
HOW TO: Use and add ribbon to your WPF applications (Part 1)
HOW TO: Use and add ribbon to your WPF applications (Part 2)
HOW TO: Use and add ribbon to your WPF applications (Part 3)
HOW TO: Use and add ribbon to your WPF applications (Part 4)
HOW TO: Use and add ribbon to your WPF applications (Part 6)
OK, first goal today is to create some controls in our Clipboard group on Home tab.
We will try to accomplish this look:
First we will define our RibbonGroup and call it Clipboard, after that we will define Command as we did earlier in previous tutorials, we will add Dialog Launchers and for the first time – something Called GroupSizeDefinitions.
Basically GroupSizeDefinitions are telling ribbon control how to behave when user resizes application that is hosting WPF ribbon control. For example, if we change window size to make it smaller some labels will not be shown. You can explore that behavior in, for example, Word 2007.
We will enable this kind of scalability:
Therefore our RibbonGroup code will now look like this:
And in Resources, at same location where we usually define Commands, we will define new resource called Medium4Buttons:
We can now see that behavior described in this part of XAML will enable us to scale and modify appearance of our controls accordingly.
Now let’s go back and define controls and their appearance in our Clipboard group.
First we will add a split button with dropdown menu and two menu items. XAML code is:
Please take care about location of your images. In this example Images directory is used.
Also, note that StaticResource Paste has been defined. Here is XAML code for that too:
Also, we will need to define event handlers for CanExecute and Executed. That has been explained in previous tutorials. In case you stumble into problems, leave comment under this post.
Now, we have created our split button with drop down menu.
Result should look like this:
Now we will proceed and add three more buttons in our Clipboard group: Cut, Copy and Format Painter. Cut and Copy will be regular buttons while Format Painter is going to be toggle button.
XAML code is straightforward:
Again, we need to define StaticResource for each command – in this example they are called CutCommand, CopyCommand and FormatPainterCommand.
They can look somewhat like this:
And that is basically all. Pretty straightforward, don’t you think so?
BONUS HINT: I have explained how to scale Clipboard group when user resizes application, but let’s suppose that you have number of different groups like Clipboard, Font, Paragraph and so on… WPF ribbon control enables you to define order how these groups will collapse – in other words it enables you to define collapse group behavior.
All you need to do is to set order how groups should collapse.
It’s simple as this one line:
<r:RibbonTab Label="Home" GroupSizeReductionOrder="Styles,Clipboard,Styles, Editing,Styles,Editing">What that means is that under Home tab first group to be collapsed is Styles, then Clipboard and so on…
And at the end – full XAML code listing for our Clipboard group:
<r:RibbonGroup Name="Clipboard" Command="{StaticResource ClipboardGroupCommand}"
HasDialogLauncher="True" GroupSizeDefinitions="{StaticResource Medium4Buttons}"><r:RibbonSplitButton Command="{StaticResource Paste}" Name="PasteButton">
<r:RibbonSplitButton.Items>
<MenuItem Header="_Paste">
<MenuItem.Icon>
<Image Source="Images\Paste16.png" Width="16" Height="16" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Paste _Special...">
<MenuItem.Icon>
<Image Source="Images\Paste16.png" Width="16" Height="16" />
</MenuItem.Icon></MenuItem></r:RibbonSplitButton.Items>
</r:RibbonSplitButton>
<r:RibbonButton Name="CutButton" Command="{StaticResource CutCommand}" />
<r:RibbonButton Command="{StaticResource CopyCommand}" />
<r:RibbonToggleButton Command="{StaticResource FormatPainterCommand}" /></r:RibbonGroup>
Next part of this tutorial will show you how to add combo boxes, check boxes and some other neat controls in WPF ribbon control. Please share your comments, ideas and suggestions so I can prioritize next parts of this tutorial for you.
29 Responses to “ HOW TO: Use and add ribbon to your WPF applications? (Part 5) ”
Trackbacks
- Vibor Cipan
- Vibor Cipan
- Vibor Cipan
- HOW TO: Use and add ribbon to your WPF applications? (Part 4)
- HOW TO: Use and add ribbon to your WPF applications? (Part 2)
- HOW TO: Use and add ribbon to your WPF applications?
- Vibor Cipan
- Download free WPF ribbon control (Windows Scenic and Office 2007 style, too)
- HOW TO: Use and add ribbon to your WPF applications? (Part 6)
- HOW TO: Use and add ribbon to your WPF applications? (Part 3)
- Taekyun Kim
- Taekyun Kim
- Taekyun Kim
Hi,
Would be great if you could cover how to deal with the orb menu (as in adding objects to it and such) and adding content to the window besides the ribbon!
Great series of tutorials so far though
Added to list – I will cover it in near future. Thanks so much for suggestion!
hi, how to add keyboard shortcut to tabs? thanks!
hello,
really great explanation!!
I use Command=”{Binding MyCommand}” to connect the RibbonButton to my code (Prism/CAL iplementation) so I do not use a code behind file. The benefit is , that my code can reside in different assemblies. it works fine. but how can I set the buttontext and the image? these things where normally set via a RibbonCommand (which I cannot use when I use this ‘Binding’ thing…)
Is there an easy way to create a split button with a toggle state, like with the Track Changes button in word?
Is there going to be a tutorial on the QAT menu and setting up your application menu soon? It would be so good to hav a tut on that – I need it right now cause I can’t figure out how to setup the application menu
I will probably make it, but I can’t really promise any dates… But as all other suggestions, it has been added to my Excel sheet with suggestions and I am aware of all these requests! Thanks!
You know how above in the first image you’ve got Cut, Copy and Format smaller buttons – how do you get them?
Hi, good post. I have been wondering about this topic,so thanks for sharing. I’ll definitely be coming back to your site.
I know how to deal with the orb and quick access toolbar. Before putting the tabs, put
To costumize the orb, menu items and so, just use commands
I forgot to put the code.
Here it is:
Hi, I’m using XP and when I use the RibbonWindow, the window title doesn’t shows any text. Can someone help?
When will future parts of this tutorial come out i really would like to know!!!!!
Hi Matt,
As soon as I get some free time – tutorials like these are not really something that I write in 20 minutes or so. Anyhow, I am aware of your needs and other people have also expressed their ideas for next tutorials and certanly I will be addressing them. Let’s say like this: Next tutorial will be here during Sunday and we can take it from there depending on my schedule.
Thanks for your comment and suggestion!
I am getting an error when using …
Nested properties are not supported Ribbon.Resources…
I tried this tutorial fully..This is reallly nice … just please tell me whether i can add group headers with this??
Why using this ”
”
gives me an error
The property ‘Header’ does not exist in XML namespace ‘clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary’. Line 264 Position 26. (MC3072) – D:\NethangiWork\Work\WPF\RibbonTutorial\RibbonTutorial\Window1.xaml:264,26
Can someone help me up…please…