9 Replies - 1494 Views - Last Post: 08 August 2013 - 10:11 AM Rate Topic: -----

#1 Zweifel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 05-August 13

Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 04:51 PM

I am writing a layered Tic Tac Toe game and am quite new to creating GUIs. When I say a layered Tic Tac Toe game, I mean in each square of tic tac toe there is a separate tic tac toe board. Now that that is out of the way. This program would ultimately create 91 buttons (just for the tic tac toe boards). I feel as if it is poorly written code to just brute force add each single button. Oh also I am using a Windows Forms Application. So I am in the Form1.Designer.cs I wrote the method below:
private void InitializeButtons()
        {
            squares = new System.Windows.Forms.Button[81];
            int index = 0;
            //TTT2 Big game, traverse each small board
            for (int i = 0; i < 9; i++)
            {
                    //TTT small game, traverse each row and column and set button to layout
                    for (int k = 0; k < 3; k++)
                    {
                        for (int l = 0; l < 3; l++)
                        {
                            squares[index] = new System.Windows.Forms.Button();
                            index++;
                            squares[index].Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
                                 | System.Windows.Forms.AnchorStyles.Left)
                                 | System.Windows.Forms.AnchorStyles.Right)));
                            squares[index].Text = " " + index + " ";
                            squares[index].UseVisualStyleBackColor = true;
                            switch (i)
                            {
                                case '0':
                                    this.TopLeft.Controls.Add(squares[index], k, l);
                                    break;
                                case '1':
                                    this.TopMiddle.Controls.Add(squares[index], k, l);
                                    break;
                                case '2':
                                    this.TopRight.Controls.Add(squares[index], k, l);
                                    break;
                                case '3':
                                    this.Left.Controls.Add(squares[index], k, l);
                                    break;
                                case '4':
                                    this.Middle.Controls.Add(squares[index], k, l);
                                    break;
                                case '5':
                                    this.Right.Controls.Add(squares[index], k, l);
                                    break;
                                case '6':
                                    this.BottomLeft.Controls.Add(squares[index], k, l);
                                    break;
                                case '7':
                                    this.BottomMiddle.Controls.Add(squares[index], k, l);
                                    break;
                                case '8':
                                    this.BottomRight.Controls.Add(squares[index], k, l);
                                    break;
                            }       
                        }
                    }
            }
        }



So I am creating an array of buttons, then changing the properties of each button to dock it to the TableLayoutPanel associated with with tictactoe layout as well as the column row.

My question then, is this allowed in .NET? I've been getting an error not to change auto generated code when I first put it in the InitialzeComponents() method, then an error of a nullReferenceException on the squares[index].Anchor part.

Remember I am new to .NET, C#, and GUIs in general. I am transitioning from Java with a focus on data structures and efficiency.

Thank you to everyone in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Problem and Question about Structuring a GUI from just code

#2 Zweifel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 05-August 13

Re: Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 05:06 PM

I just read my question and found that I was unclear I feel. I know that the error is coming from me not checking for a null value in the array. By just adding a try catch block will fix this. But by doing this I do not receive any buttons that are displayed in the form. Thank you.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 05:18 PM

Why did you decide to use the Designer.cs file? And, I'm curious, why did you ignore the error message not to change this auto-generated code?

Anyway, unless you have a very specific, and good, reason to modify Designer.cs you should be using the Form Designer to build your application. If you want to build (populate) the form programmatically, rather than by dragging and dropping, double click the Form area to get to the code behind the form.

How to programmatically add controls to Windows forms at run time by using Visual C#

If you want to create the entire application in code then you could start from an Empty Project and create an instance of a Form:

Form form1 = new Form();

Form Constructor :MSDN

This post has been edited by andrewsw: 05 August 2013 - 05:48 PM

Was This Post Helpful? 1
  • +
  • -

#4 Zweifel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 05-August 13

Re: Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 05:54 PM

I was using the Designer.cs file since when I did drag and drop a button that is where the code went. I assumed that the file was used for the layout while the form.cs was used for the listener and such. Is it acceptable to be able to modify the layout/add buttons to form.cs? Would I be able to have access to the Designer.cs file variables to add the buttons to the desired layout?

What is your opinion on coding as such? Would you recommend just dragging and dropping all of those buttons?

Thank you for your help and link.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 06:12 PM

When you drag a button onto the Form area, Visual Studio creates code in Designer.cs which provides the basic framework for this Control (constructs it, adds properties, etc.). cf InitializeComponent.

Although we can open the Designer.cs file it is not advisable (although possible) to write any code in it. For example, if you are writing in this file and then add, and remove, a button, the code for it in Designer.cs will not usually be removed. Code you add in this file can also be modified by VS (or the compiler).

