Create your own button shape

Question

I'm new here and I'm trying to find out a way to create my own custom shape in button.

Should I create a class for it? Or an xml file? I need to create a button which it will look like a table. I found this code but its difficult to create it.

Button dynamicButton = new Button();         
// Define the points in the polygonal path.
Point[] pts = {
    new Point( 20,  60),
    new Point(140,  60),
    new Point(140,  20),
    new Point(220, 100),
    new Point(140, 180),
    new Point(140, 140),
    new Point( 20, 140)
};

// Make the GraphicsPath.
GraphicsPath polygon_path = new GraphicsPath(FillMode.Winding);
polygon_path.AddPolygon(pts);

// Convert the GraphicsPath into a Region.
Region polygon_region = new Region(polygon_path);

// Constrain the button to the region.
dynamicButton.Region = polygon_region;

// Make the button big enough to hold the whole region.
dynamicButton.SetBounds(
    dynamicButton.Location.X,
    dynamicButton.Location.Y,
    pts[3].X + 5, pts[4].Y + 5);
 Controls.Add(dynamicButton);

The answer to this question heavily depends on the GUI toolkit (e.g. Windows Forms, WPF, Gtk#, ...) you are using, so please add an appropriate tag. — O. R. Mapper, Dec 22 '16 at 13:36
I dont know GUI toolkit. Is this an external software which can knife and draw an entirely button? IS there way to create it a button in VS Blend and import it to winform? — drs, Dec 22 '16 at 13:38
"I dont know GUI toolkit." - if you are adding visual elements such as buttons in a window, you are using a GUI toolkit. It is *essential* for you to find out which one you are using before doing anything with it. "Is this an external software" - no. "GUI toolkit" is a general term for any set of visual components that can be used to create a graphical user interface (i.e. a GUI). "create it a button in VS Blend and import it to winform" - VS Blend targets WPF, which is a different GUI toolkit from Windows Forms. They can interact, but frankly, there are other things you should learn first. — O. R. Mapper, Dec 22 '16 at 13:41
VS 2015 comes with (at least?) two GUI toolkits, Windows Forms and WPF. — O. R. Mapper, Dec 22 '16 at 13:49
Where can i find this Gui Toolkit??In my main winform toolbox? — drs, Dec 22 '16 at 13:50
When you create project you usually stick to its type: winforms, wpf, uwp... Which one you have? `Controls.Add` more likely means winforms. — Sinatr, Dec 22 '16 at 13:51
for wich reason like a table? do you also want to fill those tablecells with values? otherwise just use a table image as content for the button. — , Dec 22 '16 at 13:56
My guess you have started with winforms because it's easier, yet solving such problems is way easier in WPF (any `Control` has template which you can alter). Perhaps it's not yet too late for a change? If you insist, google for "custom button winforms", e.g [here](http://stackoverflow.com/q/9320854/1997232) is the answer with some links. As for you question it's currently unclear and provided code has nothing to do with it. Can you show us a sketch of such button or give better description of what you are trying to do? — Sinatr, Dec 22 '16 at 14:00
Rounded corners are just one example; a GraphicsPath can have any shape you create.. — TaW, Dec 22 '16 at 15:52

Ozesh · Answer 1 · 2016-12-22T14:19:33.690

If you are trying to create a button for a C# WinForm Application, Then here is a sample of an Oval shaped button using a Panel control. If you want to provide a custom shape, do it in the OnPain Event. Try using the following code, and you will figure out what to do.

using System;
using System.Drawing;
using System.Windows.Forms;
using System.ComponentModel;

public class AdonaiOvalButton : Panel
{
    bool isControlActive = false;

    #region Text
    private string text = "Button";
    [NotifyParentProperty(true)]
    [EditorBrowsable(EditorBrowsableState.Always)]
    [Browsable(true)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
    [Bindable(true)]
    [Description("Sets the Text"), Category("Adonai")]
    public override string Text
    {
        get { return text; }
        set
        {
            if (value != text)
            {
                if (value == string.Empty)
                { value = " "; }
                text = value;
                this.Invalidate();
            }
        }
    }
    #endregion Text

    #region ForeColor
    private Color foreColor = Color.White;
    [Description("Sets the Forecolor"), Category("Adonai")]
    public override Color ForeColor
    {
        get { return foreColor; }
        set
        {
            if (foreColor != value)
            {
                foreColor = value;
                this.Invalidate();
            }
        }
    }
    #endregion ForeColor

    #region Outline Color
    private Color outLineColor = Color.DarkGray;
    [Description("Sets the Buttons outline color"), Category("Adonai")]
    public Color OutLineColor
    {
        get { return outLineColor; }
        set
        {
            if (outLineColor != value)
            {
                outLineColor = value;
                this.Invalidate();
            }
        }
    }
    #endregion Outline Color

    #region Outline Width
    private float outlineWidth = 0.4f;
    [Description("Sets the Buttons outline width"), Category("Adonai")]
    public float OutlineWidth
    {
        get { return outlineWidth; }
        set
        {
            if (outlineWidth != value)
            {
                outlineWidth = value;
                this.Invalidate();
            }
        }
    }
    #endregion Outline Width

    #region Default Back Color
    //--Default Button Color--//
    private Color inactiveColor = ControlPaint.Dark(SystemColors.Grad

score 0 · Answer 2 · answered Dec 22 '16 at 14:17

I agree with @Sinatr that WPF would be easier. If you decide to go with WPF you could do something like this:

<Button>
    <Button.Template>
        <ControlTemplate>
            <Canvas Height="80" Width="100">
                <Rectangle Height="80" Width="100" Stroke="Blue" StrokeThickness="2"/>
                <Line X1="50" Y1="0" X2="50" Y2="80" Stroke="Blue" StrokeThickness="2"/>
                <Line X1="0" Y1="20" X2="100" Y2="20" Stroke="Blue" StrokeThickness="2"/>
                <Line X1="0" Y1="40" X2="100" Y2="40" Stroke="Blue" StrokeThickness="1"/>
                <Line X1="0" Y1="60" X2="100" Y2="60" Stroke="Blue" StrokeThickness="1"/>
            </Canvas>
        </ControlTemplate>
    </Button.Template>
</Button>

When you create a project you need to create a WPF application. That will create a mainwindow.xml file which you can add this to. The are lots of tutorials online about WPF and XAML, but you could try this one too start with http://www.wpf-tutorial.com/xaml/what-is-xaml/ — sclarke81, Dec 22 '16 at 19:11

Create your own button shape

2 Answers2