Click here to Skip to main content
Click here to Skip to main content

Wobbly Menu - An Inspiration from iPhone

, 17 Mar 2010
Rate this:
Please Sign up or sign in to vote.
iPhone like menu system and wobbly re-arrangement technique with a useful sample application

Introduction

When Windows 7 was announced, some years ago, I was expecting a total revamp of the menu system which Microsoft introduced with Windows 95. But to my disappointment, it hasn't changed anything drastically. But multi-touch enabled OS was my idea (I've seen people saying so many weird things as their idea in the Win 7 TV ads, so I wanted to call this as mine.) On the other hand, I was inspired by the iPhone’s UI which is really designed in a finger friendly manner and I though I should implement something like that for Windows too. As a result, this simple application came into reality.

Screen.jpg

What is it?

This is a control that creates buttons for each item added to the menu items collection and sets the buttons to semi transparent. When the mouse is hovered over, the button 'slowly' becomes fully visible and goes back to semi transparent when the mouse moves out.

It also let you re-arrange the buttons. When the title bar is double clicked, the buttons start wobbling and the user can drag-drop and re-arrange the order.

What is this Sample?

The sample what I have given here is a very simple one which allows the users to drag and drop any files from a Windows folder into the title bar and the application creates a shortcut for each file you dropped. It extracts the icons and file names to create the button and then when the button is clicked, it will launch the file in its registered application.

What Techniques Have I Used?

A number of simple techniques have been used here to achieve all these functionalities.

Dimmable Button Array

To my knowledge, none of the Windows Form controls other than Form object support the opacity property which allows setting transparency levels. Therefore, I have created an array of forms like buttons.

Private Sub MoveChildForms()
    Dim iY As Integer = Me.Bottom + m_DimmableMenu.Spacing
    Dim iX As Integer = Me.Left
    For Each oMenu As frmMenu In ChildMenus.Values
        'positioning the menu item form.
        oMenu.SetPosition(New Point(iX, iY))

        'setting the size of title bar
        Me.MaximumSize = New Size((iX - Me.Left) + m_DimmableMenu.ItemSize.Width, 20)
        Me.Size = Me.MaximumSize
        Me.MinimumSize = Me.MaximumSize

        'incrementing the y position first, and then x
        If iY < (Me.Top + m_DimmableMenu.Size.Height) Then
            iY = oMenu.Bottom + m_DimmableMenu.Spacing
        Else
            iY = Me.Bottom + m_DimmableMenu.Spacing
            iX = oMenu.Right + m_DimmableMenu.Spacing
        End If

        'animating?
        If oMenu.m_iAnimationId = 1 Then
            oMenu.StartAnimation()
        End If
    Next
    Dim r As Rectangle = Me.RectangleToScreen(Me.ClientRectangle)
    m_DimmableMenu.UpdateRect(r.X, r.Y, Me.Width, iY - Me.Top)
End Sub

Wobbly Buttons

When the title bar is double clicked, the buttons become wobbly. I've been wondering how to make this. But this is the simplest of all.

'Set location, with a random variant to the original position.
'm_InitPos is the Initial Original Position of the Button
'm_oRnd is an Random Number generator
Me.Location = New Point(m_InitPos.X + m_oRnd.Next(-2, 2), _
	m_InitPos.Y + m_oRnd.Next(-2, 2))

Curvy Buttons

I wanted to make the buttons look like the iPhone buttons with the curvy corners. A simple geometry helped me in achieving this.

''' <summary>
''' Creates a Graphics Path with a rounded corner
''' </summary>
''' <param name="r">Rectangle region</param>
''' <param name="d">The rounded corner diameter</param>
''' <returns></returns>
''' <remarks></remarks>
Public Shared Function GetRoundedRectanglePath(ByVal r As Rectangle, _
            ByVal d As Integer) As GraphicsPath
    Dim gp As New GraphicsPath()
    gp.AddArc(r.X, r.Y, d, d, 180, 90)
    gp.AddArc(r.X + r.Width - d, r.Y, d, d, 270, 90)
    gp.AddArc(r.X + r.Width - d, r.Y + r.Height - d, d, d, 0, 90)
    gp.AddArc(r.X, r.Y + r.Height - d, d, d, 90, 90)
    gp.AddLine(r.X, r.Y + r.Height - d, r.X, CInt(r.Y + d / 2))
    gp.CloseFigure()
    Return gp
End Function

Registered File Icon Extraction

In my sample application, I am creating button with icons. This is an interesting thing I found. I always wanted to know how the registered icon for file extension can be extracted without making horrendous Windows API calls. Finally, I found a simple functionality in the .NET Framework's Icon class itself.

Public Shared Function ExtractAssociatedIcon(ByVal filePath As String) _
	As System.Drawing.Icon
Member of: System.Drawing.Icon
Summary:
Returns an icon representation of an image contained in the specified file.

Parameters:
filePath: The path to the file that contains an image.

Return Values:
The System.Drawing.Icon representation of the image contained in the specified file.

Exceptions:
System.ArgumentException: filePath does not indicate a 
valid file.-or-filePath indicates a Universal Naming Convention (UNC) path. 

How You Can Use It?

I've developed this on my own interest and it is free to be used by anyone for their personal use. But I think it is reasonable to expect a cut for myself, if anyone is trying to use this for commercial purposes.

As I mentioned earlier, I've created this as a control so that it can be re-used for different purposes. The following 2 images show 2 simple applications.

horizontal.jpg

An example shows how to create buttons with default settings.

MultiColor.jpg

An example shows how to create colourful buttons.

What's Next?

  1. Download the code and compile the WobblyMenu.Control project
  2. Create a new project and add reference to WobblyMenu.Control assembly
  3. Create an instance to:
    WobblyMenu.Control.DimmableMenu
  4. [Optional] Set the maximum size of your work area
    [control].Size = New Size(width, height)
  5. [Optional] Set the button size:
    [control].ItemSize = New Size(width, height)
  6. Add menu items and assign them to
    WobblyMenu.Control.MenuItem
    Dim WobblyMenu.Control.MenuItem Instance = _
    	[control] .MenuItems.AddMenuItem(Text, Image)
  7. Add menu items and assign them to
    AddHandler [menuitem].OnClick, AddressOf ItemClickHandler
  8. [Optional] Handle OnClose event
    [control].OnClose, AddressOf CloseEventHandler
  9. Display the menu
    [control].Show()

I found this control very useful and I am using this in many different applications. I will be happy to hear your comments and suggestions for improvements. Please keep an eye on the history section and I might be updating or fixing bugs.

History

  • V 1.00 - 09/Mar/2010 11:39 - First submission
  • V 1.20 - 17/Mar/2010 10:19 - Added the following functionalities:
    • Specify Rearrangement Animation effect (Wobble / Wiggle / Both)
    • Ability to delete a menu item
    • Save the order after rearrangement
    • Tooltip

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Thulasee Shan
Software Developer (Senior) eHips Ltd
United Kingdom United Kingdom
Having more than 10 years experience in software development and currently working for eHips Ltd in Oxford, UK. Expert in C# and VB.NET. Also Expert in technologies such as GDI+, ADO.NET, XML, XSD etc. Started the career as a VB6.0 developer and moved on to .NET with its beta release. Experience includes real-time system development, distributed systems, Work flow systems, control system development and web 2.0 systems.

Comments and Discussions

 
GeneralMy vote of 1 Pinmembernehasharma12345618-Apr-10 5:30 
GeneralI was just looking for transparent control but it has more that that. Pinmemberkisukortechai17-Apr-10 9:48 
GeneralThis Pinmemberjankoaac14-Apr-10 11:18 
GeneralGreat idea... but PinmemberBill960318-Mar-10 4:19 
GeneralRe: Great idea... but PinmemberEddyBinjai13-Apr-10 5:59 
GeneralAlways on Top, and a bug PinmemberBasel Nimer17-Mar-10 4:50 
GeneralTooltip Pinmemberanga16-Mar-10 2:52 
GeneralRe: Tooltip PinmemberThulasee Shan16-Mar-10 4:40 
QuestionHow to save the settings after rearranging the icons? Pinmemberanga15-Mar-10 23:37 
Can you give me the code to save the settings after I move the icons?
AnswerRe: How to save the settings after rearranging the icons? PinmemberThulasee Shan16-Mar-10 4:47 
Generalsubmenu's and scroll Pinmemberanga15-Mar-10 22:23 
GeneralRe: submenu's and scroll PinmemberThulasee Shan16-Mar-10 4:46 
GeneralRe: submenu's and scroll Pinmemberanga16-Mar-10 21:37 
GeneralWobble AND Wiggle [modified] Pinmembermjmeans14-Mar-10 21:53 
GeneralRe: Wobble AND Wiggle AND Disco [modified] PinmemberJens Meyer15-Mar-10 2:18 
GeneralRe: Wobble AND Wiggle PinmemberThulasee Shan16-Mar-10 4:44 
GeneralVery nice and functional project PinmemberSSDiver211213-Mar-10 18:22 
GeneralRe: Very nice and functional project PinmemberThulasee Shan15-Mar-10 4:06 
GeneralRe: Very nice and functional project PinmemberSSDiver211215-Mar-10 6:46 
GeneralWay Cool Pinmemberdaylightdj12-Mar-10 1:32 
GeneralRe: Way Cool PinmemberThulasee Shan15-Mar-10 4:12 
QuestionCan you convert the VB solution to CSharp solution? PinmemberMeeking10-Mar-10 5:20 
AnswerRe: Can you convert the VB solution to CSharp solution? PinmemberThulasee Shan10-Mar-10 5:40 
GeneralRe: Can you convert the VB solution to CSharp solution? PinmemberMeeking10-Mar-10 5:42 
GeneralRe: Can you convert the VB solution to CSharp solution? Pinmembermadeinaustria10-Mar-10 23:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 17 Mar 2010
Article Copyright 2010 by Thulasee Shan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid