In this video, we walk through the steps you'll need to take to create a Windows Forms application with a Microsoft-Office-inspired ribbon. Check it out below:
[youtube] width="640" height="360" src="http://www.youtube.com/embed/nu15-C43Fgg" [/youtube]
TRANSCRIPT:
Before we get started, I’m just going to pull up Microsoft Word to point out some of the pieces of the ribbon and talk about the object hierarchy.
At the top here you have the quick access toolbar, which is used to hold tools and commands that are available to your end user regardless of whatever tab they’re on, and regardless of whatever context they’re in. Below that you have the ribbon itself, which is composed of tabs. Each tab has one or more groups, such as clipboard, font, paragraph, et cetera, and each group has one or more tools, such as paste, cut and copy.
Now, let’s go ahead and open up Visual Studio and start building this app. We’re going to start by creating a new Windows Forms project. I’m just going to go ahead and use the defaults, so I’ll hit okay. The first thing that we’re going to do is make the form a little bit bigger to hold our toolbar. To achieve that ribbon, the first thing that you should do is go to the toolbox and search for the UltraToolbarsManager and double click it.
Now that that’s added to the project, the first thing that happens is that you’re going to be prompted to add a panel. We’ll choose the middle option, which adds a lightweight panel control.
To start building the ribbon, let’s click show ribbon, and to create a new tab, click this button right here. Right away, you have your first tab. Again, in this video, we’re trying to build something very similar to Word, so let’s go ahead and just start building it out.
Here you have our first tab. I’m going to hit F4 to bring the properties up, then I’ll choose select object, and we’ll see that the caption is “ribbon one” – let’s change that to “home”. Under home, you’ll see one group called ribbon group one. Again, we’re just going to click this, hit F4, and change the caption. We’ll call this clipboard.
Next we’re going to add the tools “paste, cut and copy” to this clipboard group of the tab called home. We’re going to click insert new tool, and create three buttons. The first one will be called paste. The next one will be called cut. Finally we’ll do copy. Now that we have our tools established, which are going to be “button”, let’s go ahead and configure that.
For the paste button, we want that to be large, and we want cut and copy to be small. To do that, we right click on paste, choose preferred size, select large, and then we’re going to set its image by right clicking on it and clicking set large image. We can import an image for a large tool button, so we’re going to want to use an image that’s 32 by 32. Once we find that, we’ll use that as “paste” and it’s large, just like we wanted.
Now, let’s quickly do the same thing for cut and copy, but in this case we’re going to leave them at default size, a small image. We’ll do the same thing and import, look for “cut”, and again we’re going to use 24 by 24 because it’s going to be the smaller version. Now we have cut. Let’s just quickly do the same for copy. Set small image, import, and let’s find copy. And there we go! Now we have paste, cut and copy.
Let’s just hit F5 and run this to see what it looks like so far. Here we have our ribbon and we have paste, cut and copy. It looks perfect. Now all we have to do is figure out how to get to the click event to actually wire up our logic. There’s a very easy way to do this. I’m going to click on UltraToolbarsManager, hit F4 to bring up properties, and right over here, at the bottom, you’ll see generate tool click code. I’m going to click that. Here you can see I’ve got a list of all of my commands. I’m going to click select all, and you’ll see that there’s going to be some code generated for me.
I’ll select all, copy to clipboard, hit close, and now just simply do a quick double click on the ribbon, and you’ll see the click event, with the UltraToolbarsManager. We’ll go ahead and paste in the code, and do a quick test here. That looks good to me!
Basically, what’s passed in is this ToolClickEventArgs, and you’re just interrogating the key. Based on the key, you’re going to write some code to handle it. In this case we’re just handling paste. Let’s hit F5, and there we go. That’s all there is to it!
