Breadcrumbs

[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

[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

[Scottie1972]

MrAksel
Yes the amount of data for your skin is unlimited. You could write a function for just about anything.

[hungryhounduk]

That looks Impressive Scottie
I will at some point try and create that from your Tutorial..

Nice

Chris

[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

[Kieken72]

Scottie1972, Good tut scottie!
Gonna use this definitly !

[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 :?



Can you shed some light on the error

Chris

[Kieken72]

Could u upload the project?, Maybe I can fix it

[Codex]

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 :?



Can you shed some light on the error

Chris

Maybe use upload to my.resources ?

[Scottie1972]

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 :?



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.