how to create irregular shape button?
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 10 of 10

Thread: how to create irregular shape button?

Hybrid View

  1. #1

    how to create irregular shape button?

    how to create irregular shape button from bitmap?

  2. #2
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,098

    Re: how to create irregular shape button?

    Just to give you a hint into the right direction :

    This would make a circle shaped button :
    Code:
    private void butCCircle_Paint(object sender, System.Windows.Forms.PaintEventArgs e) 
    { 
        
        //Declare A GraphicsPath Object, Which Is Used To Draw The Shape Of The Button 
        System.Drawing.Drawing2D.GraphicsPath CirclePath = new System.Drawing.Drawing2D.GraphicsPath(); 
        
        //Create A 60 x 60 Circle Path 
        CirclePath.AddEllipse(new Rectangle(0, 0, 60, 60)); 
        
        //Size Of The Button 
        butCCircle.Size = new System.Drawing.Size(60, 60); 
        
        if (blnCircleClicked) { 
            //If The Button Is Selected To Draw, Change The Color 
            butCCircle.BackColor = Color.DeepSkyBlue; 
        } 
        else { 
            //If The Button Is Not Selected To Draw With, Change Back To Original Color 
            butCCircle.BackColor = Color.Aquamarine; 
        } 
        
        //Create The Circular Shaped Button, Based On The Graphics Path 
        butCCircle.Region = new Region(CirclePath); 
        
        //Release All Resources Owned By The Graphics Path Object 
        CirclePath.Dispose(); 
        
    }
    This would make a square button :
    Code:
    private void butCSquare_Paint(object sender, System.Windows.Forms.PaintEventArgs e) 
    { 
        
        //Declare A GraphicsPath Object, Which Is Used To Draw The Shape Of The Button 
        System.Drawing.Drawing2D.GraphicsPath SquarePath = new System.Drawing.Drawing2D.GraphicsPath(); 
        
        //Create A 60 x 60 Square Path 
        SquarePath.AddRectangle(new Rectangle(0, 0, 60, 60)); 
        
        //Size Of The Button 
        butCSquare.Size = new System.Drawing.Size(60, 60); 
        
        if (blnSquareClicked) { 
            //If The Button Is Selected To Draw, Change The Color 
            butCSquare.BackColor = Color.DeepSkyBlue; 
        } 
        else { 
            //If The Button Is Not Selected To Draw With, Change Back To Original Color 
            butCSquare.BackColor = Color.Aquamarine; 
        } 
        
        //Create The Square Shaped Button, Based On The Graphics Path 
        butCSquare.Region = new Region(SquarePath); 
        
        //Release All Resources Owned By The Graphics Path Object 
        SquarePath.Dispose(); 
        
    }
    This would make a triangular button :
    Code:
    private void butCTriangle_Paint(object sender, System.Windows.Forms.PaintEventArgs e) 
    { 
        
        //Declare A GraphicsPath Object, Which Is Used To Draw The Shape Of The Button 
        System.Drawing.Drawing2D.GraphicsPath TrianglePath = new System.Drawing.Drawing2D.GraphicsPath(); 
        
        //Create A Triangle Path, With A Total Width And Height Of 60, The Lines From The Bottom Meet At 30 At The Top 
        Point[] pTPoints = {new Point(30, 0), new Point(60, 60), new Point(0, 60)}; 
        
        //Add The Point Array Object To The GraphicsPath Object. The Point Array Is Needed To Create The Three Interconnected Points 
        TrianglePath.AddLines(pTPoints); 
        
        //Size Of The Button 
        butCTriangle.Size = new System.Drawing.Size(60, 60); 
        
        if (blnTriangleClicked) { 
            //If The Button Is Selected To Draw, Change The Color 
            butCTriangle.BackColor = Color.DeepSkyBlue; 
        } 
        else { 
            //If The Button Is Not Selected To Draw With, Change Back To Original Color 
            butCTriangle.BackColor = Color.Aquamarine; 
        } 
        
        //Create The Triangular Shaped Button, Based On The Graphics Path 
        butCTriangle.Region = new Region(TrianglePath); 
        
        //Release All Resources Owned By The Graphics Path Object 
        TrianglePath.Dispose(); 
        
    }
    On the other hand, instead of making a button shaped from a bitmap, why not use the picture as the button instead

    I hope my comments were useful

  3. #3

    Re: how to create irregular shape button?

    Thank you

  4. #4
    Join Date
    Mar 2006
    Posts
    38

    Re: how to create irregular shape button?

    thanks
    but should i create custom control then the above code to it

  5. #5
    Join Date
    Jan 2006
    Location
    Chicago, IL
    Posts
    14,999

    Re: how to create irregular shape button?

    You should draw all the controls at the same time, in some INIT code, that you can also call to CLEAR the form

    This way would draw the button every time you invalidated the form
    David

    CodeGuru Article: Bound Controls are Evil-VB6
    2013 Samples: MS CODE Samples

    CodeGuru Reviewer
    2006 Dell CSP
    2006, 2007 & 2008 MVP Visual Basic
    If your question has been answered satisfactorily, and it has been helpful, then, please, Rate this Post!

  6. #6
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,098

    Re: how to create irregular shape button?

    Quote Originally Posted by Falcon Eyes View Post
    thanks
    but should i create custom control then the above code to it
    No. As you can see in my previous post ( Post #2 ), all you need is the particular button's Paint event, and do all the drawing code in there.

  7. #7
    Join Date
    Jan 2013
    Posts
    1

    Re: how to create irregular shape button?

    Quote Originally Posted by HanneSThEGreaT View Post
    No. As you can see in my previous post ( Post #2 ), all you need is the particular button's Paint event, and do all the drawing code in there.

    here is somethings you may need, an image shaped button:
    http://www.youtube.com/watch?v=K_JzL4kzCoE

  8. #8
    Join Date
    Feb 2013
    Location
    Canada
    Posts
    51

    Re: how to create irregular shape button?

    Quote Originally Posted by murathankocan View Post
    here is somethings you may need, an image shaped button:
    http://www.youtube.com/watch?v=K_JzL4kzCoE
    This is an old thread, but that's not a good way of doing it. What Hannes posted was GDI, and although all you really need is the OnPaint() event method, you may want others to give it a bit more 'animation'.

    Here's a button I created a while ago for an example to show someone else:
    Code:
    //-------------------------------
    // Design Author: AceInfinity
    // Name: BlueButton
    // Date: December 3, 2012
    //-------------------------------
     
    using System;
    using System.Drawing;
    using System.Drawing.Drawing2D;
    using System.Windows.Forms;
     
    namespace CustomControls
    {
    	class BlueButton : Button
    	{
    		MOUSESTATE MState;
    		Rectangle ButtonRect;
     
    		enum MOUSESTATE
    		{
    			Down, Up, Hover, Leave
    		}
     
    		#region Constructor
    		public BlueButton()
    		{
    			this.DoubleBuffered = true;
    			this.Size = new Size(80, 25);
     
    			//Set initial size for Graphics to use
    			ButtonRect = Rectangle.FromLTRB(0, 0,
    				this.ClientRectangle.Right - 1, this.ClientRectangle.Bottom - 1);
    			MState = MOUSESTATE.Leave;
    		}
    		#endregion
     
    		#region Overrides
    		protected override void OnPaint(PaintEventArgs pevent)
    		{
    			base.OnPaint(pevent);
     
    			//Setup
    			Graphics G = pevent.Graphics;
    			G.SmoothingMode = SmoothingMode.AntiAlias;
    			G.Clear(Color.FromArgb(255, 230, 230, 230));
     
    			//Choose brushes and pens
    			SolidBrush SB = new SolidBrush(Color.FromArgb(100, 0, 100, 200));
    			Pen P = new Pen(SB, 1f);
     
    			//Draw the border
    			G.DrawRectangle(P, Rectangle.FromLTRB(0, 0, ClientRectangle.Right - 1, ClientRectangle.Bottom - 1));
     
    			Color TopGradient;
    			Color BottomGradient;
     
    			TopGradient = BottomGradient = Color.Black;
     
    			switch (MState)
    			{
    				case MOUSESTATE.Down:
    					TopGradient = Color.FromArgb(100, 0, 180, 255);
    					BottomGradient = Color.FromArgb(100, 0, 180, 255);
    					break;
    				case MOUSESTATE.Hover:
    					TopGradient = Color.FromArgb(10, 0, 210, 255);
    					BottomGradient = Color.FromArgb(100, 0, 210, 255);
    					break;
    				case MOUSESTATE.Leave:
    					TopGradient = Color.FromArgb(10, 0, 180, 255);
    					BottomGradient = Color.FromArgb(100, 0, 180, 255);
    					break;
    			}
     
    			//Fill the rectangle with a linear gradient
    			using (LinearGradientBrush LGB = new LinearGradientBrush(ButtonRect,
    				TopGradient, BottomGradient, 90f))
    			{
    				G.FillRectangle(LGB, ButtonRect);
    			}
     
    			//Draw the text to the button
    			GDrawString(G, this.Text);
     
    			P.Dispose();
    			SB.Dispose();
    		}
     
    		protected override void OnMouseDown(MouseEventArgs mevent)
    		{
    			base.OnMouseDown(mevent);
    			MState = MOUSESTATE.Down;
    			this.Invalidate();
    		}
     
    		protected override void OnMouseUp(MouseEventArgs mevent)
    		{
    			base.OnMouseUp(mevent);
    			MState = MOUSESTATE.Hover;
    			this.Invalidate();
    		}
     
    		protected override void OnMouseEnter(EventArgs e)
    		{
    			base.OnMouseEnter(e);
    			MState = MOUSESTATE.Hover;
    			this.Invalidate();
    		}
     
    		protected override void OnMouseLeave(EventArgs e)
    		{
    			base.OnMouseLeave(e);
    			MState = MOUSESTATE.Leave;
    			this.Invalidate();
    		}
     
    		protected override void OnResize(EventArgs e)
    		{
    			base.OnResize(e);
    			//Set new size for Graphics to use
    			ButtonRect = Rectangle.FromLTRB(0, 0,
    				this.ClientRectangle.Right - 1, this.ClientRectangle.Bottom - 1);
    		   
    			//Force the control to be redrawn
    			this.Invalidate();
    		}
    		#endregion
     
    		#region Helper Methods
    		protected void GDrawString(Graphics G, string text)
    		{
    			if (text.Length > 0)
    			{
    				Size size = G.MeasureString(text, Font, Width).ToSize();
    				Point pos = new Point(this.Width / 2 - size.Width / 2, this.Height / 2 - size.Height / 2);
    				using (SolidBrush SB = new SolidBrush(Color.FromArgb(200, 0, 150, 220)))
    				{
    					G.DrawString(text, this.Font, SB, pos.X, pos.Y);
    				}
    			}
    		}
    		#endregion
    	}
    }


    Although it's a regular rectangle, you can do what you want... Here was a full theme I created:


  9. #9
    Join Date
    Nov 2014
    Posts
    1

    Re: how to create irregular shape button?

    This is probably more complicated than what I created http://youtu.be/989M3qYrlKo when I needed custom buttons for my Sticky Notes and Photo Manager applications.
    Name:  SNoteCButtons.png
Views: 12
Size:  41.2 KB

  10. #10
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,098

    Re: how to create irregular shape button?

    Thanks for posting, Irek. Just keep in mind that this thread is quite old. Reviving old threads usually messes up forum flow. Feel free to help in more current threads.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center