GuiCookie handles element graphics through the use of a stylesheet. This document is an XML file outlining the resources used and how specifically to use them in order to draw each element.

In Visual Studio, make a new folder in the Content folder, in this example the folder will be called "Gui". Within this folder, add a new XML file via Visual Studio's Add New Item menu, make sure it is set to "Copy if newer". In this example, the stylesheet will be called "Style.xml". Add a new node to this file called "Main".

Within this main node, a node named "Resources" should be created. This node describes the content required by the style in order to render, such as fonts, colours, and images. An attribute called "Folder" can be added to the resources node to specify the folder within the Content folder where these resources are held, especially useful if your UI will have multiple stylesheets.

See the Resources section for more information on how resources are handled, as well as examples.

A node called "Colours" can be added to the resources node. Each colour added under this node will have its node name used as its name, and the "Colour" attribute will be parsed into a colour. For now, add a single main colour and 3 different tints.

<Resources>
    <Colours>
        <MainColour Colour="#5F628A"/>

        <MainTint Colour="#DDD"/>
        <ClickedTint Colour="#AAA"/>
        <DisabledTint Colour="#222"/>
    </Colours>
</Resources>

A node called "Fonts" can be added to the resources node. Each font added under this node will have its node name used as its name, and the "URI" attribute will describe the location of the .spritefont relative to the content folder (without the file extension). For now, just a single font is needed. Don't forget to add the font file to the MonoGame content file.

<Resources>
    <Fonts>
        <Default URI="Gui\\DefaultFont"/>
    </Fonts>
</Resources>

A node called "Images" can be added to the resources node. Images are the most complex resource type to add, but are also the most powerful. Each image added under this node will have its node name used as its name, and its "URI" attribute will describe the location of the image file relative to the content folder (without the file extension) much the same as a font. This image node can also have a "Tilemap" attribute, which takes a comma-separated Point value describing how many tiles wide and tall the image is.

For this example, the image is 96x96 pixels large, split into a 2x2 tile grid. Don't forget to add the image file to the MonoGame content file.

<Resources>
    <Images>
        <MainMenu URI="Gui\\DefaultImage" Tilemap="2, 2">
            <Button/>
            <Pane/>
            <Inlay/>
        </MainMenu>
    </Images>
</Resources>

With resources done, styles can now be added. Add a new node under the main node named "Styles". Under this styles node, add a new node with the desired name of the style, in this example, "Default" will be used. For now, a very simple pane will be made.

See the Style Node page for more information on how styles are defined.

<Styles>
    <Default>
        <SliceFrame Image="Pane" NineSlice="Thirds" Colour="$MainColour"/>
        <Font Font="Default" Colour="#BBB"/>
    </Default>
</Styles>

Now that the stylesheet has been made, the next step is creating a starting layout sheet.