Themeable GUI?

Feb 7, 2011 at 8:57 PM
Edited Feb 7, 2011 at 8:58 PM

Just wondering if there's any documentation on the themeability of the UI as I cant seam to work out how I can go about making a theme for the UI so as it fits my game better than the default windows-esq style?

Feb 7, 2011 at 9:36 PM

Sorry, there's no documentation yet.

But it's pretty easy: Skins are defined through XML files in a very simple format. Check out the XML file for the Windows-like skin (its name is "Suave") that ships with the library:

  • The first section <resources /> declares the font(s) and sprite sheet(s) used by the skin ("name" is the name the resource will be known throughout the xml file and "contentPath" is the string that will be passed to the XNA ContentManager to obtain that resource)
  • The second section, <frames /> declares building blocks that are used by the GUI to draw controls (the important thing being that a control can consist of multiple frames - a scrollbar, for example, uses two frames, one for the scrollbar background and one for the slider that moves in it)
  • You can think of a frame as a bitmap that will stretched to whatever size a control requires. However, a frame consists of 9 regions: upper left, upper, upper right, left, center, right, lower left, lower and lower right. When the frame is stretched, only the center region stretches (well, and technically the upper,lower,left,right regions in one direction, too). This ensures the resized frame still has a sharp border.

To load a custom skin:

  • Use the static Nuclex.UserInterface.Visuals.Flat.FlatGuiVisualizer.FromFile()/FromResource() methods to construct a new IGuiVislaizer.
  • Then assign that visualizer to your GuiManager (it's got a .Visualizer property you can set)



Feb 7, 2011 at 9:39 PM

For more radical changes (think 3D GUI, or a completely new type of skinning system, or using actual Windows controls, or maybe usage in an engine like Mogre) it's also possible to create a custom IGuiVisualizer. But that's a whole lot of work more :)