Question

The Mono Winforms tutorial continues with the layout management of controls. After we have placed controls on their parent containers, we have to ensure their proper layout.

Anchor

The Anchor property of a control determines how it is resized with its parent. Anchor is a term from the marine world. When an anchor is dropped into the water, the ship is fixed in certain place. Same applies for the Winforms controls.

Each control in Winforms can have one of these AnchorStyles values:

• Top
• Left
• Right
• Bottom

Notice that controls are not restricted to one value. They can take any combination of these values using the | operator.

Basic Anchor example

The following example shows a very basic example, demonstrating the Anchor property.

anchor.cs

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

class MForm : Form {


  public MForm() {
    Text = "Anchor";
    Size = new Size(210, 210);

    Button btn1 = new Button();
    btn1.Text = "Button";
    btn1.Parent = this;
    btn1.Location = new Point(30, 30);

    Button btn2 = new Button();
    btn2.Text = "Button";
    btn2.Parent = this;
    btn2.Location = new Point(30, 80);
    btn2.Anchor = AnchorStyles.Right;

    CenterToScreen();
  }
}


class MApplication {
  public static void Main() {
    MForm mf = new MForm();
    Application.Run(mf);
  }
}

This is a very basic code example that clearly shows what the Anchor property is all about. We have two buttons on the form. The first button has the default AnchorStyles values, which are AnchorStyles.Top | AnchorStyles.Left. The second button has explicitely set the AnchorStyles.Right.

btn2.Anchor = AnchorStyles.Right;

We explicitely set the Anchor property of the second button to AnchorStyles.Right value.

Now have a look at the following two images. The left one shows the application at the beginning. The right one shows the same application after resizement. The first button keeps its distance from the left and top borders of the form. The second button keeps its distance from the right border of the form. But it does not keep any distance in the vertical direction.

Figure: Before and after resizing

Dock

The Dock property allows us to stick a control to a certain edge of the parent form or control.

The following are possible DockStyle values.

• Top
• Left
• Right
• Bottom
• Fill
• None

Editor skeleton

The following code example shows the Dock property in action.

editor.cs

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

class MForm : Form {


  public MForm() {
    Text = "Editor";
    Size = new Size(210, 180);

    MainMenu mainMenu = new MainMenu();
    MenuItem file = mainMenu.MenuItems.Add("&File");
    file.MenuItems.Add(new MenuItem("E&xit",
         new EventHandler(this.OnExit), Shortcut.CtrlX));

    Menu = mainMenu;

    TextBox tb = new TextBox();
    tb.Parent = this;
    tb.Dock = DockStyle.Fill;
    tb.Multiline = true;

    StatusBar sb = new StatusBar();
    sb.Parent = this;
    sb.Text = "Ready";

    CenterToScreen();
  }

  void OnExit(object sender, EventArgs e) {
    Close();
  }
}


class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

We show a menubar and a statusbar. And the remaining area is taken by the TextBox control.

TextBox tb = new TextBox();
tb.Parent = this;

Here we create the TextBox control. Form container is set to be the parent for the text box.

tb.Dock = DockStyle.Fill;

This code line makes the TextBox control take up the remaining space inside the form container.

Figure: Editor skeleton

Anchored buttons

The next example shows two buttons placed in the bottom right corner of the form.

anchoredbuttons.cs

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

class MForm : Form {

  private int WIDTH = 250;
  private int HEIGHT = 150;
  private int BUTTONS_SPACE = 15;
  private int PANEL_SPACE = 8;
  private int CLOSE_SPACE = 10;

  public MForm() {
    Text = "Anchor";
    Size = new Size(WIDTH, HEIGHT);

    Button ok = new Button();

    int PANEL_HEIGHT = ok.Height + PANEL_SPACE;

    Panel panel = new Panel();
    panel.Height = PANEL_HEIGHT;
    panel.Dock = DockStyle.Bottom;
    panel.Parent = this;   

    int x = ok.Width * 2 + BUTTONS_SPACE;
    int y = (PANEL_HEIGHT - ok.Height) / 2;

    ok.Text = "Ok";
    ok.Parent = panel;
    ok.Location = new Point(WIDTH-x, y);
    ok.Anchor = AnchorStyles.Right;

    Button close = new Button();
  
    x = close.Width;

    close.Text = "Close";
    close.Parent = panel;
    close.Location = new Point(WIDTH-x-CLOSE_SPACE, y);
    close.Anchor = AnchorStyles.Right;

    CenterToScreen();
  }
}


class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

The example displayes OK, Close buttons in the bottom right corner of the window, as it is common in dialog windows.

private int WIDTH = 250;
private int HEIGHT = 150;

The WIDTH and HEIGHT variables etermine the width and height of the application window.

private int BUTTONS_SPACE = 15;
private int PANEL_SPACE = 8;
private int CLOSE_SPACE = 10;

The BUTTONS_SPACE is the space between the OK and the Close button. The PANEL_SPACE is the space between the panel and the bottom of the form. Finally, the CLOSE_SPACE variable sets the space between the Close button and the right border of the form.

int PANEL_HEIGHT = ok.Height + PANEL_SPACE;

