Create Ribbon-Like Toolbars with ASPxMenu

Update: Download the new Ribbon control as part of DevExpress v13.2 release.

November 2013 Update: With the v13.2 release, we’ve introduced a beautiful new Ribbon control. Click the image to learn more about DevExpress ASP.NET controls:

-------------

Our ASPxMenu Suite sports some very cool features for a Web Navigation tool. Of course there are the standard menu things like root/sub menus arranged in a variety of ways. This image collage from the ASPxMenu home page shows off our Menu's fine capabilities.

But what if you wanted to create a Toolbar and not just a menu? In fact, what if you wanted to create a cool Microsoft Office Ribbon-like toolbar? Now if you haven't yet seen the new Microsoft Office UI and its Ribbon toolbar then check out this Channel 9 video:

Julie Larson-Green - Diving into the new Office 12  

MS Office Ribbon Bar

The new Ribbon Toolbar is certainly very slick and probably a nice way to spice an application. In fact, we currently (and beautifully) support this Ribbon Bar with our own version for both WinForms(XtraBars) and VCL(ExpressBars 6). Although this doesn't help us ASP.NET guys much.

Luckily you can use our ASPxMenu Control and with some simple setup, turn it into a Ribbon-like toolbar. Now this is not a complete look and feel of the Ribbon control, however, it is a simple one with our control.

In this six minute screencast, I'll show you how to basically bind the ASPxMenu control to a simple XML datasource:

ASPxMenu: How to Create a Toolbar Emulation (6 min 3 sec)

MenuItems.xml

<?xml version="1.0" encoding="windows-1251"?>
<MenuItems>
<RootItem Text="Reply" ImageUrl="~/Images/reply.png" NavigateUrl="j_avascript:void(1);">
<SubItem Text="Reply Sender" ImageUrl="~/Images/reply-sender.png" NavigateUrl="j_avascript:void(2);"/>
<SubItem Text="Reply Group" ImageUrl="~/Images/reply-group.png" NavigateUrl="j_avascript:void(3);"/>
</RootItem>
<RootItem Text="Previous" ImageUrl="~/Images/prev.png" BeginGroup="True" NavigateUrl="j_avascript:void(4);"/>
<RootItem Text="Next" ImageUrl="~/Images/next.png" NavigateUrl="j_avascript:void(5);"/>
<RootItem Text="Help" ImageUrl="~/Images/help.png" BeginGroup="True" NavigateUrl="j_avascript:void(6);"/>
</MenuItems>

*NavigateUrl items changed for this post, underscore not necessary after j.

After binding to the XmlDataSource and setting up some of the properties of the ASPxMenu we get a decent looking toolbar.

In the screencast, I go a little further by using the templates of the ASPxMenu to really give the menu that Ribbon-like appearance. For the submenus, you need to create a webcontrol that will actually hold another ASPxMenu control. This new webcontrol will then be added to the main ASPxMenu control via code. The final result is a very stunning Ribbon-like toolbar for your ASP.NET 2 websites:

You can download the source for this project here: ASPxMenu_Tutorial1.zip

You can see this toolbars feature also in our online demos.

Free DevExpress Products - Get Your Copy Today