How to create interactive menu with Infragistics Radial Menu and Windows Forms

Marina / Wednesday, December 11, 2013

In the 13.2 release of Windows Forms, Infragistics offers attractive controls  which can help the end user to create interactive menus. In my previous blog we saw how to use Win Live Tile View control to create a menu similar to the Windows 8 one. In this blog we are going to create a radial menu,which will help us reach easily our favorite destinations and folders.

navigation menu

Radial Menu

The Win Radial Menu is similar to the Microsoft’s OneNote MX 2013 radial menu with the ability to customize its appearance and functionality. Designed for touch-first experience in mind, but also supports mouse and keyboard navigation. The control consists of slices that can have hierarchal structure – by selecting one you can open the children tools. The hierarchy level is unlimited.  You can add the menu by using the Designer or by using the Code-Behind. For the purpose of our sample we are going to use the Designer.

As you have installed the Infragistics packages for Windows Forms, you will find in the toolbox the full list of the controls. The one we need is the UltraRadialMenu. Drag and drop it in the form. Now that we have our control, we should use the smart tag to open the Designer.

designer

Move the mouse over the radial menu to enable the “New Tool” wedge for adding a new tool.  Your tool can be one of the following types: Button, Color, Numeric, List, Font name list, Numeric gauge or Color well. You can sign a name to that tool or import a custom image. Lets take a look at some of the tool types. In the example picture below you can see that we have created a menu for editing text. For the Font size tool we use the numeric type, so when you select it you will be able to choose the size from a numeric gauge:

Font size editor

For the Font tool we use the color type. So the result is:

font editor

The control maintain a lot of properties for customizing the tools, the menu and the center tool. You can change the appearance of the Outer Ring, the Inner Ring as well as the center button and Drill Down buttons. In the menu tab of the Designer you can alter the back color of all of the tools and their drill down buttons at once. But if you want to  remodel a particular slice you can do that from the active tool tab. Check out the Style Considerations topic in the online documentation for a step-by-step guide on how to stylize the control.

By default there are eight slices in the menu, but by changing the widgets count property you can have as many tools as you need. You can also manipulate the behavior of the tools, by changing the active tool settings. For example you can disable a tool by setting the enable option to false. That way you will see the tool but you wont be able to select it. All of the widget settings and options can be easily manipulated thanks to the Designer.

Active tool tab

For more information about the control’s options see the online documentation or take a look at the samples.

Navigation menu

As I mentioned in this blog we are going to create a navigation menu for a faster access to our favorite folders and destinations.  You can of course customize it as you like. In the main menu we will have tools that can open default programs like weather, maps, music player and other and we will open links like Google. To handle such functionality we need to perform an action based on the tools’ unique key like that:

  1. if (e.Tool.Key == "News")
  2.     System.Diagnostics.Process.Start("bingnews:");
  3.  
  4. if (e.Tool.Key == "Chrome")
  5.     System.Diagnostics.Process.Start("http://goolge.com");
  6.  
  7. if (e.Tool.Key == "Music")
  8.     System.Diagnostics.Process.Start("microsoftmusic:");

In the children tool menu of the explorer we have an easy access to the folders we use most frequently. If you want to open special folder like “My Music”, “My Videos” and etc. add the following lines:

  1. if (e.Tool.Key == "MusicFolder")
  2. {
  3.     Environment.SpecialFolder specialFolder = Environment.SpecialFolder.MyMusic;
  4.     string path = Environment.GetFolderPath(specialFolder);
  5.     System.Diagnostics.Process.Start(path);
  6. }

 

Special Folders

That is how in few easy steps you can build contemporary, appealing  and convenient to use widget. You can take a look at the INGear application sample on YouTube and download it by clicking the image below:

IN Gear app

Conclusion

As you can see by using this control you can easily create an interactive and functional menu. With its stylized  and compact appearance it becomes a handy and useful widget that can be part of every desktop application. With its full touch support this new UI pattern can optimized the user experience on a touch devices.

 

Download the Radial Menu sample.

 

Download

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!