Here we compute the height of the panel. The height of the panel is based on the height of the OK button. And we add some additional space, so that the buttons are not too close to the border.

Panel panel = new Panel();
panel.Height = PANEL_HEIGHT;
panel.Dock = DockStyle.Bottom;
panel.Parent = this

Here we create and manage the Panel control. In this example, it is used as a container for our buttons. It is glued to the bottom border of the form. And the buttons are placed within the panel.

ok.Text = "Ok";
ok.Parent = panel;
ok.Location = new Point(WIDTH-x, y);
ok.Anchor = AnchorStyles.Right;

The OK button's parent is set to the panel widget. The location is computed. And the Anchor property is set to the right. The other button is created similarly.

Figure: Anchored buttons

Player skeleton

The last example of this part of the Mono Winforms tutorial shows a more complex example. It is a skeleton of a music player.

player.cs

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

class MForm : Form {


  public MForm() {
    Text = "Player";
    Size = new Size(350, 280);

    MainMenu mainMenu = new MainMenu();
    MenuItem file = mainMenu.MenuItems.Add("&File");
    MenuItem playm = mainMenu.MenuItems.Add("&Play");
    MenuItem view = mainMenu.MenuItems.Add("&View");

    MenuItem tools = mainMenu.MenuItems.Add("&Tools");
    MenuItem favourites = mainMenu.MenuItems.Add("&Favourites");
    MenuItem help = mainMenu.MenuItems.Add("&Help");
    file.MenuItems.Add(new MenuItem("E&xit",
         new EventHandler(this.OnExit), Shortcut.CtrlX));

    Menu = mainMenu;

    Panel panel = new Panel();
    panel.Parent = this;
    panel.BackColor = Color.Black;
    panel.Dock = DockStyle.Fill;
    
    Panel buttonPanel = new Panel();
    buttonPanel.Parent = this;
    buttonPanel.Height = 40;
    buttonPanel.Dock = DockStyle.Bottom;

    Button pause = new Button();
    pause.FlatStyle = FlatStyle.Popup;
    pause.Parent = buttonPanel;
    pause.Location = new Point(5, 10);
    pause.Size = new Size(25, 25);
    pause.Image = new Bitmap("pause.png");

    Button play = new Button();
    play.FlatStyle = FlatStyle.Popup;
    play.Parent = buttonPanel;
    play.Location = new Point(35, 10);
    play.Size = new Size(25, 25);
    play.Image = new Bitmap("play.png");

    Button forward  = new Button();
    forward.FlatStyle = FlatStyle.Popup;
    forward.Parent = buttonPanel;
    forward.Location = new Point(80, 10);
    forward.Size = new Size(25, 25);
    forward.Image = new Bitmap("forward.png");

    Button backward  = new Button();
    backward.FlatStyle = FlatStyle.Popup;
    backward.Parent = buttonPanel;
    backward.Location = new Point(110, 10);
    backward.Size = new Size(25, 25);
    backward.Image = new Bitmap("backward.png");

    TrackBar tb = new TrackBar();
    tb.Parent = buttonPanel;
    tb.TickStyle = TickStyle.None;
    tb.Size = new Size(150, 25);
    tb.Location = new Point(200, 10);
    tb.Anchor = AnchorStyles.Right;

    Button audio = new Button();
    audio.FlatStyle = FlatStyle.Popup;
    audio.Parent = buttonPanel;
    audio.Size = new Size(25, 25);
    audio.Image = new Bitmap("audio.png");
    audio.Location = new Point(170, 10);
    audio.Anchor = AnchorStyles.Right;

    StatusBar sb = new StatusBar();
    sb.Parent = this;
    sb.Text = "Ready";

    CenterToScreen();
  }

  void OnExit(object sender, EventArgs e) {
    Close();
  }
}


class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

This is a more complex example showing both Dock and Anchor properties in action.

MainMenu mainMenu = new MainMenu();
MenuItem file = mainMenu.MenuItems.Add("&File");
...
Menu = mainMenu;

Here we create the menubar.

Panel panel = new Panel();
panel.Parent = this;
panel.BackColor = Color.Black;
panel.Dock = DockStyle.Fill;

This is the black panel, which takes all the remaining space, left by the menubar, statusbar and the control panel.

Panel buttonPanel = new Panel();
buttonPanel.Parent = this;
buttonPanel.Height = 40;
buttonPanel.Dock = DockStyle.Bottom;

This is the control panel. Its parent is the form container. It is glued to the bottom of the form. Its height is 40px. Inside this control panel, we place all the buttons and the trackar.

Button pause = new Button();
pause.FlatStyle = FlatStyle.Popup;
pause.Parent = buttonPanel;
pause.Location = new Point(5, 10);
pause.Size = new Size(25, 25);
pause.Image = new Bitmap("pause.png");

The pause button is one of the four buttons that has the default Anchor property value. The style of the button is set to flat, because it looks better. We put a bitmap on the button.

tb.Anchor = AnchorStyles.Right;
... 
audio.Anchor = AnchorStyles.Right;

The last two controls are anchored to the right.

Figure: Player skeleton

This part of the Mono Winforms tutorial was about the layout management of controls. We practised various possibilities that the Winforms library offers.