Quick Start Tutorial

1. Create MonoGame/FNA/Xenko project.
2. Reference Myra.
3. Add following field in the Game class:

private Desktop _host;

4. Add following code to the constructor to make the mouse cursor visible:

IsMouseVisible = true;

5. 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);

6. Add following code to the Draw method for MonoGame/FNA project:

GraphicsDevice.Clear(Color.Black);

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

Or following code for Xenko:

// Clear screen
GraphicsContext.CommandList.Clear(GraphicsDevice.Presenter.BackBuffer, Color.Black);
GraphicsContext.CommandList.Clear(GraphicsDevice.Presenter.DepthStencilBuffer, 
  DepthStencilClearOptions.DepthBuffer | DepthStencilClearOptions.Stencil);

// Set render target
GraphicsContext.CommandList.SetRenderTargetAndViewport(
  GraphicsDevice.Presenter.DepthStencilBuffer, 
  GraphicsDevice.Presenter.BackBuffer);

_host.Bounds = new Rectangle(0, 0, GraphicsDevice.Presenter.BackBuffer.ViewWidth, 
  GraphicsDevice.Presenter.BackBuffer.ViewHeight);
_host.Render();

It would result in following: