Loading the controls

In this tutorial we will see how to add the controls on your project.


On previous article(Building a GUI Editor in C#) we have successfully created our "controls.xml" file which holds all the controls properties designed with GUI Editor.

Now in this tutorial we will add these controls and then add these controls on your project.

Please open GUI Editor's solution.We will continue where we remained last time.

Create a new Class named Intro.cs:

1.gif

This class will look alike:

using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

namespace GUIEditor
{
    public class Intro : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        public Intro()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }
        protected override void Initialize()
        {
            base.Initialize();
        }
        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);
        }
        protected override void UnloadContent()
        {
        }
        protected override void Update(GameTime gameTime)
        {
            base.Update(gameTime);
        }
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);
            base.Draw(gameTime);
        }
    }
}

To call Intro.cs you need to change it from Program.cs:

using System;

namespace GUIEditor
{
    static class Program
    {
        [STAThread]
        static void Main(string[] args)
        {
            using (Intro game = new Intro())
            {
                game.Run();
            }
        }
    }
}

2.gif

We have changed Game1 as Intro and then run the project.Our Intro screen displayed.

Before beginning to code Game Screens,first of all we need to get controls' properties from XML Files...

Lets write some code in Initialize function how to load the controls we have used previously.

XmlDocument doc = new XmlDocument();
doc.Load("controls.xml");

We have set our XML file named controls.xml which we have saved during designing in GUI Editor.

XmlNodeList ControlList = doc.GetElementsByTagName("Control");

Here we have set our Header Element named Control. As you well know our controls.xml structure looks like:


<GUI>
 <Control>
 ...
 </Control>
</GUI>

So we have set our Control element first to access other elements of this xml file.

foreach (XmlNode node in ControlList)
{
    XmlElement ControlElement = (XmlElement)node;
    string cname = ControlElement.Attributes["Name"].InnerText;
    string ctype = ControlElement.GetElementsByTagName("Type")[0].InnerText;
    string callowdrop = ControlElement.GetElementsByTagName("AllowDrop")[0].InnerText;
    string cenabled = ControlElement.GetElementsByTagName("Enabled")[0].InnerText;
    string cforecolor = ControlElement.GetElementsByTagName("ForeColor")[0].InnerText;
    string clocationx = ControlElement.GetElementsByTagName("LocationX")[0].InnerText;
    string clocationy = ControlElement.GetElementsByTagName("LocationY")[0].InnerText;
    string csizew = ControlElement.GetElementsByTagName("SizeW")[0].InnerText;
    string csizeh = ControlElement.GetElementsByTagName("SizeH")[0].InnerText;
    string ctext = ControlElement.GetElementsByTagName("Text")[0].InnerText;
}

Here we have declared our string variables to get our controls' properties while querying. We have set an attribute because we have a structure like that:

<GUI>
  <Control Name="button1">
    <Type>GUIEditor.XButton</Type>
    <AllowDrop>False</AllowDrop>
    <Enabled>True</Enabled>
    <ForeColor>ControlText</ForeColor>
    <LocationX>19</LocationX>
    <LocationY>31</LocationY>
    <SizeW>75</SizeW>
    <SizeH>23</SizeH>
    <Text>button1</Text>
  </Control>
</GUI>

Name is an attribute so we have declared it as XML Attribute. 

