[motcom]

How to Design a basic Windows Explorer

We will cover the following Items:

- TreeView and Tree Nodes
- Getting File and Folder Information
- ImageList Control
- ListView Control

In this tutorial we will need 4 Images. These images are included in the Attachment.

Let's get started.

Startup Visual Studio (2005 or 2008), Create a New Project and Select "Windows Forms Application".

Once you project is loaded, you should see a blank form. Rename the form to "FormExplorer".

Set the "width" of the Form to 800 and the "height" to 640.

The Image List(s)

We will be using the Image List for showing the Files and Folders as Images. In my Attachment I added 4 Images.
2 For the Folders and 2 for the Files.

The “TreeView” will use Small Ions and the “ListView” Small and Large Icons, thus each will have 2.

Now add an “ImageList” to the Form and name it "imgSmall".

Make sure the “ImageSize” is 16 wide, 16 high.

Set the “ColorDepth” to "Depth32Bit" so they will look nicely.

Next we will have to add some Images. So add the images as follows.
(You can add your own or use the ones I included in the Attachment)

Image 0 = "document_16.png"
Image 1 = "folder_16.png"

NOTE: Make sure the image for the documents are first then the image for the Folders, we will reference them by their Index number and not the name.

(To add these images, click on the "..." Button on the right hand side in the "Properties" window next to "Images" for the Image List and click "Add", browse to the image and click ok.)

Now add another “ImageList” to the Form and name it "imgLarge"

Make sure the “ImageSize” is 32 wide, 32 high.

Set the “ColorDepth” to "Depth32Bit" so they will look nicely.

Next we will have to add some Images. So add the images as follows.
(You can add your own or use the ones I included in the Attachment)

Image 0 = "document_32.png"
Image 1 = "folder_32.png"

Again, make sure the image for the documents are first then the image for the Folders.

The Tree View

Now add a Label named "lblFoders" to the Top-Left on your Form and Set the "Text" Property to "Folders:"

Next, add a "TreeView" just underneath "lblFolders"

Name the Name Property of the "Treeview" to "treeFolders".

Set the "width" of the Treeview to 264 and the height to 569.

It should fit more or less nicely to the left of the Form.

Now Find the "ImageList" Property of the Tree View and set it to "imgSmall".

Find the "ImageIndex" property and set it to "1".

(This is for the "Folders" in our Image List, which is the second one but since the index starts at 0, we want this property to be 1)

Find the "SelectedImageIndex" Property and set it also to "1".

The List View

Now add a "ListView" to the right of the "TreeView" and size it so it fills the rest of the form.

Rename the "ListView" to "lstDirectoryInfo"

Click on the "Groups" Property of the "ListView" and add the following Groups:

The groups are Indexed Zero Based so they start with 0.

Group 0:
-Header = "Folders"
-Name = "grpFolders"

Gorup 1:
-Header = "Files"
-Name = "grpFiles"

Next set the "Sorting" Property of the "ListView" to "Ascending".

Make sure the "View" Property of the "ListView" is set to "LargeIcons".

Now find the "SmallImageList" property and set it to "imgSmall".

Find the "LargeImageList" and set it to "imgLarge"

The Code

We will use the "FormLoad" event, the TreeView's "BeforeExpand" event and the TreeView's
"NodeMouseClick" event.

So let’s start with FormLoad

The Idea we are using is to Load the Drives as Top Nodes and the first level of Sub Directories.

We will use "My.Computer.FileSystem.Drives" for finding the Drives on the local computer and
"My.Computer.FileSystem.GetDirectories" to get the first level of Sub Directories in each Drive.

Each TreeNode has a "Key", "Text" and "Tag" Property. The Key is used in our “for” loop to set the "Tag" to the Full Path of the Folder in our Tree Node.

We will use the "Tag" property to get the Full Path the User has selected Later On

If you look at the comments in the code you will see what I am doing.

Private Sub FormExplorer_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
		'Counter for our Physical Drives
		Dim x As Integer
		'Start looping through the Drives
		For x = 0 To My.Computer.FileSystem.Drives.Count - 1
			'make sure the drive is ready
			If My.Computer.FileSystem.Drives(x).IsReady = True Then
				'add the Drive to the Tree Node use the Drive Name as the "Key" and "Text"
				treeFolders.Nodes.Add(My.Computer.FileSystem.Drives(x).Name, My.Computer.FileSystem.Drives(x).Name)
				'set the Tag Property to the Drive Name for Identification Later On
				treeFolders.Nodes(My.Computer.FileSystem.Drives(x).Name).Tag = My.Computer.FileSystem.Drives(x).Name
				'add the first level of sub directories to the TreeView
				For Each SubDirectory As String In My.Computer.FileSystem.GetDirectories(My.Computer.FileSystem.Drives(x).Name)
					'The Mid Function is used so our Node does not include something like
					'"c:\Windows" it should rather read something like "Windows".
					'However the Key (in our case the first part of the Add() will
					'have the whole path. This will be used later for Finding the 
					'Sub Directories)
					treeFolders.Nodes(x).Nodes.Add(SubDirectory, Mid(SubDirectory, 4))
					'Here we add the Whole path to the Tag Property for Identification
					'later on
					treeFolders.Nodes(x).Nodes(SubDirectory).Tag = SubDirectory
				Next
			End If
		Next
	End Sub

If you run your application now, you should see your Drive(s) in the tree Node and the First Level of Sub Directories.

Note that you cannot browse further down. Thus we need to use the "BeforeExpand" event of the TreeView to Populate the Sub Directories.

(If you used my Images, the Folders would be blue)

The TreeView's "BeforeExpand"

Private Sub treeFolders_BeforeExpand(ByVal sender As Object, ByVal e As System.Windows.Forms.TreeViewCancelEventArgs) Handles treeFolders.BeforeExpand
		'using the System.IO.DirectoryInfo for getting the Sub Directories in our
		'current Node
		Dim MyTopDirectoryInfo As System.IO.DirectoryInfo
		'Clear the Sub Directories first
		e.Node.Nodes.Clear()
		'Now we loop through our directories as "TopDirectory" and Get it's Name and Full Path with
		'GetDirectoryInfo() and reading the "Tag" property
		For Each TopDirectory As String In My.Computer.FileSystem.GetDirectories(e.Node.Tag)
			MyTopDirectoryInfo = My.Computer.FileSystem.GetDirectoryInfo(TopDirectory)
			'adding the Node
			e.Node.Nodes.Add(TopDirectory, MyTopDirectoryInfo.Name)
			'setting its tag property to the full path
			e.Node.Nodes(TopDirectory).Tag = MyTopDirectoryInfo.FullName
			'repeat the process for the sub directories
			For Each SubDirectory As String In My.Computer.FileSystem.GetDirectories(e.Node.Nodes(TopDirectory).Tag)
				MyTopDirectoryInfo = My.Computer.FileSystem.GetDirectoryInfo(SubDirectory)
				'add the node
				e.Node.Nodes(TopDirectory).Nodes.Add(SubDirectory, MyTopDirectoryInfo.Name)
				'settting the Tag of the Sub Directory to the full path
				e.Node.Nodes(TopDirectory).Nodes(SubDirectory).Tag = MyTopDirectoryInfo.FullName
			Next
		Next

	End Sub

This is a little bit different to the "Form Load" event.

We use the "GetDirectoryInfo" for getting the name like "windows" and not "C:\Windows"; this will be the "Text" of our Node. But since we need to have little bit more info about our node, we set the "Tag" to something like "C:\Windows".

As you can see the "Tag" is Unique in our whole Tree View.

Now if someone clicks on any Tree Node, we can read whatever is in the Tag and we can start to load our ListView.
This we do in the TreeView's "NodeMouseClick" event.

Here is the code.

Private Sub treeFolders_NodeMouseClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.TreeNodeMouseClickEventArgs) Handles treeFolders.NodeMouseClick
		'find out wich button was clicked
		If e.Button = Windows.Forms.MouseButtons.Left Then
			'Get the Directory Info and File Info
			Dim MyTopDirectoryInfo As System.IO.DirectoryInfo
			Dim MyFileInfo As System.IO.FileInfo

			'clear the ListView
			lstDirectoryInfo.Items.Clear()
			'looping through all the sub directories in the selected Directory and adding them to 
			'the listveiw
			For Each TopDirectory As String In My.Computer.FileSystem.GetDirectories(e.Node.Tag)
				MyTopDirectoryInfo = My.Computer.FileSystem.GetDirectoryInfo(TopDirectory)
				'set the "Key", "Text" and "ImageIndex" for the folder to be added
				'remember the "1" is the index in our imgSmall and imgLarge for "Folders"
				lstDirectoryInfo.Items.Add(MyTopDirectoryInfo.Name, MyTopDirectoryInfo.Name, 1)
				'set the item to the "Folders" group
				'remember the "0" is the index for the "Folders" Group
				lstDirectoryInfo.Items(MyTopDirectoryInfo.Name).Group = lstDirectoryInfo.Groups(0)
			Next
			'next we will add all the files, but first get the info for the Files in 
			'the current directory by reading the "Tag"
			For Each MyFile As String In My.Computer.FileSystem.GetFiles(e.Node.Tag)
				MyFileInfo = My.Computer.FileSystem.GetFileInfo(MyFile)
				'We are not showing hidden files but you can modify this however needed
				If MyFileInfo.Attributes.ToString.Contains(IO.FileAttributes.Hidden.ToString) Then
					'hidden files
				Else
					'add the files to the listview and set the Image Index to "0" for Files
					lstDirectoryInfo.Items.Add(MyFile, MyFile, 0)
					'our Image Index for our "Group", "Files" is 0
					lstDirectoryInfo.Items(MyFile).Group = lstDirectoryInfo.Groups(1)
				End If
				'MsgBox(MyFile & "-" & MyFileInfo.Attributes.ToString)
			Next
		End If

	End Sub

As you can see, the "Tag" is used to get the Whole Path of the Directory and using that, we can read all the information on the Sub Directories (using My.Computer.FileSystem.GetDirectoryInfo()) and all the File Information (using My.Computer.FileSystem.GetFileInfo()).

