How can I make a large grid of buttons (24x20 or similar) in vb.net using winforms?

Question

I'm making a seat booking system in vb.net (WinForms) and I need the user to be able to select the seat they wish to use and for it to change colour (so they can tell that it selected).

I began to try using buttons, but 480 buttons seriously slowed down the load time for the form. I then tried a data grid view with buttons in the rows/columns, but couldnt make that work properly.

My question is, how can I do this?

Would it be worth trying to use 480 picture boxes and change their background colour? Or would that just slow the form down the same way as 480 buttons?

Answer 1

For efficiency sake, you don't really want to just create a ton of controls like that. It would be better to make a single custom control that draws all the seats on it's own single drawing surface. Here's a very simple example:

Public Class SeatingPlan
    Public Class Seat
        Public Rectangle As Rectangle
        Public Selected As Boolean
        Public Id As String

        Public Sub New(ByVal seatId As String, ByVal x As Integer, ByVal y As Integer, ByVal width As Integer, ByVal height As Integer)
            Id = seatId
            Rectangle = New Rectangle(x, y, width, height)
        End Sub
    End Class


    Public ReadOnly Property Seats() As List(Of Seat)
        Get
            Return _seats
        End Get
    End Property
    Private _seats As List(Of Seat) = New List(Of Seat)()


    Public Event SelectedSeatsChanged()


    Private Sub SeatingPlan_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseClick
        For Each seat As Seat In _seats
            If seat.Rectangle.Contains(e.Location) Then
                seat.Selected = Not seat.Selected
                RaiseEvent SelectedSeatsChanged()
                Exit For
            End If
        Next
        Invalidate()
    End Sub


    Private Sub SeatingPlan_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        For Each seat As Seat In _seats
            Dim seatBackColor As Color = BackColor
            Dim textColor As Color = ForeColor
            If seat.Selected Then
                seatBackColor = Color.FromKnownColor(KnownColor.Highlight)
                textColor = Color.FromKnownColor(KnownColor.HighlightText)
            End If
            e.Graphics.FillRectangle(New SolidBrush(seatBackColor), seat.Rectangle)
            e.Graphics.DrawRectangle(New Pen(ForeColor), seat.Rectangle)
            Dim textSize As SizeF = e.Graphics.MeasureString(seat.Id, Me.Font, seat.Rectangle.Width)
            e.Graphics.DrawString(seat.Id, Font, New SolidBrush(textColor), seat.Rectangle.X + ((seat.Rectangle.Width - textSize.Width) / 2), seat.Rectangle.Y + ((seat.Rectangle.Height - textSize.Height) / 2))
        Next
    End Sub


    Public Function GetSelectedSeatIds() As List(Of String)
        Dim ids As List(Of String) = New List(Of String)()
        For Each seat As Seat In _seats
            If seat.Selected Then
                ids.Add(seat.Id)
            End If
        Next
        Return ids
    End Function


    Public Sub SetSelectedSeatIds(ids As List(Of String))
        For Each seat As Seat In _seats
            seat.Selected = ids.Contains(seat.Id)
        Next
        RaiseEvent SelectedSeatsChanged()
    End Sub
End Class

Then, in your form, put some code like this to create the locations of the seats:

Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    SeatingPlan1.Seats.Add(New SeatingPlan.Seat("1A", 3, 3, 20, 20))
    SeatingPlan1.Seats.Add(New SeatingPlan.Seat("2A", 26, 3, 20, 20))
    SeatingPlan1.Seats.Add(New SeatingPlan.Seat("1B", 3, 26, 20, 20))
    SeatingPlan1.Seats.Add(New SeatingPlan.Seat("2B", 26, 26, 20, 20))
End Sub


Private Sub SeatingPlan1_SelectedSeatsChanged() Handles SeatingPlan1.SelectedSeatsChanged
    For Each seatId As String In SeatingPlan1.GetSelectedSeatIds
        'Do something
    Next
End Sub

Answer 2

Try this:

 private void Form1_Load(object sender, EventArgs e)
        {
            int index;
            Button[] b=new Button[500];
            for(int i=0;i<24;i++)
            for(int j=0;j<20;j++)
            {
                index = (20 * i) + j;
                b[index]=new Button();
                b[index].Text=index.ToString();
                b[index].Location=new Point(j*80,i*30);
                panel1.Controls.Add(b[index]);
                b[index].Click += new EventHandler(ButtonLeft_Click);    
             }

            }

        private void ButtonLeft_Click(object sender, EventArgs e)
        {
            Button b = (Button)sender;
            if (b.BackColor == Color.Black)
                b.BackColor = Color.White;
            else
                b.BackColor = Color.Black;

              //DB Commands here    
        }