Create Full Skin WinForm GUI

DotNet SE is a Windows Application skin engine based on .Net framework. With DotNet SE you can easily build beautiful full skinned Windows Application.

There are two parts of DotNet SE , DotNet SE Editor and DotNet SE Control Engine.

1. DotNet SE Editor
   • Design the GUI layout
   • generate the GUI’s configuration file
   • Generate GUI code.
2. DotNet SE Control Engine: Owner drawn controls are all here. The controls include:
   1.  
      1. Form: SkinForm
         The basic form in DotNet SE control library. Derived your form from SkinForm can create full skin form.
      2. General Controls
         • SkinButton
         • SkinDropDownButton
         • SkinLabel
         • SkinLinkLable
         • SkinRadioButton
         • SkinCheckBox
         • SkinTextBox
         • SkinComboBox
         • SkinProgressBar
         • SkinVScrollBar
         • SkinHScrollBar
      3. UI Layout Controls
         • SkinPanel
         • SkinSplitContainer
      4. Special Controls
         • AnimateControl.

Use DotNet SE Editor to create GUI Layout
1. Launch DotNet SE Editor

Enter the project information and click OK button.

2. Create a new form with Create new Form command on Content Menu of the Forms Node, named LoginForm (Change the name on the property panel)
A new form node will be added to the Form and Control Tree, The node is in editing mode, you can changed the form name here. (Note: The form name is very useful, when you create a win form in Visual Studio, the name must be the same with this name. So that DotNet SE can match the configuration with the WinForm)


3, Change the form’s properties

Select Image files for the LoginForm. After the image files selected the image will be displayed in the working area.

4, Create Controls
After select the images for the LoginForm, we can create controls on this form.
 Right click on the LoginForm Node. Select New Controls->Button to create a button.
 Keep the left mouse button down and move the mouse to select a area, right click on the select area and select the Select Area Command to set the area as a button (Double click left button take the same action)

Repeat this step to create more controls. The controls will be list under the LoginForm Node.

Select the control on the Form and Control Tree change the properties on the property window

5. Save the project
After the project was saved. The generated folders and files as follow.

Double click TestDotNetSE.csproj to launch the project. Build and run the project


6, Use the test command on the toolbar to test the Login Form. The form looks like


Introduction to the auto generated code.
DotNet SE Editor will auto generate codes for you. For each Form or User Control three code files will be generate, XXX.cs, XXX.dnse.cs and XXX.designer.cs (Take C# and LoginForm for example)

1, Program Entry
The program entry is in Program.cs file. The InitSkins method was used to init the DotNet SE engine you can do changes to this code to change the skin configure file path.

2, XXX.CS
//------------------------------------------------------------------------------
// created: 2009/9/8 22:53:33
// filename: FormsLoginForm
// file base: LoginForm
// file ext: cs
// author:
// purpose:
//------------------------------------------------------------------------------

namespace TestDotNetSE
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using DotNetSE.Builder;
using DotNetSE.Utility;

public partial class LoginForm : SkinForm
{
public LoginForm()
{
this.InitializeComponent();
this.InitControls();
}

// Override the base method to Prepare the controls' display text and tool tip here.
protected override void PrepareControlText()
{
base.PrepareControlText();
}

// Override the base method to Prepare the controls' styles here.
protected override void PrepareControlStyle()
{
base.PrepareControlStyle();
}

// Override the base method to Prepare the controls' events tip here.
protected override void PrepareControlEvents()
{
base.PrepareControlEvents();
}
}
}

Pay attentions to the three override functions
 PrepareControlText: You can prepare the controls’ display text and tooltip text here
protected override void PrepareControlText()
{
base.PrepareControlText();
base.controlTextInfoDictionary.Add("loginButton", new ControlTextInfo("Login", string.Empty));
}

 PrepareControlStyle: You can change the controls’ styles here.
protected override void PrepareControlStyle()
{
base.PrepareControlStyle();
this.loginButton.ForeColor = Color.Green;
}

 PrepareControlEvents: You can add event handler for the controls’ here.
protected override void PrepareControlEvents()
{
base.PrepareControlEvents();
this.loginButton.Click += OnLoginButton_Click;
}

3, XXX.DNSE.CS
namespace NewDay
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using DotNetSE.Builder;
using DotNetSE.Utility;

public partial class LoginForm
{
private DotNetSE.Builder.SkinComboBox2 mailComboBox;
private DotNetSE.Builder.SkinTextBox passwordTextBox;
private DotNetSE.Builder.SkinCheckBox remberPasswordCheckBox;
private DotNetSE.Builder.SkinCheckBox autoLoginCheckBox;
private DotNetSE.Builder.SkinButton loginButton;
private DotNetSE.Builder.SkinButton minButton;
private DotNetSE.Builder.SkinButton maxButton;
private DotNetSE.Builder.SkinButton closeButton;
private DotNetSE.Builder.AnimateControl loginAnimationControl;
private DotNetSE.Builder.SkinLabel E_MailLlabel;
private DotNetSE.Builder.SkinLabel passwordLabel;
private System.Windows.Forms.LinkLabel forgetPasswordLinkLabel;
private System.Windows.Forms.LinkLabel registLinkLabel;
private DotNetSE.Builder.SkinPanel avatarPanel;
private DotNetSE.Builder.SkinLabel versionLabel;

// Init the control object for further use.
private void InitControls()
{
base.BuildForm();
this.mailComboBox = ((DotNetSE.Builder.SkinComboBox2)(base.FindControl("mailComboBox")));
this.passwordTextBox = ((DotNetSE.Builder.SkinTextBox)(base.FindControl("passwordTextBox")));
this.remberPasswordCheckBox = ((DotNetSE.Builder.SkinCheckBox)(base.FindControl("remberPasswordCheckBox")));
this.autoLoginCheckBox = ((DotNetSE.Builder.SkinCheckBox)(base.FindControl("autoLoginCheckBox")));
this.loginButton = ((DotNetSE.Builder.SkinButton)(base.FindControl("loginButton")));
this.minButton = ((DotNetSE.Builder.SkinButton)(base.FindControl("minButton")));
this.maxButton = ((DotNetSE.Builder.SkinButton)(base.FindControl("maxButton")));
this.closeButton = ((DotNetSE.Builder.SkinButton)(base.FindControl("closeButton")));
this.loginAnimationControl = ((DotNetSE.Builder.AnimateControl)(base.FindControl("loginAnimationControl")));
this.E_MailLlabel = ((DotNetSE.Builder.SkinLabel)(base.FindControl("E-MailLlabel")));
this.passwordLabel = ((DotNetSE.Builder.SkinLabel)(base.FindControl("passwordLabel")));
this.forgetPasswordLinkLabel = ((System.Windows.Forms.LinkLabel)(base.FindControl("forgetPasswordLinkLabel")));
this.registLinkLabel = ((System.Windows.Forms.LinkLabel)(base.FindControl("registLinkLabel")));
this.avatarPanel = ((DotNetSE.Builder.SkinPanel)(base.FindControl("avatarPanel")));
this.versionLabel = ((DotNetSE.Builder.SkinLabel)(base.FindControl("versionLabel")));
}
}
}

These code was auto generate by DotNetSE. Do not do changes to these codes by hand.
All the controls’ object definitions are here you can use the object in the class.

4, XXX.DESIGNER.CS
This file is the save with the form code auto generated by Visual Studio.