CODEWITHSUNDEEP
c#winformspaddingwindows-forms-designermargins
John Spriggs
John Spriggs

Reputation: 21

I don't understand how to use the Margin property in WinForms (Windows Forms) applications

Can anyone help me to understand the usefulness of the Margin property? Using the simple scenario below, I can't see how it's useful

SET UP

I created a simple app to test this:

  1. Created a new WinForms app from the template

  2. Opened Form1 in the designer

  3. Added a 'Panel' (called Panel1) onto Form1 from the toolbox, with:

    Dock = Fill; Size.Width = 800px; Size.Height = 450px`;

  4. Added two child 'Panels' onto Panel1

Panel2 has Dock = Left

Panel3 has Dock = Right

Both Panel2 and Panel3 have Size.Width = 400px, Size.Height = 450px (so Panel2 and Panel3 effectively split Panel1 into 2 down the middle)

WHY THE PADDING PROPERTY MAKES SENSE TO ME:

The usefulness of Padding is obvious in the designer - it enforces space between the border of the parent (Panel1) and its contents (Panel2 and Panel3)).

So if I set Panel1.Padding.All = 10, then the Size.Height of both Panel2 and Panel3 is forced to decrease (by 20px) to 430px. Their Size.Width stays the same (they just become overlapped).

Winforms then prevents the Size.Height of Panel2/Panel3 from being increased above 430px, as this would encroach into the padding space of Panel1.

This all makes sense to me

WHY THE MARGIN PROPERTY DOES NOT MAKE SENSE TO ME

Margin is the space around the border of an element - it keeps other elements from getting too close to the element you're setting the Margin on.

So I thought that if I set Margin.Right (on Panel2) to 10px, this would force the Size.Width of Panel3 to decrease (so that it wasn't encroaching on the margin of Panel2).

Instead, setting this right margin appears to have no visible impact on the form?

Upvotes: 2

Views: 1504

Answers (2)

IV.
IV.

Reputation: 9438

One way to think about it (generally) is that Margin is something that happens outside the control whereas Padding is something that happens inside. Also, the "total" effect can be the result of the parent's padding added to the margin of the child control.

screenshot

  • The MainForm has padding of 25 (shown in blue) and contains a FlowLayoutPanel set to Dock.Fill. To avoid confusion, the padding and margin of the flow layout panel is set to 0.
  • The 6 child controls of the flow layout panel set their own left-top margin to 10 and bottom margin to 40. At the top left and the bottom of each child the BackColor of LightSalmon shows through. There is a total of 50 from the bottom of one child to the top of the next one below. Each child control also sets its padding value to 15 which will apply on all four sides of the buttons it contains.
  • The padding and margin of Button are also set to 0. The the button is auto-sized and centered because it is anchored on all sides.
public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();

        // Main form Padding in light blue
        BackColor = Color.LightSkyBlue;
        Padding = new Padding(25);

        flowLayoutPanel.BackColor = Color.LightSalmon;
        // Set these to 0 and let the individual controls
        // manage the padding and margins.
        flowLayoutPanel.Margin = new Padding(all: 0);
        flowLayoutPanel.Padding = new Padding(all: 0);

        for (int i = 1; i <= 6; i++)
        {
            var panel = new TableLayoutPanel
            {
                Name = $"panel{i}",
                Size = new Size(200, 100),

                // Margin 'outside' the panel will show in Light Salmon.
                // This will space the panels inside the FlowLayoutPanel
                Margin = new Padding(left: 10, top: 10, right: 0, bottom: 40),

                // The button inside this panel will have Padding around it.
                Padding = new Padding(all: 15),

                BackColor = Color.LightGreen,
                BackgroundImage = new Bitmap(
                    Path.Combine(
                        AppDomain.CurrentDomain.BaseDirectory,
                        "Images",
                        "back-image.png"
                    )),
                BackgroundImageLayout = ImageLayout.Stretch,
            };
            // Add button to internal panel
            var button = new Button
            {
                Name = $"button{i}",
                Text = $"Button {(char)(64 + i)}",
                BackColor = Color.DarkSeaGreen,
                ForeColor = Color.WhiteSmoke,
                // By anchoring the button, it will autosize
                // respecting the Padding of its parent.
                Anchor = AnchorStyles.Left | AnchorStyles.Top | AnchorStyles.Right | AnchorStyles.Bottom,
                Margin = new Padding(all: 0),
                Padding = new Padding(all: 0),
            };
            panel.Controls.Add(button);

            flowLayoutPanel.Controls.Add(panel);
        }
    }
}

Upvotes: 0

Mark Benningfield
Mark Benningfield

Reputation: 2902

The Margin property is primarily used by the visual designer and reflected with "snaplines" when positioning controls on the design surface.

See this walkthrough from Microsoft.

Upvotes: 1

Related Questions