MonoGame – User Interface

For MonoGame or XNA games an user interface is most essential. Based on the lacking and obsolete libraries like NeonForceControls, Squid, etc.. I made the effort to create my own one.

Functionality

The user interface is listening on
- Keyboard inputs
- Mouse inputs
- Touchscreen inputs
Compatible with MonoGame and XNA 4.0
Optimized for desktop and mobile applications
Running in 1 Thread
Working with events for
- Mouse/Finger Hover
- Mouse/Finger Click
- Mouse/Finger Move
- GotFocus
- LostFocus
Controls can be Focusable and/or Movable

Helper

The UserInterfaceManager instance is able to Add and Remove controls. You won’t have to worry about dependencies. The order can be changed within each control by the UserInterfaceManager by calling BringToFront or BringToBack.

Textures

The Textures are all self-made and included in the library. Replace the textures in the Content folder to apply them.

Controls

Control	Screenshot	Features
Control		OnClick GotFocus LostFocus Mouse/Touch Hover Mouse/Touch Left IsVisible IsEnabled Color Parent SubControls
Button		Label
CheckBox		Label IsChecked StateChanged
TextBox		Label Blink_Pause Blink_Active TextChanged Single Line Multi Line Max input length Password char
ComboBox		Label Orientation
TabNavigation
ScrollView		Padding Background Color Autoscroll to end
Window Frames		Titelbar Label Show Close-Button
CloseButton		Button
Label		Text MaxCharacters FontSize DisplayMode MultiLine ScrollToEnd Default
ImageBox		Displays a texture

Code behind

Append following lines of code in your Game1.cs

        protected override void Initialize()
        {
            Components.Add(new UserInterfaceManager(this));
            Components.Add(new InputManager(this));
            base.Initialize();
        }

protected override void Initialize()

{

Components.Add(new UserInterfaceManager(this));

Components.Add(new InputManager(this));

base.Initialize();

}

And you are ready to go!

Example

Window

            loginWindw = UserInterfaceFactory.CreateWindow(new Rectangle(0, 0, 400, 400));
            loginWindw.Title = "Jiyuu Logincenter";

1 2	loginWindw = UserInterfaceFactory.CreateWindow(new Rectangle(0, 0, 400, 400)); loginWindw.Title = "Jiyuu Logincenter";

Buttons

            bLogin = UserInterfaceFactory.CreateButton(new Rectangle(5, 60, 95, 25));
            bRegister = UserInterfaceFactory.CreateButton(new Rectangle(bLogin.Rectangle.Right + 5, 60, 95, 25));

1 2	bLogin = UserInterfaceFactory.CreateButton(new Rectangle(5, 60, 95, 25)); bRegister = UserInterfaceFactory.CreateButton(new Rectangle(bLogin.Rectangle.Right + 5, 60, 95, 25));

TextBoxes

            TextBox tUsername = UserInterfaceFactory.CreateTextBox(new Rectangle(5, 20, 200, 15));
            TextBox tPassword = UserInterfaceFactory.CreateTextBox(new Rectangle(5, 40, 200, 15));

1 2	TextBox tUsername = UserInterfaceFactory.CreateTextBox(new Rectangle(5, 20, 200, 15)); TextBox tPassword = UserInterfaceFactory.CreateTextBox(new Rectangle(5, 40, 200, 15));

Add the dependencies

            loginWindw.Add(tUsername);
            loginWindw.Add(tPassword);
            loginWindw.Add(bLogin);
            loginWindw.Add(bRegister);
            UserInterfaceManager.Singleton.Add(loginWindw);

loginWindw.Add(tUsername);

loginWindw.Add(tPassword);

loginWindw.Add(bLogin);

loginWindw.Add(bRegister);

UserInterfaceManager.Singleton.Add(loginWindw);

Result

Downloads

SourceCode (.zip 153KB)

4 Comments

Omegnight

24. Februar 2017

Hello,

I just found your this UI library for Monogame and its simplicity is really, really great.

I have two questions though.

1- Is it possible to change the font?

2- Is this open-source?

Thanks.

Zum Antworten anmelden
- Thomas Christof
  
  24. Februar 2017
  
  1 – No
  2 – Not yet. I will upload the source code below this article. Have fun 🙂
  
  Zum Antworten anmelden
Thomas Christof

18. Februar 2017

Hello Rene!

1. var is a keywoard, so you don’t have to write out the whole class name. For example: LoginWindow loginWindow = new LoginWindow(); is the same as var loginWindow = new LoginWindow();

Since the type of the object is already known at compile time, var can be easily replaced by the actual class name. Its just some syntax sugar.

The var or concrete type of the class is missing. You are right! I guess I did it somewhere above with some other code I didn’t show in this example.

3. Add controls with: UserInterfaceManager.Add The Singeton isn’t required anymore.

Zum Antworten anmelden
Rene Sens

15. Februar 2017

This all seems very good but I have a few questions (hopefully, not too dumb):

1. ‘loginWindw’ in your example could be just a ‘var’? or it should belong to some special class? because…

2. …it seems like you have some TextBox class below? how it was implemented in your example?

3. There’s no ‘Add’ method for ‘Singleton’ in my case. Is this because I did something wrong during installation and initialization of MonoGame UI?

Zum Antworten anmelden