OK, I will try to write a tutorial on creating skins here using your simple Close Button example.
1. Create a new XML file somewhere, start it off with the usual xml header:
Code:
<?xml version="1.0" encoding="utf-8" ?>
2. Now start off the root element
Code:
<Skin name="Noraj's Skin" skinid="{5dc5ab78-d504-41b0-a23d-f0d823f697cb}">
Here we have the root element name "Skin", the attribute name, which is what is displayed as the root node in the toolbox tree, and a GUID skinid which allows you to uniquely identify this skin, do not reuse this value ever. You will notice that there are commented lines in the generated XML that contain this ID, it is what allows the designer to match up a component in the XML, to a designable component in the toolbox.
3. Now start defining components
Code:
<Button name="CloseButton" displayName="Close Button" inherits="UIPanelCloseButton" render="ComponentRender" frameid="{5dc5ab79-d504-41b0-a23d-f0d823f697cb}">
Element name Button matches up to any Frame or element derived from it (can't be Texture or FontString). Attribute name is the unique name of the component, is used in the toolbox if the attribute displayName is not present. Notice that name can't have spaces, while displayName can (and could be localised). You can set any frame properties you want from the XML definition, we set inherits here, which brings in the definition of UIPanelCloseButton.
Next is the render attribute, this controls how the component is edited, it can be either FrameRender (for a base form), ContainerRender (for any control that can contain other controls, like the Panel), and ComponentRender for the rest. For each skin there can be only 1 FrameRender component, and it must have the name "form".
The frameid is another GUID that uniquely identifies the frame within or without the skin, make sure this is unique for all components you create.
4. Now define the editing interface to your component:
Code:
<!--
<FrameSkin>
<Setup>
<Property name="Location" visible="true" />
<Property name="Size" value="new System.Drawing.Size(32,32)" />
</Setup>
<Script>
<OnSetupFrame>
frame.Anchors.Clear();
frame.Anchors.Add(new LayoutFrame.Anchor());
frame.Anchors[0].point = FRAMEPOINT.TOPLEFT;
frame.Anchors[0].Offset = Dimension.FromPoint(control.Location);
</OnSetupFrame>
<OnSetupForm>
control.Location = frame.Anchors[0].Offset.ToPoint();
</OnSetupForm>
</Script>
</FrameSkin>
-->
All this is in comments so it can pass through the same loading code as the normal XML files, it is parsed later. Here you need some knowledge on the .NET framework and C# so may not be for everyone, I am investigating ways to make it lua scriptable but its not too high a priority right now.
The way that the editor works is that you design the form in a Windows Forms world, this allows me to use the DesignSurface already available in .NET. What this section of the skin does is convert between the Windows Forms world and the XML Frame world.
In the setup section you define a list of properties you want to edit in the property viewer, or what you need setup before the component can be edited. Because this control is so simple only really the location is needed, so it is exposed by putting in the visible attribute and setting it to true. All properties except the name and scripts are set to invisible by default, so you have to explicitly display them.
You will notice with Size, that we didn't set visible to true, that is because the component is a fixed size so we don't want to change it, all we did was setup the edit component to match the size of the close button texture (32x32). Look in the default skin (_defaultskin.xml in the install zip) for more examples of properties, the other usable attributes are:
type : sets the type of any new properties you create
category : sets the category within the property list
description: allows you to set a description that is displayed in the property form at the bottom
persist: allows you to save properties whose values you cannot put within the XML
defaultCopy: uses the default copy mechanism to copy properties, i.e. frame.hidden = (bool)control.Properties["hidden"] and control.Properties['hidden"] = frame.hidden equivalent.
Next, there are 2 scripts, OnSetupFrame basically copies the properties used in the base edit control to the XML frame, and OnSetupForm does the reverse. This is coded only in C# at the moment, but I can allow VBScript if someone needs it.
If you create properties in the Setup section, then these are gettable/settable through the Properties property, (ie. control.Properties["NewProperty"]), this works with objects so casting is required when getting, see the default skin for examples.
In the Windows Forms world, components with a FrameRender have System.Windows.Forms.Form properties by default, ContainerRender has System.Windows.Forms.Panel properties and ComponentRender have System.Windows.Forms.Control's properties.
5. Close up the XML file and save
For this example that is all, but you could add more components or whatever, the default skin is the best place to look for more examples.
6. Install the skin
Copy the file into the [InstallDir]\Skins directory and restart the application.
I have attached the full example skin to this message so you can use it now.
Good luck
Creating a Skin
Hybrid Mode
