Skip to content
George Michaelides edited this page Apr 30, 2015 · 28 revisions

Gem Gui is a customizable Gui engine for rendering controls MonoGame.

Controls

You can create controls via the GemGui static factory class

   var button = GemGui.Button(int x, int y, int sizeX, int sizeY);

Available Controls

   Button(int x, int y, int sizeX, int sizeY)
   ImageButton(Texture2D image, int x, int y, int sizeX, int sizeY)
   Label(Spritefont font, int x, int y, int sizeX, int sizeY, string text)
   TextField(int x,int y,int sizeX, int sizeY)

Each control has the following fields and methods which are described bellow

  ViewEvents Events
  RenderStyle Style
  ControlOptions Options
  Region Region
  
  //the current control and the elapsed time
  void Transform(Action<AControl,double> transformation) 
  void AddTransformation(ITransformation transformation)
  vod SetFocus()

Layout

The controls can be assigned into layout groups

  var listGroup = GemGui.Groups.ListGroup
  listGroup.Assign(buttonOk,buttonCancel)

Available Groups

  ListLayout(Orientation orientation)
  LinearLayout
  GridLayout

##Events

Events respond to touch / mouse and keyboard. It is decided by the AggregationContext according to the hardware settings.

    event GotFocus;
    event LostFocus;
    event Clicked;
    event GotMouseCapture;
    event LostMouseCapture;
    event DragEnter;
    event DragLeave;

##Options

    bool Visible
    bool FocusEnabled
    bool Enabled
    bool HoverEnabled

##Styles

A style has render style parameters an instance of ABatchDrawable which renders using spriteBatch and render instructions upon multiple events

Render Style Parameters

    float Transparency 
    Vector2 Scale
    float Rotation
    Color Color
    SpriteEffects SpriteEffect

Predefined Styles

  myButton.Style = StyleFactory.ButtonDefault;

Add a custom style

 StyleFactory.Add("CustomStyle", 
                  new RenderStyleParameters(),
                  DrawStyle.Detailed,
                  (element,style)=> {
                      element.GotFocus +=
                      (element,args) => style.Transparency = 1.0f;
                      element.LostFocus += 
                      (element,args) => style.Transparency = 0.5f;
                  });
 myButton.Style = StyleFactory["CustomStyle"];

##Example

var myLabel = GemGui.Label(font: FontContainer["Segoe_10"],
                           x: 10,
                           y: 10,
                           sizeX: 100,
                           sizeY: 30,
                           text: "Hello");
myLabel.VerticalAlignment = VerticalAlignment.Center;

var myButton = GemGui.Button(x: 10,
                             y: 50,
                             sizeX: 50,
                             sizeY: 50);

myButton.FluentBuild
        .Style(StyleFactory.ButtonDefault)
        .Text("Click me")
        .TextColor(Color.Red)
        .BackgroundColor(Color.White)
        .OnClick((element,args) => Log.Info("i clicked my button"));

var group = GemGui.Groups.GridLayout;
group.Assign(myLabel,myButton);

Clone this wiki locally