switch (ctype)
{
   case "GUIEditor.XButton":
   XButton.moving = false;
   XButton btn = new XButton();
   btn.Name = cname;
   btn.AllowDrop = Convert.ToBoolean(callowdrop);
   btn.Enabled = Convert.ToBoolean(cenabled);
   btn.ForeColor = System.Drawing.Color.FromName(cforecolor);
   btn.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   btn.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   btn.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(btn);
   break;

   case "GUIEditor.XCheckBox":
   XCheckBox chk = new XCheckBox();
   chk.Name = cname;
   chk.AllowDrop = Convert.ToBoolean(callowdrop);
   chk.Enabled = Convert.ToBoolean(cenabled);
   chk.ForeColor = System.Drawing.Color.FromName(cforecolor);
   chk.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   chk.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   chk.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(chk);
   break;

   case "GUIEditor.XComboBox":
   XComboBox cbo = new XComboBox();
   cbo.Name = cname;
   cbo.AllowDrop = Convert.ToBoolean(callowdrop);
   cbo.Enabled = Convert.ToBoolean(cenabled);
   cbo.ForeColor = System.Drawing.Color.FromName(cforecolor);
   cbo.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   cbo.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   cbo.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(cbo);
   break;

   case "GUIEditor.XLabel":
   XLabel lbl = new XLabel();
   lbl.Name = cname;
   lbl.AllowDrop = Convert.ToBoolean(callowdrop);
   lbl.Enabled = Convert.ToBoolean(cenabled);
   lbl.ForeColor = System.Drawing.Color.FromName(cforecolor);
   lbl.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   lbl.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   lbl.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(lbl);
   break;

   case "GUIEditor.XListBox":
   XListBox lbx = new XListBox();
   lbx.Name = cname;
   lbx.AllowDrop = Convert.ToBoolean(callowdrop);
   lbx.Enabled = Convert.ToBoolean(cenabled);
   lbx.ForeColor = System.Drawing.Color.FromName(cforecolor);
   lbx.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   lbx.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   lbx.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(lbx);
   break;

   case "GUIEditor.XPictureBox":
   XPictureBox pic = new XPictureBox();
   pic.Name = cname;
   pic.AllowDrop = Convert.ToBoolean(callowdrop);
   pic.Enabled = Convert.ToBoolean(cenabled);
   pic.ForeColor = System.Drawing.Color.FromName(cforecolor);
   pic.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   pic.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   pic.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(pic);
   break;

   case "GUIEditor.XProgressBar":
   XProgressBar pro = new XProgressBar();
   pro.Name = cname;
   pro.AllowDrop = Convert.ToBoolean(callowdrop);
   pro.Enabled = Convert.ToBoolean(cenabled);
   pro.ForeColor = System.Drawing.Color.FromName(cforecolor);
   pro.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   pro.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   pro.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(pro);
   break;

   case "GUIEditor.XRadioButton":
   XRadioButton rad = new XRadioButton();
   rad.Name = cname;
   rad.AllowDrop = Convert.ToBoolean(callowdrop);
   rad.Enabled = Convert.ToBoolean(cenabled);
   rad.ForeColor = System.Drawing.Color.FromName(cforecolor);
   rad.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   rad.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   rad.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(rad);
   break;

   case "GUIEditor.XTextBox":
   XTextBox txt = new XTextBox();
   txt.Name = cname;
   txt.AllowDrop = Convert.ToBoolean(callowdrop);
   txt.Enabled = Convert.ToBoolean(cenabled);
   txt.ForeColor = System.Drawing.Color.FromName(cforecolor);
   txt.Location = new System.Drawing.Point(Int32.Parse(clocationx), Int32.Parse(clocationy));
   txt.Size = new System.Drawing.Size(Int32.Parse(csizew), Int32.Parse(csizeh));
   txt.Text = ctext;
   Control.FromHandle(Window.Handle).Controls.Add(txt);
   break;
}

Using these codes we are checking whether any control type has been added or not.

If found it automatically creates a new instance of the control and displays it on the Intro Screen.Then set the controls' properties getting the values while querying controls.xml file.

Well theres one more thing:

We have added a bool value named "moving" inside Intro.cs and Game.cs:
  • which prevents Dragging inside Intro Screen(Intro.cs)
  • helps you to drag&drop while designing at GUI Editor(Game1.cs)
with the help of bool values by using the eventhandler we have added and removed MOVE function.That helped us to make a real Design Time-Run Time! 

Now lets show it as an example!

Change Game1 into Intro inside Program.cs. We will create a new Control List. Run your project and make a design(anything you want).I did something like that:

3.gif

Star Wars Rocks! Any Objection? :) 

Now lets save this design.

Then change again Game1 into Intro inside Program.cs and run the project:

Take a Look at it now :)

4.gif

Thats it! You now have successfully added GUI Editor's controls inside your game project.And remember: No dragging.

I hope this article helped you create your own screens and show them on your game project.

Cheers!