Myra is UI Library build on top of MonoGame and MonoGame.Extended.
It has following functionality:
- UI Widgets. Button, CheckBox, ComboBox, Grid, Image, Menu, ProgressBar, ScrollPane, SplitPane(with arbitrary number of splitters), Slider, TextBlock, TextField, SpinButton, Tree and Window. All of it are demonstrated here:
- UI Skinning. The awesome default skin had been borrowed from the VisUI project. The default skin could be replaced with a custom skin loaded from the JSON.
- UI Editor. Myra's binary distribution contains standalone UI Editor application:
- 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. - Add following field in the Game class:
private Desktop _host;- 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);- 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):
