GeonBit.UI – Custom Controls

The GeonBit.UI library for Monogame is quite simply, outstanding. This UI library has proven time and time again that it is simple and intuitive to work with and also powerful enough for pretty much everything I’ve thrown at it. That includes the development of custom controls and UI elements.

For this simple post I’m going to illustrate the simplicty and flexibility of the GeonBit.UI system with respect to creating a completely new UI control/entity.

Within Eden, I wanted to created a Credits screen, to give credit to the people and projects who have helped me make Eden a reality. With respect, I wanted to help promote those people and projects and the easiest way is to provide the player a link which they could click and be sent using their default browser to their associated website. The GeonBit.UI library does not contain such an entity or control out of the box, but fear not, it’s dead simple to implement and the code is provided below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using GeonBit.UI;
using GeonBit.UI.Entities;

namespace Eden.UI.Controls
{
    public class LabelLink : Label
    {
        private string m_sUrl = string.Empty;
        private Color m_oColorDefault = Color.CornflowerBlue;
        private Color m_oColorHover = Color.MonoGameOrange;

        public LabelLink(string text, string sUrl, Anchor anchor = Anchor.Auto, Vector2? size = default(Vector2?), Vector2? offset = default(Vector2?)) : base(text, anchor, size, offset)
        {
            m_sUrl = sUrl;
            this.FillColor = m_oColorDefault;

            this.OnClick = (Entity oLabel) =>
            {
                System.Diagnostics.Process.Start(m_sUrl);
            };

            this.OnMouseEnter = (Entity oLabel) =>
            {
                this.FillColor = m_oColorHover;
            };

            this.OnMouseLeave = (Entity oLabel) =>
            {
                this.FillColor = m_oColorDefault;
            };
        }

        #region Private Methods
        #endregion

        #region Public Methods
        #endregion
    }
}

Below is an example of what you might do with it. Creating additional controls follows the same idea and you can make as simple or as complex as a control as you need. The point is, GeonBit.UI allows for an incredible amount of extension and customization and proves not only is it a solid system but it is also a very well designed system overall.

Eden_2018-01-04_20-50-31

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s