Page 1 of 2

A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 1:55 pm
by Scottie1972
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
Code: Select all
<?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>
Now after all that, Add a new item to your project. ( Add > Module ) name it what ever you want.

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
If My.Settings.UseSkin = True Then
            LoadBackgroundImage(Me, My.Settings.DefaultSkin, ListBox1, ListBox2)
            CheckBox1.CheckState = CheckState.Checked
        End If
Button1_Click
Code: Select all
  ListBox1.Items.Clear()
        ListBox2.Items.Clear()
        PictureBox1.Image = Nothing
        Button2.Tag = ""
        LoadSkinList(ListBox1)
ListBox1_SelectedIndexChanged
Code: Select all
LoadSkinData(ListBox2, ListBox1.SelectedItem & ".xml", PictureBox1)
        Button2.Tag = ListBox1.SelectedItem & ".xml"
CheckBox1_Click
Code: Select all
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
Button2_Click
Code: Select all
LoadBackgroundImage(Me, Button2.Tag, ListBox1, ListBox2)
        My.Settings.DefaultSkin = Button2.Tag
        My.Settings.Save()
085214.png
085233.png
[DEMO] - Skinning Project.rar
[SOURCE] - Skinning Project.rar

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 2:13 pm
by MrAksel
Great tutorial dude! I have used XML to create skins for Notepad++, it's the same way. You make a new XML document make a folder with some images ANd hen in your XML file you can make nodes for mouse_down, mouse_hover and normal

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 2:15 pm
by Scottie1972
MrAksel
Yes the amount of data for your skin is unlimited. You could write a function for just about anything.

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:10 pm
by hungryhounduk
That looks Impressive Scottie :)
I will at some point try and create that from your Tutorial..

Nice

Chris

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:15 pm
by Scottie1972
I am glad you guys are liking my little sample apps.
I hope to have more but like all of you, I have quit abit of project to go through and check.
I have about 10 more little sample apps that I can upload.
Really just little tool type to use as an example on how to use or do different functions with different controls and using different types of data formats (xml, ini, txt, etc...)

I hope that some of them can be useful to someone.

Scottie1972

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:17 pm
by Kieken72
Scottie1972, Good tut scottie!
Gonna use this definitly !

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:50 pm
by hungryhounduk
Hey Scottie

I just did the Tutorial
and i came up with this error, I followed your Tut, and i have the xml file as you can see by the pics below ;) but its looking for it :?

Image

Can you shed some light on the error

Chris

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:52 pm
by Kieken72
Could u upload the project?, Maybe I can fix it :)

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:54 pm
by Codex
hungryhounduk wrote:
Hey Scottie

I just did the Tutorial
and i came up with this error, I followed your Tut, and i have the xml file as you can see by the pics below ;) but its looking for it :?

Image

Can you shed some light on the error

Chris
Maybe use upload to my.resources ?

Re: A Simple Skinning Tutorial for VB.NET (Using XML)

Posted: Wed Mar 09, 2011 4:59 pm
by Scottie1972
hungryhounduk wrote:
Hey Scottie

I just did the Tutorial
and i came up with this error, I followed your Tut, and i have the xml file as you can see by the pics below ;) but its looking for it :?

Image

Can you shed some light on the error

Chris

From the looks of the error.
It is looking for a file in the wrong path.
or
Something in the "Settings" is incorrect.

It is kind of hard to see the error message, it is very fuzzy and small.

"SkinDIR" should be Application.StartPath & "\skins\"
"skin" should be My.Settings.defaultSkin

Plus, any images should be placed in the skins/SKIN_FOLDER/*.imagefile folder
Application.StartUpPath & "\skins\SKIN_FOLDER\*.png,.jpg,gif etc ....

By the look or the error it can not find a file in the path that is give in the code.

see if that helps.