Restyling Through XML

Overview

A complete UI stylesheet consists of following essential files: stylesheet file in XML format, texture atlas file in XML format, font(s) in 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.

Now let's go over the files.

default_ui_skin.xml

default_ui_skin.xml is stylesheet file.

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

  <Stylesheet TextureRegionAtlas="default_ui_skin_atlas.xml">

Now if any style references an image, it resolves it through the Texture Atlas.

I.e.

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

Above string references 2 images: 'textfield' and 'cursor'. Both of them are present in the texture atlas.

It's also important to notice that it is possible to set style properties of IBrush type to explicit color values.

I.e. we could change above xml to following:

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

Then TextBox background would become olive.

Fonts

This is how stylesheet references and resolves fonts:

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

default_ui_skin_atlas.xml is texture atlas file. Thorough specs on Myra texture atlases is available here: Images.

default_font.fnt and default_font_small.fnt are fonts.

Notice that default_font.fnt references the texture region in default_ui_skin_atlas.xml with id 'default' as the image with character glyphs:

  file="default_ui_skin_atlas.xml:default"

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.