Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > c sharp > answers

flash menu for windows form??

Newbie
  
Join Date: Sep 2009
Posts: 15
#1: Sep 21 '09
Hi,
I am working on this standalone application on C#.NET in which i dont want to use the basic UI that comes with .NET framework,i would like to use either flash menu or some other impressive menu like mac style menu or something.I am unable to find any such thing as "Fancy UI for winforms", please guide me menu stylings.

Regards,
Ankit Khare
Expert
  
Join Date: Jun 2008
Location: Pretoria, South Africa
Posts: 410
#2: Sep 21 '09

re: flash menu for windows form??

Have a look at WPF (Windows Presentation Foundation)

MSDN
Official WPF site

WPF exposes several classes which allow you to create fancy UIs and separate UI from logic code.
Newbie
  
Join Date: Sep 2009
Posts: 15
#3: Sep 21 '09

re: flash menu for windows form??

Unfortunately i am not supposed to use WPF right now,need to use only windows forms! :( any such thing for modifying UI?like i found one krytpton toolkit for improvising the various controls .NET has..
Expert
  
Join Date: Jun 2008
Location: Pretoria, South Africa
Posts: 410
#4: Sep 21 '09

re: flash menu for windows form??

Well you can create custom form shapes and themes, but Winforms does not offer the flexibility of flash/wpf unless you go and create a whole bunch of custom controls...

I have never worked with any tool which is specifically aimed at altering the look and feel of a winform app, so unfortunately I cannot point you to to any tools, I suppose Google/Bing will be your best bet to find a third party product which suits your needs.
tlhintoq's Avatar
Moderator
  
Join Date: Mar 2008
Location: Arizona, USA
Posts: 1,745
#5: Sep 21 '09

re: flash menu for windows form??

Is this a homework project?
You could just make your fancy UI as images in photoshop, present them, and respond to click messages etc.
Newbie
  
Join Date: Sep 2009
Posts: 15
#6: Sep 22 '09

re: flash menu for windows form??

google bing...never heard of....will be learning about it today...Ya its a inhouse project..i can go for image editing but i wanted to give the carousel menu...something like this : http://www.shinedraw.com/animation-e...fish-eye-menu/
Expert
  
Join Date: Jun 2008
Location: Pretoria, South Africa
Posts: 410
#7: Sep 22 '09

re: flash menu for windows form??

Quote:

Originally Posted by ankitkhare View Post

google bing...never heard of....will be learning about it today...Ya its a inhouse project..i can go for image editing but i wanted to give the carousel menu...something like this : http://www.shinedraw.com/animation-e...fish-eye-menu/


Google
Bing

That carousel menu can easily be created in winforms. Just take a careful look at whats happening there. It works with the MouseOver event.
There is a little bit of math involved in calculating the distance from the center of the image which affects the size of the image. (The image is largest when the mouse is in the x-axis center of the image).
An array (or list) of picture boxes and a few simple calculations are all you need to create that effect.

Spend a couple of hours and try to build it, it shouldn't take too long. Feel free to post if you are stuck on a specific aspect of the algorithm.
Newbie
  
Join Date: Sep 2009
Posts: 15
#8: Sep 22 '09

re: flash menu for windows form??

ya even i thought that it should'nt be tough,so i started working towards it,but was unable to map the exact behaviour.I was trying with a n nomber of buttons aligned in the same line,and on mouse hover on a button i was trying..
Expand|Select|Wrap|Line Numbers
  1. button.mouseover(){
  2. for(;button[i].height<75,button[i].width<40;button.height++,button.width++)
  3. {
  4.     if(button[i-1].height<60 && button[i+1].height<60)
  5.     {
  6.       button[i-1].height++;
  7.       button[i-1].width++;
  8.  
  9.       button[i+1].height++;
  10.       button[i+1].width++;
  11.       delay(1);//some dealy i added so that it slowly expands
  12.  
  13.     }
  14. }
  15. }
  16.  
its just an idea what i was trying,not the exact code...but in carsouel manu,the image zooms in,not exactly when mouse comes exactly over the image,it zooms in when mouse moves near the image..also i wrote opposite for loop for mouse leave event,i am not very sure it will work or not,thats why i kept it on a hold for a while...
Newbie
  
Join Date: Sep 2009
Posts: 15
#9: Sep 22 '09

re: flash menu for windows form??

one more question,i wanted to start a separate thread for this,but as you seems to be online,i thought of asking here only...
What i want to do is that on click of any of these menu item,i want only one part of the same form to change,is itpossible?

for eg,in a single form suppose i have 3-4 panels,in the bottom most panel i have menu,in the left panel i have some tree structure or something and i want to change only the contents of the panel to change on menu click.Is it possible?throught xml ? any idea how?

Thanks,
Ankit
Expert
  
Join Date: Jun 2008
Location: Pretoria, South Africa
Posts: 410
#10: Sep 22 '09

re: flash menu for windows form??

Quote:

Originally Posted by ankitkhare View Post

one more question,i wanted to start a separate thread for this,but as you seems to be online,i thought of asking here only...
What i want to do is that on click of any of these menu item,i want only one part of the same form to change,is itpossible?

Let's first get your menu working and then look at accessing parts of a form (which is indeed possible).

What I would suggest is that you first write the code to get just one image to change its size based on the mouse location. Once that is working we can look at getting the adjacent images to grow and shrink.

I would suggest that you create methods which will peek at the adjacent elements in the array/list and if an image exists, apply the sizing algorithm to it.

Instead of using for loops like you did, i would write a function to calculate what the image size should be based on the mouse position relative to the x-axis origin of the image.

So calcualte X-origin:

Expand|Select|Wrap|Line Numbers
  1. float xOrigin = pictureBox.width / 2;
You can then work out what size the image should be based on the distance the mouse is from xOrigin so if the picture is 200px wide, and the mouse is 40px from the origin, the image should be 60% of its "full size":

let dX be the distance from the origin (remember that distance should be an absolute value in this case)

dx/xOrigin*100 = % away from origin. We know that when %fromOrigin == 0 then image size = 100%

So 100 - percentageFromOrigin = percentageImageSize. So if the origin is at 50px and the mouse is at 85px then dX is 35px (remember distance is absolute)
percentageFromOrigin = dX/xOrigin*100 = 35/50*100 = 70%
thus,
ImageSizePercentage = 100 - 70 = 30%

Or something like that :) this is just a rough algorithm for calculating the size of the image, there are other ways to reach the correct value. Feel free to implement another method if you are more comfortable with it than with this one.
Newbie
  
Join Date: Sep 2009
Posts: 15
#11: Sep 22 '09

re: flash menu for windows form??

huff....lemme try that out! !
Newbie
  
Join Date: Sep 2009
Posts: 15
#12: Sep 23 '09

re: flash menu for windows form??

Hey thanks cloud255,it actually worked!! Fine tuning is left otherwise i have almost achieved the behaviour! I took n picture boxes dynamically created,and on mouse move even i have calculated the distance of the position of the cursor and center point of each picture, respectively i am zooming in and zooming out....how can i share the exe with you?
Newbie
  
Join Date: Sep 2009
Posts: 15
#13: Sep 23 '09

re: flash menu for windows form??

here's the code..i have used few things to get the things working so please suggest modifications:
Expand|Select|Wrap|Line Numbers
  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Data;
  5. using System.Drawing;
  6.  
  7. using System.Text;
  8. using System.Windows.Forms;
  9.  
  10. namespace WindowsFormsApplication1
  11. {
  12.     public partial class Form1 : Form
  13.     {
  14.         Image temprory = null;
  15.         PictureBox[] picBox;
  16.         public Form1()
  17.         {
  18.             InitializeComponent();
  19.             temprory = pictureBox1.Image;
  20.  
  21.             Point upperLeftCorner = pictureBox1.Location;
  22.  
  23.             Point current = this.Cursor.HotSpot;
  24.             int initWidth = 100;
  25.             int initHeight = 170;
  26.             temprory = Image.FromFile("../../images/network.png");
  27.             picBox = new PictureBox[3];
  28.             //for creating 3 picture boxes array
  29.             for (int i = 0; i < 3; i++)
  30.             {
  31.                 picBox[i] = new PictureBox();
  32.                 picBox[i].Image = (Image)temprory.Clone();
  33.                 initWidth += 130;
  34.                 picBox[i].Location = new Point(initWidth, initHeight);
  35.                 picBox[i].Visible = true;
  36.                 picBox[i].Height = 128;
  37.                 picBox[i].Width = 128;
  38.                 this.Controls.Add(picBox[i]);
  39.                 picBox[i].MouseMove += new MouseEventHandler(picbox_mousemove);
  40.                 picBox[i].MouseHover += new EventHandler(picbox_MouseHover);
  41.                 picBox[i].Name ="P"+i;
  42.             }
  43.  
  44.         }
  45.  
  46.         // for tooltip on mouse hover on each of the picboxes
  47.         void picbox_MouseHover(object sender, EventArgs e)
  48.         {
  49.             PictureBox p = sender as PictureBox;
  50.             ToolTip tt = new ToolTip();
  51.             tt.SetToolTip(p, p.Name);
  52.         }
  53.  
  54.  
  55.  
  56.  
  57.  
  58.         // To calculate current cursor position when mouse is over any of the picture boxes and send it to the calculate function which calculates new size of the icon
  59.  
  60.       public void picbox_mousemove(object sender, MouseEventArgs e)//
  61.         {
  62.            PictureBox p = sender as PictureBox;
  63.            int xpoint = p.Location.X+e.X;
  64.  
  65.            calculate(xpoint);
  66.  
  67.        }
  68.  
  69.  
  70.  
  71.  
  72.         //On mouse move calculate new size of the icons w.r.t current position of the cursor 
  73.         //private void Form1_MouseMove(object sender, MouseEventArgs e)
  74.         private void calculate(int x)
  75.           {
  76.             //PictureBox p = sender as PictureBox;//
  77.             for (int j = 0; j < 3; j++)
  78.             {                
  79.                 Point upperLeftCorner = picBox[j].Location;//pixel position of top left corner of picture box
  80.                 float xOrigin = upperLeftCorner.X + (picBox[j].Width / 2);//to find the middle point along x axis for picture box
  81.                 //float dx = e.X - xOrigin;//to calculate distance b/w current position of cursor and mid point of picture box
  82.                 float dx = x - xOrigin;
  83.                 //if (p.Name != null) { MessageBox.Show(p.Name); }
  84.                 int distance;
  85.                 if (dx < 0)
  86.                 {
  87.                     distance = (int)(100 + dx);//distance of current cursor position from xorigin if cursor is to the left of the picture box
  88.                 }
  89.                 else
  90.                 {
  91.                     distance = (int)(100 - dx);//distance of current cursor position from xorigin if cursor is to the right of the picture box
  92.                 }
  93.                 if (distance > 0 && distance < 75)// to make sure that height and width does'nt increase if mouse is too far from picture box
  94.                 {
  95.  
  96.                     int nHeight = (int)(distance * pictureBox1.Image.Height) / 100;//% zoom calculation
  97.                     int nWidth = (int)(distance * pictureBox1.Image.Width) / 100;
  98.  
  99.                     if (48 + nHeight < 100)//defining max zoomed in size of image
  100.                     {
  101.  
  102.                         Image temp = new Bitmap(temprory, 48 + nHeight, 48 + nWidth);//using base image to perform the zoomin zoomout so as to avoid decrease in quality
  103.                         picBox[j].Image = temp;//giving picture box  resized image
  104.                     }
  105.  
  106.                 }
  107.             }
  108.         }
  109.     }
  110. }
  111.  
  112.  
dheerajjoshim's Avatar
Familiar Sight
  
Join Date: Jul 2009
Location: Bangalore, INDIA
Posts: 251
#14: Sep 23 '09

re: flash menu for windows form??

Pls use code tags... so its easy to experts to go through the code...

Regards
Dheeraj Joshi
Expert
  
Join Date: Jun 2008
Location: Pretoria, South Africa
Posts: 410
#15: Sep 23 '09

re: flash menu for windows form??

Quote:

Originally Posted by ankitkhare View Post

here's the code..i have used few things to get the things working so please suggest modifications:

Hi,

At present I'm rather sick, I attempted to read through the code posted but its all a bit of blur right now. I promise I'll have a good look at it as soon as I'm better. My apologies.
tlhintoq's Avatar
Moderator
  
Join Date: Mar 2008
Location: Arizona, USA
Posts: 1,745
#16: Sep 23 '09

re: flash menu for windows form??

TIP: When you are writing your question, there is a button on the tool bar that wraps the [code] tags around your copy/pasted code. It helps a bunch. Its the button with a '#' on it. More on tags. They're cool. Check'em out.
Newbie
  
Join Date: Sep 2009
Posts: 15
#17: Sep 24 '09

re: flash menu for windows form??

thanks for the tip sir,I will take care of it from the next time!
@cloud255, no problem at all...i will be waiting !
Expert
  
Join Date: Jun 2008
Location: Pretoria, South Africa
Posts: 410
#18: Sep 27 '09

re: flash menu for windows form??

Quote:

Originally Posted by ankitkhare View Post

here's the code..i have used few things to get the things working so please suggest modifications:

Expand|Select|Wrap|Line Numbers
  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Data;
  5. using System.Drawing;
  6.  
  7. using System.Text;
  8. using System.Windows.Forms;
  9.  
  10. namespace WindowsFormsApplication1
  11. {
  12.     public partial class Form1 : Form
  13.     {
  14.         Image temprory = null;
  15.         PictureBox[] picBox;
  16.         public Form1()
  17.         {
  18.             InitializeComponent();
  19.             temprory = pictureBox1.Image;
  20.  
  21.             Point upperLeftCorner = pictureBox1.Location;
  22.  
  23.             Point current = this.Cursor.HotSpot;
  24.             int initWidth = 100;
  25.             int initHeight = 170;
  26.             temprory = Image.FromFile("../../images/network.png");
  27.             picBox = new PictureBox[3];
  28.             //for creating 3 picture boxes array
  29.             for (int i = 0; i < 3; i++)
  30.             {
  31.                 picBox[i] = new PictureBox();
  32.                 picBox[i].Image = (Image)temprory.Clone();
  33.                 initWidth += 130;
  34.                 picBox[i].Location = new Point(initWidth, initHeight);
  35.                 picBox[i].Visible = true;
  36.                 picBox[i].Height = 128;
  37.                 picBox[i].Width = 128;
  38.                 this.Controls.Add(picBox[i]);
  39.                 picBox[i].MouseMove += new MouseEventHandler(picbox_mousemove);
  40.                 picBox[i].MouseHover += new EventHandler(picbox_MouseHover);
  41.                 picBox[i].Name ="P"+i;
  42.             }
  43.  
  44.         }
  45.  
  46.         // for tooltip on mouse hover on each of the picboxes
  47.         void picbox_MouseHover(object sender, EventArgs e)
  48.         {
  49.             PictureBox p = sender as PictureBox;
  50.             ToolTip tt = new ToolTip();
  51.             tt.SetToolTip(p, p.Name);
  52.         }
  53.  
  54.  
  55.  
  56.  
  57.  
  58.         // To calculate current cursor position when mouse is over any of the picture boxes and send it to the calculate function which calculates new size of the icon
  59.  
  60.       public void picbox_mousemove(object sender, MouseEventArgs e)//
  61.         {
  62.            PictureBox p = sender as PictureBox;
  63.            int xpoint = p.Location.X+e.X;
  64.  
  65.            calculate(xpoint);
  66.  
  67.        }
  68.  
  69.  
  70.  
  71.  
  72.         //On mouse move calculate new size of the icons w.r.t current position of the cursor 
  73.         //private void Form1_MouseMove(object sender, MouseEventArgs e)
  74.         private void calculate(int x)
  75.           {
  76.             //PictureBox p = sender as PictureBox;//
  77.             for (int j = 0; j < 3; j++)
  78.             {                
  79.                 Point upperLeftCorner = picBox[j].Location;//pixel position of top left corner of picture box
  80.                 float xOrigin = upperLeftCorner.X + (picBox[j].Width / 2);//to find the middle point along x axis for picture box
  81.                 //float dx = e.X - xOrigin;//to calculate distance b/w current position of cursor and mid point of picture box
  82.                 float dx = x - xOrigin;
  83.                 //if (p.Name != null) { MessageBox.Show(p.Name); }
  84.                 int distance;
  85.                 if (dx < 0)
  86.                 {
  87.                     distance = (int)(100 + dx);//distance of current cursor position from xorigin if cursor is to the left of the picture box
  88.                 }
  89.                 else
  90.                 {
  91.                     distance = (int)(100 - dx);//distance of current cursor position from xorigin if cursor is to the right of the picture box
  92.                 }
  93.                 if (distance > 0 && distance < 75)// to make sure that height and width does'nt increase if mouse is too far from picture box
  94.                 {
  95.  
  96.                     int nHeight = (int)(distance * pictureBox1.Image.Height) / 100;//% zoom calculation
  97.                     int nWidth = (int)(distance * pictureBox1.Image.Width) / 100;
  98.  
  99.                     if (48 + nHeight < 100)//defining max zoomed in size of image
  100.                     {
  101.  
  102.                         Image temp = new Bitmap(temprory, 48 + nHeight, 48 + nWidth);//using base image to perform the zoomin zoomout so as to avoid decrease in quality
  103.                         picBox[j].Image = temp;//giving picture box  resized image
  104.                     }
  105.  
  106.                 }
  107.             }
  108.         }
  109.     }
  110. }
  111.  
  112.  

Hi

This seems to be ok, the only suggestion I would make is that you replace all those hard coded values with constants, this will help make re-factoring and maintenance easier.
Newbie
  
Join Date: Sep 2009
Posts: 15
#19: Sep 30 '09

re: flash menu for windows form??

