Skin - SirePi/duality-ui GitHub Wiki

A Skin is, simply put, a collection of Templates put together with the goal of being possible to reuse the same Appearances between different UIs.

There are three predefined Skins in the assembly, and although they are not the most beautiful or feature-ful around, they are good enough to be able to quickly prototype your interface. By default, the system will use the Dark skin, but you can switch them by setting the desired one before you start creating your controls, like so:

Skin.DEFAULT = Skin.YAUI_DARK;
Skin.DEFAULT = Skin.YAUI_FATHOMS;
Skin.DEFAULT = Skin.YAUI_ROUNDED;

To define a Skin, you can create a new Skin-derived class and implement its Method Initialize method; in said method you will need to create a Template for each Control you want to support with your Skin, for example:

public class MySkin : Skin
{
  public override void Initialize()
  {
    ContentRef<Font> fntOpenSans = ...;

    ContentRef<Material> matControlBase = ...;
    ContentRef<Material> matControlDull = ...;
    ContentRef<Material> matControlHover = ...;
    ContentRef<Material> matControlActive = ...;

    Appearance baseAppearance = new Appearance()
    {
      Border = new Border(3),
      Active = matControlBase,
      Disabled = matControlDull,
      Hover = matControlBase,
      Normal = matControlBase
    };

    ControlTemplate emptyTemplate = new ControlTemplate()
    {
      Appearance = null
    };
    AddDefaultTemplate(typeof(Separator), emptyTemplate);
    AddDefaultTemplate(typeof(ControlsContainer), emptyTemplate);
    AddDefaultTemplate(typeof(CanvasPanel), emptyTemplate);
    AddDefaultTemplate(typeof(DockPanel), emptyTemplate);
    AddDefaultTemplate(typeof(GridPanel), emptyTemplate);
    AddDefaultTemplate(typeof(StackPanel), emptyTemplate);

    TextTemplate baseTemplate = new TextTemplate()
    {
      Appearance = baseAppearance,
      MinSize = new Size(20),
      TextConfiguration = new TextConfiguration()
      {
        Alignment = Alignment.Left,
        Color = ColorRgba.White,
        Font = fntOpenSans,
        Margin = new Border(5)
      }
    };
    AddDefaultTemplate(typeof(TextBlock), baseTemplate);
    
    TextTemplate rightAlignedButtonTemplate = new TextTemplate()
    {
      Appearance = baseAppearance,
      MinSize = new Size(20),
      TextConfiguration = new TextConfiguration()
      {
        Alignment = Alignment.Right,
        Color = ColorRgba.White,
        Font = fntOpenSans,
        Margin = new Border(5)
      }
    };
    AddCustomTemplate("RightAlignedButton", rightAlignedButtonTemplate);
    ...
  }
}

You can see how the Dark default Skin is defined here.

There are 2 methods that can be used to add a Template to a Skin, depending on the kind of template it is:

  • Method AddDefaultTemplate(Type, Template), which is used to define the default template that all Controls of the specified type should use.
  • Method AddCustomTemplate(String, Template), which instead is used to give a specific template only to selected Controls.

Again, once your Skin is defined you can either set it as default, as described above, or apply it to selected Controls in their constructor, such as:

Skin mySkin = ...;
Button btn = new Button(mySkin);

Other skins

Placeholder for future pre-cooked Skins.

⚠️ **GitHub.com Fallback** ⚠️