If you run your code, you should see a very basic Windows Files Explorer.

Enjoy

[clntnco]

I am going through your tutorial and when it gets to "treeFolders.Nodes(x).Nodes.Add(SubDirectory, Mid(SubDirectory, 4))" I get an error that says "Specified argument was out of the range of valid values. Parameter name: index"

I commented out this code and was able to get the list of drives to work fine, but as soon as I try to get the list of subdirectories is errors out.

[motcom]

Hi,

It works fine with me, i downloaded the project and tested it again...

have you got this line with the -1?

 For x = 0 To My.Computer.FileSystem.Drives.Count - 1

the error you are getting means you are trying to access something from a list wich is not there...

if you do this, you would get that error

 For x = 0 To My.Computer.FileSystem.Drives.Count 

Hi,

It works fine with me, i downloaded the project and tested it again...

have you got this line with the -1?

 For x = 0 To My.Computer.FileSystem.Drives.Count - 1

the error you are getting means you are trying to access something from a list wich is not there...

if you do this, you would get that error

 For x = 0 To My.Computer.FileSystem.Drives.Count 

EDIT, DIC SEEMS TO DOUBLE POST MY REPLY....

This post has been edited by motcom: 19 May 2010 - 12:34 AM

[guggle]

I tried this tutorial and got the same problem as clntnco. Then I cut and paste all the code from this forum, and got the same problem again. Finally, I downloaded the attachment, tried to run it, and got the same error for a third time. I think the only difference is that i am using VB.NET EE 2010.

If I comment out the line that appears to be giving the error, I get more.

The lines

For Each TopDirectory As String In My.Computer.FileSystem.GetDirectories(e.Node.Tag)

and

For Each MyFile As String In My.Computer.FileSystem.GetFiles(e.Node.Tag)

both generate the blue squiggly line under 'e.Node' and the error is 'Node' is not a member of 'System.Windows.Forms.MouseEventArgs'.


Cheers, Michael.

This post has been edited by guggle: 28 May 2010 - 05:04 AM

[motcom]

I will revise and let you know..

[igerli.com]

I dont find the atachment

[baseballfanky]

How do you invoke BeforeExpand subroutine?

BTW, I couldnt find the attachment either

I had problems getting this to work. I had to change the code from this:

 treeFolders.Nodes(x).Nodes.Add(SubDirectory, Mid(SubDirectory, 4))

to this:

treeFolders.Nodes.Nodes.Add(SubDirectory, Mid(SubDirectory, 4))

[baseballfanky]

igerli.com, on 16 April 2011 - 06:08 AM, said:

I dont find the atachment

ok i figured it out. The problem is when you dont have a drive ready, the subscript(x) gets incremented but you dont actually add something to the treeview collection therefore bumping up the index(x) and it gets out of sync...solution, setup another index(y) and this fixes it, see below

Private Sub FormExplorer_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
		'Counter for our Physical Drives
		Dim x As Integer, y as Integer = 0
		'Start looping through the Drives
		For x = 0 To My.Computer.FileSystem.Drives.Count - 1
			'make sure the drive is ready
			If My.Computer.FileSystem.Drives(x).IsReady = True Then
				'add the Drive to the Tree Node use the Drive Name as the "Key" and "Text"
				treeFolders.Nodes.Add(My.Computer.FileSystem.Drives(x).Name, My.Computer.FileSystem.Drives(x).Name)
				'set the Tag Property to the Drive Name for Identification Later On
				treeFolders.Nodes(My.Computer.FileSystem.Drives(x).Name).Tag = My.Computer.FileSystem.Drives(x).Name
				'add the first level of sub directories to the TreeView
				For Each SubDirectory As String In My.Computer.FileSystem.GetDirectories(My.Computer.FileSystem.Drives(x).Name)
					'The Mid Function is used so our Node does not include something like
					'"c:\Windows" it should rather read something like "Windows".
					'However the Key (in our case the first part of the Add() will
					'have the whole path. This will be used later for Finding the 
					'Sub Directories)
					treeFolders.Nodes(y).Nodes.Add(SubDirectory, Mid(SubDirectory, 4))
					'Here we add the Whole path to the Tag Property for Identification
					'later on
					treeFolders.Nodes(y).Nodes(SubDirectory).Tag = SubDirectory
				Next
                                y += 1
			End If
		Next
	End Sub

[rphbin]

Does anybody knows how to have not this message: "UnauthorizedAccessException" at the line:
"For Each SubDirectory As String In My.Computer.FileSystem.GetDirectories(e.Node.Nodes(TopDirectory).Tag)"

[rphbin]

rphbin, on 30 January 2012 - 02:36 PM, said:

Does anybody knows how to have not this message: "UnauthorizedAccessException" at the line:
"For Each SubDirectory As String In My.Computer.FileSystem.GetDirectories(e.Node.Nodes(TopDirectory).Tag)"

O.K. For that problem, the answer could have been to simply use Try Catch (UnauthorizedAccessException)...

[ItsmeYudist]

I Didn't Find Any Attachment...???