Steropes Example

Example interface:

Install

You can either install the package manually or using the package manager:

Manual

With the Package Manager Console (look in the tools tab, the Package Manager, Package Manager Console) you can type:

Install-Package steropes.ui -Version 2.1.0

Package Manager

Open the package manager (look in the tools tab, the Package Manager, Manage NuGet Packages for Solution or Project Tab, Manage NuGet Packages). Click Browse (it is normally on installed) and then search for steropes, find Steropes.UI and install it.

Setup

You will need to download THIS file, it contains the content folder. this should be placed within the projects content folder and also added to the pipeline before you can use it. Remember to build the pipeline before you run.

Add the following to the using section of your Game1.cs and any other files required:

using Steropes.UI;
using Steropes.UI.Components;
using Steropes.UI.Input;
using Steropes.UI.Styles;
using Steropes.UI.Util;
using Steropes.UI.Widgets;
using Steropes.UI.Widgets.Container;
using Steropes.UI.Widgets.TextWidgets;

Within the declaration section of your Game1.cs you need to declare the UIManager:

 IUIManager uiManager;

Example Screen

You will need to create a new UIManager and set the appropriate styles. Once created you can add elements to the Root.Content of the UIManager. This code could go into the Initialize method:

      uiManager = UIManagerComponent.CreateAndInit(this, new InputManager(this), "Content").Manager;

      var styleSystem = uiManager.UIStyle;
      var styles = styleSystem.LoadStyles("Content/UI/Metro/style.xml", "UI/Metro", GraphicsDevice);
      styleSystem.StyleResolver.StyleRules.AddRange(styles);

      uiManager.Root.Content = new Group(styleSystem)
      {
          new Label(styleSystem, "Hello World")
          {
              Anchor = AnchoredRect.CreateCentered()
          },
          new TextField(styleSystem)
          {
              Text = "  Hello World! "
          },
          new Button(styleSystem, "Test")
          {
               Anchor = AnchoredRect.CreateBottomAnchored(),
               Color = Color.Aquamarine,
               OnActionPerformed = (s, a) =>
               {
                   System.Console.WriteLine("Click");
               }
          }
      };

Further Example

The above example shows how to create a button, a label and a text box. Code in the OnActionPerformed curly brackets will be run every time the button is clicked. Because we haven't given names to the components we will find it difficult to access the values, so we could create them like this instead:

            uiManager = UIManagerComponent.CreateAndInit(this, new InputManager(this), "Content").Manager;

            var styleSystem = uiManager.UIStyle;
            var styles = styleSystem.LoadStyles("Content/UI/Metro/style.xml", "UI/Metro", GraphicsDevice);
            styleSystem.StyleResolver.StyleRules.AddRange(styles);

            var tf = new TextField(styleSystem)
            {
                Text = " Enter Here ",
                Anchor = AnchoredRect.CreateTopAnchored()
            };

            var lab = new Label(styleSystem, "Starting Text")
            {
                Anchor = AnchoredRect.CreateCentered()
            };

            var bt = new Button(styleSystem, "Test")
            {
                Anchor = AnchoredRect.CreateBottomAnchored(),
                Color = Color.Aquamarine,
                OnActionPerformed = (s, a) =>
                {
                    lab.Text = tf.Text;
                    System.Console.WriteLine("Click");
                }
            };

            uiManager.Root.Content = new Group(styleSystem)
            {
                lab,
                tf,
                bt
            };

Class Based Example

Add the following class into your project:

    class testpanel : Grid
    {
        public testpanel(IUIStyle s):base(s)
        {
            var tf = new TextField(s)
            {
                Text = " Enter Here ",
                Anchor = AnchoredRect.CreateTopAnchored()
            };

            var lab = new Label(s, "Starting Text")
            {
                Anchor = AnchoredRect.CreateCentered()
            };

            var bt = new Button(s, "Test")
            {
                Anchor = AnchoredRect.CreateBottomAnchored(),
                Color = Color.Aquamarine,
                OnActionPerformed = (se, a) =>
                {
                    lab.Text = tf.Text;
                    System.Console.WriteLine("Click");
                }
            };

            this.AddChildAt(tf, 0, 0);
            this.AddChildAt(lab, 0, 5);
            this.AddChildAt(bt, 0, 10);
        }
    }

You can now initialise the interface by changing:

            uiManager.Root.Content = new Group(styleSystem)
            {
                lab,
                tf,
                bt
            };

to just this:

uiManager.Root.Content = new testpanel(styleSystem);

Using Image Component

In order to use the Image component you need to create a ContentLoader. So after you have set up your styleSystem and loaded your styles add this line:

var loader = new ContentLoader(Content, _graphics.GraphicsDevice);

You can then use the Image component like the others:

new Image(styleSystem)
{
    Texture=loader.LoadTexture("example")
}

Using the DropDownBox Component

You firstly need to create an enum with your possible values:

enum Flavor
  {
    Chocolate,
    Vanilla,
    Cheese,
    Chilli,
    Strawberry,
    Honey,
    Lemon,
    Raspberry
  }

Now you can use this in a DropDownBox component:

 new DropDownBox<Flavor>(UIStyle)
      {
        SelectedIndex = 0,
        Data = new[]
        {
          Flavor.Chocolate,
          Flavor.Vanilla,
          Flavor.Cheese,
          Flavor.Chilli,
          Flavor.Strawberry,
          Flavor.Honey,
          Flavor.Lemon,
          Flavor.Raspberry
        }
      }

Steropes UI GitHub

You can access the Steropes GitHub here, it explains which components can be used:

Steropes UI GitHub

Customising the Interface

Within your content folder, search for the Metro folder and then the style.xml file. You can edit this file to create the look you want for your interface. Pretty much all of it can be changed.

Working Steropes Project

You can get a working example from HERE