I understand that coming from Java you are used to writing code to build forms. In .NET the visual designer tools are extremely well developed and you can create your entire application by dragging and dropping and then double-clicking controls to get to the default event for this control.

My previous post outlines other, programmatic, approaches that you might take (other than modifying Designer.cs).

Here's a useful quote:

Quote

You should never modify Designer.cs. Period. Your changes will be overwritten without mercy.

Update: To be a bit more helpful, C# since v3 (VS 2008) has included partial methods, which many designers will now use to let you implement custom behavior.

This post has been edited by andrewsw: 05 August 2013 - 06:16 PM

Was This Post Helpful? 1
  • +
  • -

#6 Zweifel   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 05-August 13

Re: Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 06:25 PM

That helps a lot. Say that I leave the Designer.cs alone, each button would then have its own onclick method auto-generated in the form.cs. Would you suggest having all of these onclick methods refer to a single method that handles a turn, or is there a way to change so all of the buttons go to a single method onclick? Also correct me if I am wrong but the Object sender is the reference to which button was pressed?
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Problem and Question about Structuring a GUI from just code

Posted 05 August 2013 - 10:59 PM

A single event-handler could handle the events of a number of controls and, yes, sender references the object that triggered the event.
Was This Post Helpful? 0
  • +
  • -

#8 Michael26   User is offline

  • Futurama: Insert funny joke here
  • member icon

Reputation: 414
  • View blog
  • Posts: 1,664
  • Joined: 08-April 09

Re: Problem and Question about Structuring a GUI from just code

Posted 07 August 2013 - 12:11 PM

If you mess around a lot with the designer file you can corrupt the DESIGN window that is displaying controls in Visual Studio.
I learned that the hard way :(
Was This Post Helpful? 0
  • +
  • -

#9 Curtis Rutland   User is offline

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 5106
  • View blog
  • Posts: 9,283
  • Joined: 08-June 10

Re: Problem and Question about Structuring a GUI from just code

Posted 08 August 2013 - 07:47 AM

Also, any change you make in Design.cs can be overwritten any time you make any changes using the GUI builder. It's OK to build your GUI using code, but if you do, you shouldn't use VS to create a new Form, use it to create a new class and add the form code yourself. That way, you don't have to deal with the GUI builder at all.

Most C# programmers use the builder, since it's much more useful than any of the Java IDE's are.
Was This Post Helpful? 0
  • +
  • -

#10 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7507
  • View blog
  • Posts: 15,558
  • Joined: 16-October 07

Re: Problem and Question about Structuring a GUI from just code

Posted 08 August 2013 - 10:11 AM

The switch (i) { case '0': thing is not good...

Feel free to roll your own code and use designer as a guide. But, as noted, don't screw with designer. Instead, just put your custom stuff where you put the rest of your code.


This looked like fun. Since you didn't give us TopLeft, etc, I rolled my own.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1 {
	public partial class Form1 : Form {
		private Button [] squares;
		private TableLayoutPanel [] outerSquares;
		public Form1() {
			InitializeComponent();
			var main = GetThreeByTreeTableLayoutPanel();
			this.outerSquares = InitOuterSquares(main);
			this.squares = InitializeButtons();
			main.Dock = DockStyle.Fill;
			this.Controls.Add(main);
		}

		private TableLayoutPanel GetThreeByTreeTableLayoutPanel() {
			var ctl = new TableLayoutPanel();
			ctl.ColumnCount = 3;
			ctl.RowCount = 3;
			for (int i = 0; i < 3; i++) {
				ctl.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 33F));
				ctl.RowStyles.Add(new RowStyle(SizeType.Percent, 33F));
			}
			return ctl;
		}


		private TableLayoutPanel[] InitOuterSquares(TableLayoutPanel main) {
			var ctls = new TableLayoutPanel[9];
			int index = 0;
			for (int row = 0; row < 3; row++) {
				for (int col = 0; col < 3; col++) {
					var ctl = GetThreeByTreeTableLayoutPanel();
					main.Controls.Add(ctl, row, col);
					ctls[index++] = ctl;
				}
			}
			return ctls;
		}

		private void InitializeButtons(TableLayoutPanel blk, List<Button> buttons) {
			for (int row = 0; row < 3; row++) {
				for (int col = 0; col < 3; col++) {
					var button = new Button();
					button.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
						| System.Windows.Forms.AnchorStyles.Left)
						| System.Windows.Forms.AnchorStyles.Right)));
					button.Text = " " + (buttons.Count) + " ";
					button.UseVisualStyleBackColor = true;
					blk.Controls.Add(button, col, row);
					buttons.Add(button);
				}
			}
		}

		private Button [] InitializeButtons() {
			var buttons = new List<Button>();
			for (int i = 0; i < 9; i++) {
				InitializeButtons(this.outerSquares[i], buttons);
			}
			return buttons.ToArray();
		}
	}
}


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1