How to: Skins and Styles

Style

A Style defines how a Control is drawn.
Take a look at its properties

public Style()
{
    Tint = -1;
    Opacity = 1;
    BackColor = 0;
    TextColor = -1;
    TextPadding = new Margin(0);
    TextAlign = Alignment.Inherit;
    TextureUV = new UVCoords(0, 0, 1, 1);
    Texture = string.Empty;
}

Control States

Controls have a range of States.
You can change the Style for every State.

public enum ControlState
{
    Default,
    Hot,
    Pressed,
    Disabled,
    Focused,
    Checked,
    CheckedHot,
    CheckedPressed,
    CheckedDisabled,
    CheckedFocused,
    Selected,
    SelectedHot,
    SelectedPressed,
    SelectedDisabled,
    SelectedFocused,
}

ControlStyle

The ControlStyle exposes as many Styles as there are States.
This is the class you use to change the look and feel of controls.

public class MyGUI: Desktop
{
   public MyGUI()
   {
      ControlStyle buttonStyle = new ControlStyle();
      buttonStyle.Default.Texture = "button_default.dds";
      buttonStyle.Hot.Texture = "button_hot.dds";

      // shortcut to set all states
      // buttonStyle.Texture = "button.dds";
   }
}

Skin

The Skin is a collection of ControlStyles.
In order to use your styles, you need to use a Skin.

public class MyGUI: Desktop
{
   public MyGUI()
   {
      ControlStyle buttonStyle = new ControlStyle();
      buttonStyle.Default.Texture = "button_default.dds";
      buttonStyle.Hot.Texture = "button_hot.dds";

      // this would set the Texture property on all states
      // buttonStyle.Texture = "button.dds";

      Skin skin = new Skin()
      skin.Styles.Add("style1", buttonStyle);
      // we can share the style
      skin.Styles.Add("style2", buttonStyle);

      GuiHost.SetSkin(skin);
   }
}

Assigning styles

The strings you register in your Skin are
the identifiers you use on your Controls.

public class MyGUI: Desktop
{
   public MyGUI()
   {
      [..]
      skin.Styles.Add("style1", buttonStyle);
      [..]

      Label label = new Label();
      label.Style = "style1";
   }
}