Create Ribbon-Like Toolbars with DevExpress ASP.NET Menu Control

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s