Restyling Through XML

Overview

A complete UI stylesheet consists of following essential files: stylesheet file in XML format, texture atlas file in libgdx atlas format, font(s) in TTF or AngelCode FNT format, underlying image(s) in BMP, TGA, PNG, JPG, GIF or PSD format.

Default UI stylesheet is example of all those files: https://github.com/rds1983/Myra/tree/master/src/Myra/Resources

It's important to notice that it uses single underlying image to store both texture atlas images and font glyphs. It's good solution performance-wise as the renderer doesnt need to switch between textures.

Images

default_ui_skin.xml is stylesheet file.

Notice that it explicitly references texture atlas in the following string:

  <Stylesheet TextureRegionAtlas="default_ui_skin.atlas">

Now if any style references an image, it is being resolved through the texture atlas.

I.e.

    <TextBoxStyle Background="textfield" TextColor="white" DisabledTextColor="grey" Font="default-font" Cursor="cursor" Selection="selection" />

This style references 3 images: 'textfield', 'cursor' and 'selection'. All of them are present in the texture atlas.

It is possible to set style properties of type IBrush to explicit color values.

I.e. see VerticalMenuStyle declaration:

    <VerticalMenuStyle Background="button" Border="#1BA1E2" BorderThickness="1"
                       SelectionHoverBackground="button-over" SelectionBackground="button-down"
                       SpecialCharColor="red">

VerticalMenuStyle Border brush is explicitly set to color "#1BA1E2".

In order to find what properties can be set for each style see following code: https://github.com/rds1983/Myra/tree/master/src/Myra/Graphics2D/UI/Styles

Every widget style corresponds to some style class and loading itself is done through reflection.

I.e. above VerticalMenuStyle is defined in MenuStyle.cs. MenuStyle inherits WidgetStyle. So VerticalMenuStyle has properies of both these classes.

Fonts

This is how stylesheet references and resolves fonts:

  <Fonts>
    <Font Id="default-font" File="default_font.fnt"/>
  </Fonts>

Remember we talked earlier that fonts and images share one underlying texture. Now if you view default_font.fnt, you would see how it is put into action:

  file="default_ui_skin.atlas:default"

So the font references the texture region in default_ui_skin.atlas with id 'default' as the image with character glyphs.

Loading

Actual stylesheet loading is done through XNAssets.

The loading code is located here: https://github.com/rds1983/Myra/blob/master/src/Myra/DefaultAssets.cs

Since the default stylesheet files are stored as resources the AssetManager creation code is:

  private static readonly AssetManager _assetManager = new AssetManager(MyraEnvironment.GraphicsDevice, new ResourceAssetResolver(typeof(DefaultAssets).Assembly, "Resources."));

And the actual stylesheet loading code:

  _uiStylesheet = _assetManager.Load<Stylesheet>("default_ui_skin.xml");

Myra.Samples.CustomUIStylesheet

Myra.Samples.CustomUIStylesheet is another example of full Myra stylesheet. Again stylesheet files are stored as resources: https://github.com/rds1983/Myra/tree/master/samples/Myra.Samples.CustomUIStylesheet/Resources

So the loading code is:

  protected override void LoadContent()
  {
      base.LoadContent();

      MyraEnvironment.Game = this;

      // Create asset manager
      var assetManager = new AssetManager(GraphicsDevice, new ResourceAssetResolver(typeof(CustomUIStylesheetGame).Assembly, "Resources"));

      // Load stylesheet
      Stylesheet.Current = assetManager.Load<Stylesheet>("ui_stylesheet.xml");
      ...
    }

Note. The default style is being applied to the widget in the moment of the creation. Therefore all changes to Stylesheet.Current should be done before the UI is created.