A Simple Skinning Tutorial for VB.NET (Using XML)
Posted: Wed Mar 09, 2011 1:55 pm
OK, I got bored early this morning so I decided to make a Skinning Function in a VB.NET Forms Application.
This skinning function uses XML based file.
This way anyone can make a skin for you project.
This is a very simple skinning function. There can be more functions added to it but for this tutorial I will keep it simple.
First off Start a new project.
"Everything can be edited from the Code View"
In the "Solution Explore" create a new folder. Name it "skins"
Inside the "skins" folder create another folder name it "default"
In the "skin" folder create a new file name it "default.xml"
Add a background image to the "skins/default/" folder name it whatever you want.
Inside the "default.xml" file are 3 section. "mdata,images,form
mdata = Is the skin Author information
images = is the list of images that the skinner wil use and the relative paths
form = is just some misc information for what ever use.
This is what the "default.xml" should look like.
default.xml
skin_mod.vb
Now in form Controls List
2 = Button (1 to list skins, 1 to apply the new skin)
2 = ListBox (1 list skins, 1 Shows the Skin Author details)
1 = CheckBox (Remebers if you want to use the Skin engine or not)
1 = PictureBox (Skin Preview)
2 = Label (Just there for visual effect)
Application Settings
Create 2 settings.
1 = UseSkin, Boolean, User - True
2 = DefaultSkin, String, User - default.xml
Form1_Load
This skinning function uses XML based file.
This way anyone can make a skin for you project.
This is a very simple skinning function. There can be more functions added to it but for this tutorial I will keep it simple.
First off Start a new project.
"Everything can be edited from the Code View"
In the "Solution Explore" create a new folder. Name it "skins"
Inside the "skins" folder create another folder name it "default"
In the "skin" folder create a new file name it "default.xml"
Add a background image to the "skins/default/" folder name it whatever you want.
Inside the "default.xml" file are 3 section. "mdata,images,form
mdata = Is the skin Author information
images = is the list of images that the skinner wil use and the relative paths
form = is just some misc information for what ever use.
This is what the "default.xml" should look like.
default.xml
Code: Select all
Now after all that, Add a new item to your project. ( Add > Module ) name it what ever you want.<?xml version="1.0" encoding="utf-8"?>
<skin>
<mdata>
<skin_name>Default</skin_name>
<author>Scottie1972</author>
<link>http://www.google.com</link>
</mdata>
<images>
<img_path>default</img_path>
<background>mbackground.png</background>
<bglayout>1</bglayout>
</images>
<form>
<formborder>4</formborder>
<control_font_color>black</control_font_color>
<control_bgcolor>white</control_bgcolor>
</form>
</skin>
skin_mod.vb
Code: Select all
Imports System.Xml
Module skin_mod
'************************************************************************
' My Skinning Engine v1.0
'
'
'
'BackgroundImageLayout Settings
'0 = None
'1 = Title
'2 = Center
'3 = Stretch
'4 = Zoom
'
'
'
'FormBorder Settings
'0 = None
'1 = FixedSingle
'2 = Fixed3D
'3 = FixedDialog
'4 = Sizable
'5 = FixedToolWindow
'6 = SizableToolWindow
'************************************************************************
Private WithEvents SkinDIR As String = Application.StartupPath & "\skins\"
Private WithEvents DefaultSkin As String = My.Settings.DefaultSkin
Public Sub LoadSkinData(ByRef lstBox As ListBox, ByVal Skin As String, ByRef pb As PictureBox)
lstBox.Items.Clear()
pb.Image = Nothing
Dim XmlDoc As New XmlDocument
XmlDoc.Load(SkinDIR & "\" & Skin)
For Each IDNode As XmlNode In XmlDoc.SelectNodes("//skin/mdata")
If IDNode.HasChildNodes = True Then
Dim Skin_Name As String = IDNode.ChildNodes(0).InnerText
Dim Author As String = IDNode.ChildNodes(1).InnerText
Dim Link As String = IDNode.ChildNodes(2).InnerText
lstBox.Items.Add(Skin_Name)
lstBox.Items.Add(Author)
lstBox.Items.Add(Link)
End If
Next
For Each IDNode As XmlNode In XmlDoc.SelectNodes("//skin/images")
If IDNode.HasChildNodes = True Then
Dim skin_path As String = IDNode.ChildNodes(0).InnerText.ToString
Dim Background As String = SkinDIR & skin_path & "\" & IDNode.ChildNodes(1).InnerText
pb.SizeMode = PictureBoxSizeMode.StretchImage
If Not Background = SkinDIR & skin_path & "\Nothing" Then
pb.Image = Image.FromFile(Background)
End If
End If
Next
End Sub
Public Sub LoadBackgroundImage(ByRef frm As Form, _
ByVal Skin As String, _
ByRef lb1 As Control, _
ByRef lb2 As Control)
Dim XmlDoc As New XmlDocument
XmlDoc.Load(SkinDIR & "\" & Skin)
'Loads Sjin Images
For Each IDNode As XmlNode In XmlDoc.SelectNodes("//skin/images")
If IDNode.HasChildNodes = True Then
Dim skin_path As String = IDNode.ChildNodes(0).InnerText.ToString
Dim Background As String = SkinDIR & skin_path & "\" & IDNode.ChildNodes(1).InnerText
Dim bgLayout As Integer = IDNode.ChildNodes(2).InnerText
If Not Background = SkinDIR & skin_path & "\Nothing" Then
frm.BackgroundImageLayout = bgLayout
frm.BackgroundImage = Image.FromFile(Background)
Else
frm.BackgroundImage = Nothing
End If
End If
Next
'Loads Visual Form
For Each IDNode As XmlNode In XmlDoc.SelectNodes("//skin/form")
If IDNode.HasChildNodes = True Then
Dim formBorder As Integer = IDNode.ChildNodes(0).InnerText
Dim foreColor As String = IDNode.ChildNodes(1).InnerText
Dim bgColor = IDNode.ChildNodes(2).InnerText
frm.FormBorderStyle = formBorder
lb1.ForeColor = Color.FromName(foreColor)
lb1.BackColor = Color.FromName(bgColor)
lb2.ForeColor = Color.FromName(foreColor)
lb2.BackColor = Color.FromName(bgColor)
End If
Next
End Sub
Public Sub LoadSkinList(ByRef lstBox As ListBox)
Dim strFileSize As String = ""
Dim di As New IO.DirectoryInfo(SkinDIR)
Dim aryFi As IO.FileInfo() = di.GetFiles("*.xml")
Dim fi As IO.FileInfo
For Each fi In aryFi
lstBox.Items.Add(IO.Path.GetFileNameWithoutExtension(fi.Name))
Next
End Sub
End Module
Now in form Controls List
2 = Button (1 to list skins, 1 to apply the new skin)
2 = ListBox (1 list skins, 1 Shows the Skin Author details)
1 = CheckBox (Remebers if you want to use the Skin engine or not)
1 = PictureBox (Skin Preview)
2 = Label (Just there for visual effect)
Application Settings
Create 2 settings.
1 = UseSkin, Boolean, User - True
2 = DefaultSkin, String, User - default.xml
Form1_Load
Code: Select all
Button1_Click
If My.Settings.UseSkin = True Then
LoadBackgroundImage(Me, My.Settings.DefaultSkin, ListBox1, ListBox2)
CheckBox1.CheckState = CheckState.Checked
End If
Code: Select all
ListBox1_SelectedIndexChanged
ListBox1.Items.Clear()
ListBox2.Items.Clear()
PictureBox1.Image = Nothing
Button2.Tag = ""
LoadSkinList(ListBox1)
Code: Select all
CheckBox1_Click
LoadSkinData(ListBox2, ListBox1.SelectedItem & ".xml", PictureBox1)
Button2.Tag = ListBox1.SelectedItem & ".xml"
Code: Select all
Button2_Click
If CheckBox1.CheckState = CheckState.Checked Then
My.Settings.UseSkin = True
My.Settings.DefaultSkin = "default.xml"
My.Settings.Save()
ElseIf CheckBox1.CheckState = CheckState.Unchecked Then
Me.BackgroundImage = Nothing
My.Settings.UseSkin = False
My.Settings.DefaultSkin = "default.xml"
My.Settings.Save()
End If
Code: Select all
LoadBackgroundImage(Me, Button2.Tag, ListBox1, ListBox2)
My.Settings.DefaultSkin = Button2.Tag
My.Settings.Save()