Skip to content

Quick Start Tutorial

Roman Shapiro edited this page Nov 6, 2023 · 36 revisions
  1. Create MonoGame/FNA project.
  2. Reference Myra. Then add the following using statements:
using Myra;
using Myra.Graphics2D.UI;
  1. Add following code to the constructor to make the mouse cursor visible:
IsMouseVisible = true;
  1. Add following field to the Game class:
private Desktop _desktop;
  1. 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 Proportion(ProportionType.Auto));
grid.ColumnsProportions.Add(new Proportion(ProportionType.Auto));
grid.RowsProportions.Add(new Proportion(ProportionType.Auto));
grid.RowsProportions.Add(new Proportion(ProportionType.Auto));

var helloWorld = new Label
{
  Id = "label",
  Text = "Hello, World!"
};
grid.Widgets.Add(helloWorld);

// ComboBox
var combo = new ComboBox();
Grid.SetColumn(combo, 1);
Grid.SetRow(combo, 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
{
  Content = new Label
  {
    Text = "Show"
  }
};
Grid.SetColumn(button, 0);
Grid.SetRow(button, 1);

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

grid.Widgets.Add(button);

// Spin button
var spinButton = new SpinButton
{
  Width = 100,
  Nullable = true
};
Grid.SetColumn(spinButton, 1);
Grid.SetRow(spinButton, 1);

grid.Widgets.Add(spinButton);

// Add it to the desktop
_desktop = new Desktop();
_desktop.Root = grid;
  1. Add following code to the Draw method:
GraphicsDevice.Clear(Color.Black);
_desktop.Render();

It would result in following: