Create Ribbon-Like Toolbars with ASPxMenu

ASP.NET Team Blog
05 April 2007

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:

ASP.NET WebForms Ribbon Control

ASP.NET WebForms Ribbon Control Dropdown Menu

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

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.

7 comment(s)
Anonymous
The ASPx Blog

Check out these 4 new screencasts. Three show you how to customize the ASPxperience products and one

21 March, 2008
Anonymous
.Net World

Check out these 4 new screencasts. Three show you how to customize the ASPxperience products and one

29 March, 2008
Anonymous
Ferruh Koroglu

When real ribbonbar component ?

:)

Best Regards,

FK

10 July, 2009
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Ferruh,

I recommend creating a suggestion. If there is a lot of demand then we'll consider it for a future release.

10 July, 2009
TJ Havens
TJ Havens

Would like to see someone create a tutorial on making a MENU similiar to the one at MICROSOFT.COM, the one at the top with the templates.

Regards,

TJ Havens

20 August, 2009
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi TJ,

That is a nice menu and yes you can create the same look with the ASPxMenu using the templates:

demos.devexpress.com/.../Templates.aspx

I recommend checking out their styles and then add them to the ASPxMenu. Maybe if there is an enterprising designer/developer here, they may try it.

20 August, 2009
Simon Bonanno
Simon Bonanno
28 June, 2013

Please login or register to post comments.