none
Round buttons for win 8 RRS feed

  • Question

  • Hello everyone I'm all new to this whole developing thing and am just wondering how do you make a round button for win 8 in blend or VS? (VB coding)
    • Edited by Inf4mousKid Thursday, February 21, 2013 4:18 AM
    Thursday, February 21, 2013 4:17 AM

Answers

All replies

  • Hi Inf4mousKid,

    Button is a basic control which is usually rendered by OS. Although we can set the Region property, it does not look very good.

    Here is the GetToundedRect() method returns a rounded rectangle graphics path in this article. You can use the path to create the region.

    http://www.codeproject.com/Articles/5649/Extended-Graphics-An-implementation-of-Rounded-Rec

    You might also consider to create a custom control to perform like a button.

    Additionally, WPF application may provide you more opportunities to cutomize the appearance by using control templates if you would like to have a try.

    Best regards,


    Chester Hong
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, February 25, 2013 2:49 AM
    Moderator
  • Hi Chester,

    Thank you for the info but the link you sent is for VS C#.

    I'm all new to programming and I was kinda hoping for a VB tutor.

    Tuesday, March 5, 2013 3:46 AM
  • Hi Inf4mousKid,

    Here is the converted VB.NET code. However it may not look very good because of the limitation of WinForms controls.

        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Button1.Region = New System.Drawing.Region(GetRoundedRect(New RectangleF(0, 0, Button1.ClientRectangle.Width, Button1.ClientRectangle.Height), 6.0F))
        End Sub
        Private Function GetRoundedRect(baseRect As RectangleF, radius As Single) As System.Drawing.Drawing2D.GraphicsPath
            ' if corner radius is less than or equal to zero, 
            ' return the original rectangle 
            If radius <= 0.0F Then
                Dim mPath As New System.Drawing.Drawing2D.GraphicsPath()
                mPath.AddRectangle(baseRect)
                mPath.CloseFigure()
                Return mPath
            End If
            ' if the corner radius is greater than or equal to 
            ' half the width, or height (whichever is shorter) 
            ' then return a capsule instead of a lozenge 
            If radius >= (Math.Min(baseRect.Width, baseRect.Height)) / 2.0 Then
                'return GetCapsule(baseRect);
                radius = CSng((Math.Min(baseRect.Width, baseRect.Height)) / 2.0)
            End If
            ' create the arc for the rectangle sides and declare 
            ' a graphics path object for the drawing 
            Dim diameter As Single = radius * 2.0F
            Dim sizeF As New SizeF(diameter, diameter)
            Dim arc As New RectangleF(baseRect.Location, sizeF)
            Dim path As System.Drawing.Drawing2D.GraphicsPath = New System.Drawing.Drawing2D.GraphicsPath()
            ' top left arc 
            path.AddArc(arc, 180, 90)
            ' top right arc 
            arc.X = baseRect.Right - diameter
            path.AddArc(arc, 270, 90)
            ' bottom right arc 
            arc.Y = baseRect.Bottom - diameter
            path.AddArc(arc, 0, 90)
            ' bottom left arc
            arc.X = baseRect.Left
            path.AddArc(arc, 90, 90)
            path.CloseFigure()
            Return path
        End Function

    Best regards,


    Chester Hong
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, March 12, 2013 6:00 AM
    Moderator