The resources node of a stylesheet defines fonts, images, and colours that are used for element styles.

A populated resources node looks like this:

<Resources Folder="Gui\\MainMenu">
    <Colours>
        <Button Colour="#BABCDF"/>
        <Hovered Colour="#EEEEEE"/>
        <Clicked Colour="#AAAAAA"/>
    </Colours>
    <Fonts>
        <Button URI="Fonts\\ButtonFont"/>
        <Paragraph URI="Fonts\\ParagraphFont"/>
    </Fonts>
    <Images>
        <MainMenu URI="MenuSprites" Tilemap="4, 4">
            <Pane/>
            <Inlay/>
            <Button/>
        </MainMenu/>
    </Images>
</Resources>

<Resources Folder="Gui\\MainMenu">

The root Resources node is created under the Main node of the stylesheet, and defines an attribute for the folder. This folder is treated as the root for all resources defined under this node, removing the need to prefix it to every resource's path.

This folder is relative to the root folder of the MonoGame ContentManager, which is the Content folder by default.

<Colours>
    <HexColour Colour="#BABCDF"/>
    <RGBColour Colour="*255, 0, 126"/>
    <MonoGameColour Colour="CornflowerBlue"/>
</Colours>

The colours resource node allows colours to be defined once and used throughout the stylesheet with the $ character. Note that the $ character will have no effect for colours defined within the resources node.

See Colour.

<Fonts>
    <Button URI="Fonts\\ButtonFont"/>
    <Paragraph URI="Fonts\\ParagraphFont"/>
</Fonts>

Defines fonts to be used by styles with text. The URI refers to the MonoGame SpriteFont file relative to the root folder of the resource node within the MonoGame Content folder. Note that the SpriteFont must be added to the content pipeline file of the MonoGame project, just like game content.

<Images>
    <MainMenu URI="MenuSprites" Tilemap="4, 4">
        <Pane/>
        <Inlay/>
        <Button/>
        <VerticalSliderHandle Bounds="16, 48, 16, 12"/>
        <HorizontalSliderHandle Bounds="32, 64, 12, 16"/>
    </MainMenu/>
    <Icons URI="Icons" Tilemap="3, 3">
        <RemoveButton Tile="0, 1"/>
        <AddButton Tile="0, 2"/>
    </Icons>
</Images>

Defines images to be used by styles for frames, as well as image blocks within layout sheets. The URI refers to the image file relative to the root folder of the resource node within the MonoGame Content folder. Note that the image must be added to the content pipeline file of the MonoGame project, just like game content.

Images defined under the main Images node can have child image nodes which are capable of taking sections of the parent image. For example; an image node with the Tilemap attribute can specify a width and height in tiles of the image, and child images are then able define themselves as sections of the parent image. A child image may define the area with the Bounds attribute, or automatically or with the Tile attribute if the parent image has the Tilemap attribute.

The Bounds attribute is a Rectangle which defines the area on the image to use.

<Portraits>
    <Sally Bounds="0, 48, 16, 24"/>
    <Mei Bounds="32, 48, 24, 16"/>
    <SpingusBot Bounds="16, 48, 16, 12"/>
</Portraits>

For tilemap images, the Tilemap attribute must be defined in the parent image as a Point, which defines how many tiles wide and tall the image is.

By default, child images of a Tilemap image automatically increment the tile position along the X axis, then the Y axis.

<Icons Tilemap="2, 2">
    <!--Equivalent to Tile="0, 0"-->
    <TopLeft/>
    <!--Equivalent to Tile="1, 0"-->
    <TopRight/>
    <!--Equivalent to Tile="0, 1"-->
    <BottomLeft/>
    <!--Equivalent to Tile="1, 1"-->
    <BottomRight/>
</Icons>

A specific tile position can be given with the Tile attribute as a Point.

If a tile is defined for a child image, successive child images will continue from that tile:

<Icons Tilemap="2, 2">
    <TopRight Tile="1, 0"/>
    <!--Equivalent to Tile="0, 1"-->
    <BottomLeft/>
    <!--Equivalent to Tile="1, 1"-->
    <BottomRight/>
</Icons>