Restyling Through XML

Overview

Method Stylesheet.LoadFromSource loads a stylesheet.

It has following signature:

    public static Stylesheet LoadFromSource(string stylesheetXml,
        Func<string, IRenderable> textureGetter,
        Func<string, SpriteFont> fontGetter);

stylesheetXml is string, containing stylesheet XML. Following link is example of such XML(default Myra UI stylesheet): https://github.com/rds1983/Myra/blob/master/src/Myra/Resources/default_ui_skin.xml

textureGetter and fontGetter are methods, returning correspondengly images and fonts by their ids.

Following code sets loaded stylesheet as current:

    Stylesheet.Current = stylesheet;

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.

CustomUIStylesheet Sample

This section destribes how CustomUIStylesheet sample works.

CustomUIStylesheet stores its assets as ordinary resources: https://github.com/rds1983/Myra/tree/master/samples/Myra.Samples.CustomUIStylesheet/Resources

It's important to notice that it uses one image to store both custom font glyphs and ui images(see ui_stylesheet_atlas.png). That is good solution performance-wise, as UI rendering wouldn't need to switch beetween different textures.

The region containing font glyphs is specified in the TextureRegionAtlas(see ui_stylesheet_atlas.xml):

  <TextureRegion Id="commodore-64" Left="1" Top="165" Width="512" Height="64" />

Now actual custom stylesheet loading code should be quite obvious:

    var assembly = typeof(CustomUIStylesheetGame).Assembly;

    // Load image containing font & ui spritesheet
    Texture2D texture;
    using (var stream = assembly.OpenResourceStream("Resources.ui_stylesheet_atlas.png"))
    {
        texture = Texture2D.FromStream(GraphicsDevice, stream);
    }

    // Load ui text atlas
    var textureAtlas = TextureRegionAtlas.FromXml(assembly.ReadResourceAsString("Resources.ui_stylesheet_atlas.xml"), texture);

    // Load ui font(s)
    var region = textureAtlas["commodore-64"];
    var fonts = new Dictionary<string, SpriteFont>
    {
        ["commodore-64"] = 
            BMFontLoader.LoadText(
                assembly.ReadResourceAsString("Resources.commodore-64.fnt"),
                s => new TextureWithOffset(region.Texture, region.Bounds.Location)
            )
    };

    // Load stylesheet
    var stylesheet = Stylesheet.LoadFromSource(
        assembly.ReadResourceAsString("Resources.ui_stylesheet.xml"),
        s => textureAtlas[s],
        s => fonts[s]);

    Stylesheet.Current = stylesheet;