Quick Start Tutorial

Overview

The goal of this tutorial is to provide Myra Quick Start.

Tutorial

1. Create MonoGame project.
2. The easiest way of adding Myra to the MonoGame project is through Nuget: install-package Myra. Alternative way is to download the latest binary release: https://github.com/rds1983/Myra/releases, install it and reference Myra.dll manually.
3. Add following field in the Game class:

private Desktop _host;

4. Add following code in the LoadContent method, which will create 2x2 grid and populate it with some widgets:

MyraEnvironment.Game = this;

var grid = new Grid
{
  RowSpacing = 8,
  ColumnSpacing = 8
};

grid.ColumnsProportions.Add(new Grid.Proportion(Grid.ProportionType.Auto));
grid.ColumnsProportions.Add(new Grid.Proportion(Grid.ProportionType.Auto));
grid.RowsProportions.Add(new Grid.Proportion(Grid.ProportionType.Auto));
grid.RowsProportions.Add(new Grid.Proportion(Grid.ProportionType.Auto));

// TextBlock
var helloWorld = new TextBlock
{
  Text = "Hello, World!"
};
grid.Widgets.Add(helloWorld);

// ComboBox
var combo = new ComboBox
{
  GridPositionX = 1,
  GridPositionY = 0
};

combo.Items.Add(new ListItem("Red", Color.Red));
combo.Items.Add(new ListItem("Green", Color.Green));
combo.Items.Add(new ListItem("Blue", Color.Blue));
grid.Widgets.Add(combo);

// Button
var button = new Button
{
  GridPositionX = 0,
  GridPositionY = 1,
  Text = "Show"
};

button.Down += (s, a) =>
{
  var messageBox = Dialog.CreateMessageBox("Message", "Some message!");
  messageBox.ShowModal(_host);
};

grid.Widgets.Add(button);

// Spin button
var spinButton = new SpinButton
{
  GridPositionX = 1,
  GridPositionY = 1,
  WidthHint = 100,
  Nullable = true
};
grid.Widgets.Add(spinButton);

// Add it to the desktop
_host = new Desktop();
_host.Widgets.Add(grid);

5. Add following code to the Draw method:

_host.Bounds = new Rectangle(0, 0, GraphicsDevice.PresentationParameters.BackBufferWidth, GraphicsDevice.PresentationParameters.BackBufferHeight);
_host.Render();

It would result in following screenshot(assuming the background is black):