Steropes Example

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.Components;
using Steropes.UI.Input;
using Steropes.UI.Styles;
using Steropes.UI.Util;
using Steropes.UI.Widgets;
using Steropes.UI.Widgets.Container;

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)
        {
          Text = "Hello World",
          Anchor = AnchoredRect.CreateCentered()
        }
      };