Layout management
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 layuot.
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 combinatino of these values using the | operator.
Basic Anchor example
The following example shows a very basic example, demonstrating the Anchor property.
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program demonstrates the Anchor property
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com
Imports System.Windows.Forms
Imports System.Drawing
Public Class WinVBApp
Inherits Form
Public Sub New
Me.Text = "Check menu item"
Me.Size = New Size(380, 220)
Me.InitUI
Me.CenterToScreen
End Sub
Private Sub InitUI
Me.Text = "Anchor"
Size = New Size(210, 210)
Dim btn1 As New Button
btn1.Text = "Button"
btn1.Parent = Me
btn1.Location = New Point(30, 30)
Dim btn2 As New Button
btn2.Text = "Button"
btn2.Parent = Me
btn2.Location = New Point(30, 80)
btn2.Anchor = AnchorStyles.Right
Me.CenterToScreen
End Sub
Public Shared Sub Main
Application.Run(New WinVBApp)
End Sub
End Class
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 explicitly set the AnchorStyles.Right.
btn2.Anchor = AnchorStyles.Right
We explicitly 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.
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.
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program demonstrates the Dock property
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com
Imports System.Windows.Forms
Imports System.Drawing
Public Class WinVBApp
Inherits Form
Public Sub New
Me.Text = "Editor"
Me.Size = New Size(220, 170)
Me.InitUI
Me.CenterToScreen
End Sub
Private Sub InitUI
Dim mainMenu As New MainMenu
Dim file As MenuItem = mainMenu.MenuItems.Add("&File")
file.MenuItems.Add(New MenuItem("E&xit", _
New EventHandler(AddressOf Me.OnExit), Shortcut.CtrlX))
Menu = mainMenu
Dim tb As New TextBox
tb.Parent = Me
tb.Dock = DockStyle.Fill
tb.Multiline = True
Dim sb As New StatusBar
sb.Parent = Me
sb.Text = "Ready"
End Sub
Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
Me.Close
End Sub
Public Shared Sub Main
Application.Run(New WinVBApp)
End Sub
End Class
We show a menubar and a statusbar. And the remaining area is taken by the TextBox control.
Dim tb As New TextBox tb.Parent = Me
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.
Anchored buttons
The next example shows two buttons placed in the bottom right corner of the form.
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program positions two buttons
' in the bottom right corner of
' the window
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com
Imports System.Windows.Forms
Imports System.Drawing
Public Class WinVBApp
Inherits Form
Private Const WIDTH = 250
Private Const HEIGHT = 150
Private Const BUTTONS_SPACE = 15
Private Const PANEL_SPACE = 8
Private Const CLOSE_SPACE = 10
Public Sub New
Me.Text = "Buttons"
Me.Size = New Size(WIDTH, HEIGHT)
Me.InitUI
Me.CenterToScreen
End Sub
Private Sub InitUI
Dim ok As New Button
Dim panelHeight As New Integer = ok.Height + PANEL_SPACE
Dim panel As New Panel
panel.Height = panelHeight
panel.Dock = DockStyle.Bottom
panel.Parent = Me
Dim x As Integer = ok.Width * 2 + BUTTONS_SPACE
Dim y As Integer = (panelHeight - ok.Height) / 2
ok.Text = "Ok"
ok.Parent = panel
ok.Location = New Point(WIDTH-x, y)
ok.Anchor = AnchorStyles.Right
Dim close As New Button
x = close.Width
close.Text = "Close"
close.Parent = panel
close.Location = New Point(WIDTH-x-CLOSE_SPACE, y)
close.Anchor = AnchorStyles.Right
End Sub
Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
Me.Close
End Sub
Public Shared Sub Main
Application.Run(New WinVBApp)
End Sub
End Class
The example displayes OK, Close buttons in the bottom right corner of the window, as it is common in dialog windows.
Private Const WIDTH = 250 Private Const HEIGHT = 150
The WIDTH and HEIGHT variables determine the width and height of the application window.
Private Const BUTTONS_SPACE = 15 Private Const PANEL_SPACE = 8 Private Const 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.
Dim panelHeight As New Integer = 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.
Dim panel As New Panel panel.Height = panelHeight panel.Dock = DockStyle.Bottom panel.Parent = Me
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 control. The location is computed. And the Anchor property is set to the right. The other button is created similarly.
Player skeleton
The last example of this part of the tutorial shows a more complex example. It is a skeleton of a music player.
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a skeleton of
' a music player.
'
' author jan bodnar
' last modified June 2009
' website www.zetcode.com
Imports System.Windows.Forms
Imports System.Drawing
Public Class WinVBApp
Inherits Form
Public Sub New
Me.Text = "Player"
Me.Size = New Size(350, 280)
Me.InitUI
Me.CenterToScreen
End Sub
Private Sub InitUI
Dim mainMenu As New MainMenu
Dim file As MenuItem = mainMenu.MenuItems.Add("&File")
Dim playm As MenuItem = mainMenu.MenuItems.Add("&Play")
Dim view As MenuItem = mainMenu.MenuItems.Add("&View")
Dim tools As MenuItem = mainMenu.MenuItems.Add("&Tools")
Dim favourites As MenuItem = mainMenu.MenuItems.Add("&Favourites")
Dim help As MenuItem = mainMenu.MenuItems.Add("&Help")
file.MenuItems.Add(New MenuItem("E&xit", _
New EventHandler(AddressOf Me.OnExit), Shortcut.CtrlX))
Menu = mainMenu
Dim panel As New Panel
panel.Parent = Me
panel.BackColor = Color.Black
panel.Dock = DockStyle.Fill
Dim buttonPanel As New Panel
buttonPanel.Parent = Me
buttonPanel.Height = 40
buttonPanel.Dock = DockStyle.Bottom
Dim pause As 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")
Dim play As 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")
Dim forward As 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")
Dim backward As 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")
Dim tb As = 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
Dim audio As 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
Dim sb As New StatusBar
sb.Parent = Me
sb.Text = "Ready"
Me.CenterToScreen
End Sub
Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
Me.Close
End Sub
Public Shared Sub Main
Application.Run(New WinVBApp)
End Sub
End Class
This is a more complex example showing both Dock and Anchor properties in action.
Dim mainMenu As New MainMenu
Dim file As MenuItem = mainMenu.MenuItems.Add("&File")
...
Menu = mainMenu
Here we create the menubar.
Dim panel As New Panel panel.Parent = Me 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.
Dim buttonPanel As New Panel buttonPanel.Parent = Me 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.
Dim pause As 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.
This part of the Mono Visual Basic Winforms tutorial was about the layout management of controls. We practised various possibilities that the Winforms library offers.