HOW TO: Use and add ribbon to your WPF applications? (Part 2)
Let’s go and continue with our first tutorial on adding the WPF ribbon control in your interface. In this part I will show you how to add tabs, groups and buttons to ribbon control. Also, I will give you feeling on what can you expect in next part of this tutorial.
Before you start implementing ribbon control in your interface, you should think about organization of ribbon interface. What kind of tabs you are going to use, how will you go and group them, what buttons/commands will be part of each group.
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 3)
HOW TO: Use and add ribbon to your WPF applications (Part 4)
HOW TO: Use and add ribbon to your WPF applications (Part 5)
HOW TO: Use and add ribbon to your WPF applications (Part 6)
In one of the future pars of this tutorial series I will go and discuss some good and proven practices for using and implementing ribbon as major part of your user experience.
Please note that tabs, groups and commands we are going to use in this tutorial are just for demonstrational purposes and do not necessarily reflect good or suggested practice. After all, this is just tutorial showing you basic stuff about adding objects to your ribbon control.
So, enough talking, let’s start working…
1. I will go and add three tabs to ribbon control, namely: Home, Insert and Help in that particular order. Again, we should go in our XAML code and make some additions.
Basically we are adding these lines:
<r:RibbonTab Label="Home"/>
<r:RibbonTab Label="Insert"/>
<r:RibbonTab Label="Help"/>
And after that our code should look like this:
If you now go and press F5 to build your project you should be able to see your application with three tabs we just added.
Notice that they are already supporting typical mouse interactions (hover, click – and visual cues too). Using the mouse wheel you can quickly change selected tabs (that is in accordance with Office 2007 apps like Office Word or Office Excel).
2. Next step is adding several groups (aka “chunks”) which will serve as containers for our controls, like buttons, which we will add later.
I won’t complicate and I will go and add just 2 groups to the first tab (you can feel free and go and add more groups if you want too).
So, I will add groups Clipboard and Fonts. That is easily accomplished by adding following lines in XAML code:
<r:RibbonGroup Name="Clipboard">
</r:RibbonGroup>
<r:RibbonGroup Name="Fonts">
</r:RibbonGroup>
After this addition our code looks like this:
3. Now to the buttons! We will add three buttons in our Clipboard group (Cut, Copy and Paste, as you might guessed already) and three to Fonts group (Bold, Italic and Underline).
We will use this basic structure:
<r:RibbonButton/>
Our code will then appear like this:
Now go and press F5 and take a look at your application. If you position mouse over buttons (yes, they ARE currently invisible) you should see them reacting and changing colors when you hover them or click on them)
Yes, and groups also appear to be nameless. We are going to fix that in next step which is slightly more complex.
In next part, tomorrow, November 6, I will guide you through adding icons, labels and even tool tips to our ribbon.
Also, I am grateful for all your comments on Facebook or via e-mail and suggestions I am receiving from you. This blog is conceived on idea that you, as readers, share your feelings, suggestions and ideas. Thank you so much for this great effort and time you are investing.
26 Responses to “ HOW TO: Use and add ribbon to your WPF applications? (Part 2) ”
Trackbacks
- HOW TO: Use and add ribbon to your WPF applications?
- HOW TO: Use and add ribbon to your WPF applications? (Part 3)
- Download free WPF ribbon control (Windows Scenic and Office 2007 style, too)
- WPF ribbon control roadmap and look into the future
Hi,
How to add shortcut keys to File,Edit menu using ribbon control.
As soon as I add the RibbonGroup I get “object reference not set to an instance of an object” on the tag.
Do you get it during runtime or design time?
In blend design as well as if I run the application.
Thanks
Try ensuring that all elements have their names (Key) different and that you are running on .NET 3.5 SP1… Also, try cleaning then rebuilding solution… this control is stil CTP / Beta so some bugs are possible, but this I’ve been going through this tutorial several times and everthing worked fine. I really do hope you will be successful as well too!
Hi..Michael!
First try the third step completely and then build the solution!
I hope it should work!
Hey Maverick,
It worked for me thanks…!!
verfied framework 3.5 SP1
cleanded rebuilt still is a problem. XAML below
Can you send your XAML to my e-mail address? You can find it here: http://www.uxpassion.com/about at the end of the article.
Hi guys, regarding to the RibbonGroup problem – if you add for example between tags, it should works.
Only probably doesn’t work. Have you tried it?
Sorry for previous message. Modified – Hi guys, regarding to the RibbonGroup problem – if you add, for example RibbonButton between RibbonGroup tags, it should works.
Only single RibbonGroup probably doesn’t work. Have you tried it?
Great site.
Yea this works, but you do have to put something into the RibbonGroup, otherwise you get the null reference exception.
Thanks for the tut by the way. Very useful.
sir i want to do ribboncontrol in windows application.plz can u tell me sir
When I add a RibbonGroup, my Visual Studio gives me this error:
“System.Windows.Markup.XamlParseException was unhandled
Message=”‘RibbonGroup’ object cannot be added to ‘Ribbon’. The value \”Microsoft.Windows.Controls.Ribbon.RibbonGroup\” is not of type \”Microsoft.Windows.Controls.Ribbon.RibbonTab\” and cannot be used in this generic collection.\r\nParameter name: value Error at object ‘Microsoft.Windows.Controls.Ribbon.RibbonGroup’ in markup file ‘RibbonTutorial;component/window1.xaml’ Line 13 Position 18.”
Source=”PresentationFramework”
LineNumber=13
LinePosition=18
StackTrace:
at System.Windows.Markup.XamlParseException.ThrowException(String message, Exception innerException, Int32 lineNumber, Int32 linePosition, Uri baseUri, XamlObjectIds currentXamlObjectIds, XamlObjectIds contextXamlObjectIds, Type objectType)
at System.Windows.Markup.XamlParseException.ThrowException(ParserContext parserContext, Int32 lineNumber, Int32 linePosition, String message, Exception innerException)
at System.Windows.Markup.BamlRecordReader.ThrowExceptionWithLine(String message, Exception innerException)
at System.Windows.Markup.BamlRecordReader.CreateInstanceFromType(Type type, Int16 typeId, Boolean throwOnFail)
at System.Windows.Markup.BamlRecordReader.GetElementAndFlags(BamlElementStartRecord bamlElementStartRecord, Object& element, ReaderFlags& flags, Type& delayCreatedType, Int16& delayCreatedTypeId)
at System.Windows.Markup.BamlRecordReader.BaseReadElementStartRecord(BamlElementStartRecord bamlElementRecord)
at System.Windows.Markup.BamlRecordReader.ReadElementStartRecord(BamlElementStartRecord bamlElementRecord)
at System.Windows.Markup.BamlRecordReader.ReadRecord(BamlRecord bamlRecord)
at System.Windows.Markup.BamlRecordReader.Read(Boolean singleRecord)
at System.Windows.Markup.TreeBuilderBamlTranslator.ParseFragment()
at System.Windows.Markup.TreeBuilder.Parse()
at System.Windows.Markup.XamlReader.LoadBaml(Stream stream, ParserContext parserContext, Object parent, Boolean closeStream)
at System.Windows.Application.LoadBamlStreamWithSyncInfo(Stream stream, ParserContext pc)
at System.Windows.Application.LoadComponent(Uri resourceLocator, Boolean bSkipJournaledProperties)
at System.Windows.Application.DoStartup()
at System.Windows.Application.b__0(Object unused)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Boolean isSingleParameter)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Boolean isSingleParameter, Delegate catchHandler)
at System.Windows.Threading.Dispatcher.WrappedInvoke(Delegate callback, Object args, Boolean isSingleParameter, Delegate catchHandler)
at System.Windows.Threading.DispatcherOperation.InvokeImpl()
at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
at System.Threading.ExecutionContext.runTryCode(Object userData)
at System.Runtime.CompilerServices.RuntimeHelpers.ExecuteCodeWithGuaranteedCleanup(TryCode code, CleanupCode backoutCode, Object userData)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Windows.Threading.DispatcherOperation.Invoke()
at System.Windows.Threading.Dispatcher.ProcessQueue()
at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Boolean isSingleParameter)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Boolean isSingleParameter, Delegate catchHandler)
at System.Windows.Threading.Dispatcher.WrappedInvoke(Delegate callback, Object args, Boolean isSingleParameter, Delegate catchHandler)
at System.Windows.Threading.Dispatcher.InvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Boolean isSingleParameter)
at System.Windows.Threading.Dispatcher.Invoke(DispatcherPriority priority, Delegate method, Object arg)
at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
at System.Windows.Threading.Dispatcher.Run()
at System.Windows.Application.RunDispatcher(Object ignore)
at System.Windows.Application.RunInternal(Window window)
at System.Windows.Application.Run(Window window)
at System.Windows.Application.Run()
at RibbonTutorial.App.Main() in C:\Documents and Settings\Rodrigo.RODRIGO-CFBCA83\Os meus documentos\Expression\Expression Blend Projects\RibbonTutorial\RibbonTutorial\obj\Debug\App.g.vb:line 62
at System.AppDomain._nExecuteAssembly(Assembly assembly, String[] args)
at System.AppDomain.ExecuteAssembly(String assemblyFile, Evidence assemblySecurity, String[] args)
at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssembly()
at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Threading.ThreadHelper.ThreadStart()
InnerException: System.ArgumentException
Message=”The value \”Microsoft.Windows.Controls.Ribbon.RibbonGroup\” is not of type \”Microsoft.Windows.Controls.Ribbon.RibbonTab\” and cannot be used in this generic collection.\r\nParameter name: value”
Source=”mscorlib”
ParamName=”value”
StackTrace:
at System.ThrowHelper.ThrowWrongValueTypeArgumentException(Object value, Type targetType)
at System.Collections.ObjectModel.Collection`1.VerifyValueType(Object value)
at System.Collections.ObjectModel.Collection`1.System.Collections.IList.Add(Object value)
at System.Windows.Markup.BamlRecordReader.AddToContentProperty(Object container, Object contentProperty, Object value)
InnerException:
“
Hi, You need to add a button to the group
The InitializeComponent problem is generated by the compiler itself. You have make a stub in Window1.xaml.vb file like this:
Sub InitializeComponent()
End Sub
Would it be possible to post a listing of all the XAML or a project zip file?
It is hard sometimes to figure out where to add some of the code, especially on Part 3 where the resources are added. Especially the Clipboard_CanExecute part.
Really cool article, I tried to do this with the WPF ribbon bar, but it’s not working right for some reason. Does anyone know how to do this? I’ve looked on every website i could possibly think of and still haven’t found what I’m looking for. Basically this is what i want to do/accomplish:
1. I have a pretty big project(around 70k lines ) that I’m trying to add a universal ribbon bar to the top of, each app being able to click through the tabs to get to the common functionality that will be available to that app
2. I have already created the ribbon(thanks to the walkthroughs of uxpassion.com ) that has a nice look and feel for what i want, but it is a WPF application(per the walkthrough) with XAML and a .cs file for all the method calls and functionality the XAML and ribbon require to work
3. I would like to know(if it’s possible because i haven’t found it anywhere on the web ) if i can use what i have now for my ribbon bar(code and all) and somehow place it at the top of all my different projects’ pages so as to have the 2007 Office look no matter what you’re looking at
I know this may be a noobie question that i just have overlooked or missed somewhere, but I would really appreciate anything that could help me acheive this(kind of on a deadline) so that my project will look professional
Thanks in advance!
Hi Trey,
Please read this article http://www.uxpassion.com/2009/08/wpf-ribbon-control-roadmap-and-look-into-the-future/ and see if this is still relevant for you – in case it is, send your message again so I can try to help you out with this!
Thanks,
Vibor
hello
I want to insert a Ribbon bar in my MFC SDI application that i’m creating using the new Ribbon Designer in VS2010 but I don’t know how to associate a member variable to a control in the ribbon bar !
In VS2008 it was clear because all was done manually, but know i don’t know how to proceed
pleaz can you help me ?
what does it mean by:
Where does this color show??
i tried to change it with some other value but no change appears.. can you help me out??
It might be a silly question ..but please don’t mind!
When i add label only the followig error occurs..Why is this..??
The property ‘label’ does not exist in XML namespace ‘clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary’. Line 12 Position 16. (MC3072) – D:\NethangiWork\Work\WPF\RibbonTutorial\RibbonTutorial\Window1.xaml:12,16