WinForms Bars - How to Populate a RibbonControl in Code
If you use Office 2007, or have checked out the latest betas of Windows 7 applications like Notepad and Paint, you will probably have noticed the newest menu interface from Microsoft known as the RibbonControl. As you may know XtraBars makes it trivial to add this same interface to your own applications, by simply dragging a RibbonControl from the toolbox. But what if you want to dynamically create a Ribbon from scratch programatically.
This video will show you how to populate a Ribbon dynamically from an XML file.
Our application will have a static ribbon group containing file commands, and a dynamic ribbon group that it will load from an XML file, that contains an item for each button with a name and image file attribute.
1. Lets start with a Winforms app.
2. Drop an imageList control onto the form, and add three images to represent “Open”, “Clear” and “Exit”. Set the transparency color to whatever we are using as the neutral color in our images. Then we can add three images to our image list, and these will be associated with buttons on our Ribbon Control that will Open a file, Clear an existing file, and exit the application.
3. Next we will drop an OpenFileDialog on our form and this will give us the ability to load XML files and set it’s filter to *.xml.
4. Now we are ready for a RibbonControl, so let’s go to Navigation and Layout and drag a RibbonControl from the Toolbox onto the form, and set it’s images property to point to the imageList object which we created before. You can also clean up the Ribbon by setting ShowPageHeadersMode to Hide and ShowToolbarCustomizeItem to False.
5. Now that we have an image list control we can start creating buttons for Open, Clear and Exit and associating them with the images we added.
6. So lets name the default group File.
7. We’re going to use the local menu (right clicking) to create 3 BarButtonItems. We’re going to create a button each for “Open”, “Clear” and “Exit” and give them meaningfull names and associate them with the 3 icons we added to the ImageList .
8. SIDEBAR: While I do that let’s look at the structure of objects inside a RibbonControl. A RibbonControl has a collection of RibbonPages, and each of those has a collection of RibbonGroups. The group you can see here is the File Group, and we will create a second Group from the XML file. These RibbonGroups contain a collection of references to BarItems, which include the barButtonItems that we are creating here. When it comes time to load an XML file what we are going to do is create a brand new dynamic group inside the RibbonPage, and a new barButttonItem for each element in the XML file and add an Image to the Image list for each image file name in the XML file, and add references to those elements in this brand new group we just created.
9. If you have a lot of changes to make you can also “Run Designer” either from the RibbonControls local menu, or the smart tag.
10. Next make up a simple XML file containing items with name and image attributes. We are going to use this XML file to create the dynamic RibbonGroup.
11. Now hook up the buttons, the easiest is the exit button which will just close the form.
12. Next is the Clear button, which we want to remove the dynamic content which we will create from the XML file. So the first thing we are going to do is remove every RibbonGroup in our RibbonPage after the first one - which is the static menu which we just created. And then we need to remove every image after the 3rd.
13. The final event is the most complex, this is the Open event, this will load in a Dynamic RibbonGroup from our XML file.
14. First thing we want to do is remove any existing dynamic content, so we’re going to call the clear method first.
15. Finally we need to load the XML file using the OpenFileDialog and using LINQ to XML create a BarButtonItem for each item in the file.
16. So the first thing we’re going to do is create a RibbonGroup inside our RibbonPage and inside that group add to it references to barButtonItems which we will create.
17. At the same time we’ll add images refferenced in the XML file to the ImageList and associate them with the barButtonItems that we created.
18. Finally we can run our application, and you can open an XML file which will dynamically create a new RibbonGroup.
19. You could extend this demo to hook up events to these buttons to open documents referenced in the XML file such as making a virtual sound board with .WAV files, or picture albums with images, or a document manifest.
I hope that you were able to see some things here that you can use in your own development. Thanks for watching, and of course thank you for chosing DevExpress!