VIDEO: Exploring the WPF Ribbon Control

In this video, we're going to take a look at the new XAM ribbon and XAM ribbon window features that have been added in Infragistics Ultimate 14.1 to help give your applications a Microsoft Office 2013 look and feel.

TRANSCRIPT:

Here we have an existing WPF application that uses a ribbon and a XAM ribbon window. As you can see, we have a home tab with a few buttons, as well as, the Office 2010 blue theme applied.

If we run the application, we'll notice that we have our XAM ribbon window, and we also have a Backstage, which mimics the Office 2010 backstage.

In order to give this application a new Office 2013 look and feel, the easiest way to do that is to simply set the theme property of the XAM ribbon to Office 2013. Immediately, you're going to see the designer reflect a clean, modern Office 2013 look and feel.

Now when we run the application, you’ll notice that the application now has the Office 2013 look and feel. It also has the new Office 2013 backstage. (You can see with the back arrows how you would now escape the backstage. ) But pay specific attention to the window chrome. The chrome also has the new Office 2013 window look- that clean, modern, thin border around the window chrome.

But that's not all we can do with this. Let's say that we want to change the accent color of our ribbon and window chrome. We can change the accent color application by setting the “application accent color” property to a value of our choice. For example, let's look at what red looks like. By setting that single property, we've now changed the color of the border of our chrome of the window, as well as the backstage and file/menu options.

Another feature that's been added in 14.1 is what's called a “tap item tool bar”. Due to time constraints, I'm going to go paste in some pre-existing code. As you can see, I've created a new tab item area tool bar object: a “stack panel”, which contains a toggle button that has a control template. Basically what we're doing is mimicking that login functionality that you’ll find in current Microsoft Office products.

So now when I run this application, we’ll see that we now have this tab item area tool bar available to our end users. Notice that when I show the backstage, it stays in view just like the current Office products behave.

You could put any control you want in this area. You're not limited to specific object types here. You’ll also notice that this tab item area tool bar has an overflow. So when you minimize or resize your window, you have an overflow icon that allows you to access those items that you have placed in your tab item area tool bar.

Now, all these features are great for the main window of your application, but what about all the other dialogs and windows that show throughout your application? Luckily, you can easily apply the same window chrome to all the other windows by simply removing the ribbon.

Let's remove all that work we just did - we'll remove the ribbon and now we're going to set the theme property on the ribbon content host of the XAM ribbon. We'll set it to Office 2013 and run the application.

Even though we're not using the ribbon, we can still use the XAM ribbon window without a ribbon in order to give the rest of the windows, dialogs and pop-ups within our application a similar Office 2013 look and feel. This keeps your application consistent, and looks great.

You can also modify the application accent color by setting the application accent color property. But in this case, we have to use an attached property. We're going to say “ribbon window content host dot application accent color” and we'll just choose red again. We'll run the application again, and as you can see, we now have our XAM ribbon with no ribbon, but we're still able to leverage our accent color to keep our application consistent with the main window of our application!