hey,
Whatver i have done can also be achieved by another way,please correct me if i am wrong...
OnMouseHover over any picbox will start zooming the image inside it..wid a for loop i can do that...eg
Expand|Select|Wrap|Line Numbers
  1. public void picbox_mousehover()
  2. {
  3.     for(int temp=picbox.image.height;picbox.image.height<100;temp++)
  4.     {
  5.         picbox.image=new Bitmap(picbox.image,temp,temp);
  6.         MessageBox.show(temp.tostring());
  7.     }
  8.  
  9. }
  10.  
It works,but the problem is that it first finishes execution of for loop then displays the image.Zooming effect is not visible...to cross check that i just inroduced message box inside the for and zooming effect is visible :(

I also tried thread.sleep() inside for loop,but that also didnt work the way i wanted it to work! Any idea?
tlhintoq's Avatar
Moderator
  
Join Date: Mar 2008
Location: Arizona, USA
Posts: 1,745
#20: Sep 30 '09

re: flash menu for windows form??

inside your loop you need to refresh the picbox

Expand|Select|Wrap|Line Numbers
  1. picbox.refresh();
  2. application.DoEvents();

Watch your memory as this happens tho...
Your new bitmap doesn't get disposed of inside that tight loop because garbage collection takes place when the app and OS feel its a good time to do so.

The old bitmap that you have no reference to is still taking up memory and you have no reference to it to call

Expand|Select|Wrap|Line Numbers
  1. oldbitmap.Dispose();
  2. GC.Collect();
So if you make 100 1000x1000 bitmaps you are going to eat memory quickly.

Thread.sleep is something to avoid on your main (only) thread in my opinion. It does exactly what it says. It totally sleeps the current thread. That includes refreshes, repaints, events, responding to events, communication and any and all thinking being done on this thread. It exists to completely halt a thread of everything for the specified time. If you have an LED graphic on its own thread its great for the pause between blinking. 'on,' sleep(1000), "off", sleep(1000).

It should not be thought of as
Expand|Select|Wrap|Line Numbers
  1. Thread.KillTimeBeforeGoingToNextStepButStillProcessInBackground(1000);
Familiar Sight
  
Join Date: Jul 2009
Location: Calgary, Alberta, Canada
Posts: 211
#21: Sep 30 '09

re: flash menu for windows form??

Quote:

Originally Posted by tlhintoq View Post

Thread.sleep is something to avoid on your main (only) thread in my opinion. It does exactly what it says. It totally sleeps the current thread. That includes refreshes, repaints, events, responding to events, communication and any and all thinking being done on this thread. It exists to completely halt a thread of everything for the specified time. If you have an LED graphic on its own thread its great for the pause between blinking. 'on,' sleep(1000), "off", sleep(1000).

It should not be thought of as

Expand|Select|Wrap|Line Numbers
  1. Thread.KillTimeBeforeGoingToNextStepButStillProcessInBackground(1000);

Good point, though this brings to mind a question. Would a better approach be...

Expand|Select|Wrap|Line Numbers
  1. int DELAY = 1000;
  2. ...
  3.  
  4. DateTime initial = DateTime.Now;
  5. while (1)
  6. {
  7.   Application.DoEvents();
  8.   DateTime current = DateTime.Now;
  9.   TimeSpan elapsed = current - initial;
  10.  
  11.   if (elapsed.TotalMilliseconds > DELAY) break;
  12. }
There are better ways to implement this of course, but hopefully that rough bit of code demonstrates what I'm getting at.
tlhintoq's Avatar
Moderator
  
Join Date: Mar 2008
Location: Arizona, USA
Posts: 1,745
#22: Sep 30 '09

re: flash menu for windows form??

Expand|Select|Wrap|Line Numbers
  1. namespace tlhintoq
  2. {
  3.    public class Common
  4.    {
  5.         public static void Wait(int WaitSeconds)
  6.         {
  7.             DateTime timeout = DateTime.Now.AddSeconds(WaitSeconds);
  8.             while (DateTime.Now < timeout) { Application.DoEvents(); }
  9.         }
  10.    }
  11. }
  12.  
You could of course do this in milliseconds... or days.


This way I can call it whenever I need to wait a bit.

Expand|Select|Wrap|Line Numbers
  1. private voide SomeMethod()
  2. {
  3.    // Do something
  4.    // Something else
  5.    tlhintoq.Common.Wait(2); // Waits 2 seconds
  6.    // Carry on
  7.    // These aren't the droid you're looking for
  8.    // You don't need to see his papers
  9.    // Move along
  10. }
  11.  
Reply

Tags
fancy ui, gui, menu

« previous question | next question »

Similar C# / C Sharp bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,272 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved