File Explorer is a generalized way of referring to an application that lets end users browse and edit directory structures. The best known File Explorer is Microsoft Windows Explorer.
The built-in File Explorer in Pocket PC 2002 is not very intuitive and does not offer a way to view the directory structure in a hierarchical fashion (see Figure 1). In this article, the second of a three-part series on the.NET Compact Framework), I’ll show you how to use the Compact Framework’s TreeView control to develop an enhanced File Explorer?one that works much more like the Windows Explorer on your desktop Windows OS.
To get started, launch Visual Studio .NET 2003 and create a new Smart Device Application project. Populate the default Form1 with the TreeView Control. Also add the ContextMenu and ImageList controls to your project (see Figure 2). The ContextMenu control allows you to display a context menu when you tap (and hold) the stylus on your Pocket PC. The ImageList control acts as a container for images. I will use the ImageList control to store the icons (for open and closed folders) used by the TreeView control.
You need to associate the ContextMenu control with the TreeView control by specifying ContextMenu1 in the ContextMenu property of the TreeView control. This causes the context menu to be displayed when the TreeView control is tapped (and held for a moment).
The ImageList control displays the folders using icons when the TreeView control is expanded. You need to associate the ImageList control with the TreeView control by specifying ImageList1 in the ImageList property of the TreeView control.
Add three icons to the Images collection in the ImageList control: open folder, closed folder, and ordinary file. You can see the three icons in Figure 3.
Now your form is done and you’re ready to add the code to make it all work.
Coding the Controls
First, import the System.IO namespace. This namespace is required for methods that I will use later to perform directory operations:
Next, define the three constants for referring to the three images in the ImageList control:
' Constants for the icon images Const icoOpen = 0 Const icoClose = 1 Const icoFile = 2
And the variables required:
Dim copy As Boolean = True ' whether it is a copy operation Dim fileName As String ' filename of file to be copied or cut Dim pathName As String ' full pathname of file to be copied or cut
When the form is loaded, display a node representing the root directory:
Private Sub Form1_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load Dim node As New TreeNode Try ' ---create the root node--- node.ImageIndex = icoClose node.SelectedImageIndex = icoOpen node.Text = "" TreeView1.Nodes.Add(node) ' ---Add the dummy node--- node.Nodes.Add("") Catch err As Exception MsgBox(err.ToString) End Try End Sub
Note that I add a dummy node after each node is created. This is to ensure that the current node can be expanded to reveal subdirectories (even if there are none). This is shown in Figure 4.
When a node is expanded (by clicking on the “+” symbol), the TreeView1_BeforeExpand event is called. You have to write code that checks to see if the current node is a leaf node (meaning it is not a directory, but a file). If it is a leaf node, exit the method. Otherwise you need to display its sub-directories (if any).
You should also change the current node icon to “open” if the node is selected and “closed” if the node is not selected Here is the code for expanding folders and displaying the proper icon at each node:
Private Sub TreeView1_BeforeExpand _ (ByVal sender As Object, _ ByVal e As System.Windows.Forms.TreeViewCancelEventArgs) _ Handles TreeView1.BeforeExpand ' ---if leaf node then exit--- If e.Node.ImageIndex = icoFile Then Return ' ---remove the dummy node and display ' the subdirectories and files--- Try e.Node.Nodes.Clear() ' clears all the nodes and... displayChildNodes(e.Node) ' create the nodes again Catch err As Exception MsgBox(err.ToString) End Try ' ---change the icon for this node to open--- If e.Node.GetNodeCount(False) > 0 Then e.Node.ImageIndex = icoClose e.Node.SelectedImageIndex = icoOpen End If End Sub
The displayChildNodes() method displays all the files and subdirectories within the current directory in the TreeView control:
Private Sub displayChildNodes _ (ByVal parentNode As System.Windows.Forms.TreeNode) Dim FS As New DirectoryInfo(stripExtraSlash _ (parentNode.FullPath)) Dim dirInfo As DirectoryInfo Dim fileInfo As FileInfo Try ' ---displays all dirs--- For Each dirInfo In FS.GetDirectories() ' ---create a new node to be added--- Dim node As New TreeNode node.Text = dirInfo.Name ' name of file or dir node.ImageIndex = icoClose node.SelectedImageIndex = icoOpen parentNode.Nodes.Add(node) ' ---add the dummy node--- node.Nodes.Add("") Next Catch err As Exception MsgBox(err.ToString) End Try Try ' --display all files--- For Each fileInfo In FS.GetFiles() ' ---create a new node to be added--- Dim node As New TreeNode Node.Text = fileInfo.Name Node.ImageIndex = icoFile Node.SelectedImageIndex = icoFile parentNode.Nodes.Add(Node) Next Catch err As Exception MsgBox(err.ToString) End Try End Sub
Adding User Functions
The pathname used in Windows CE is not the same as that in Windows. In Windows CE, the root directory starts with a and subsequent subdirectories are separated by a . For example, Program Files indicates that the root contains a subdirectory named Program Files. The FullPath property of the Node object returns the full path name of a node, starting from the root node. The path is delimited by the character.
There is a minor problem you have compensate for. Because the root node is indicated by a , a typical path will contain an extra , for example \Program Files. Hence there is a need to remove the extra in the path name using the stripExtraSlash() method:
Public Function stripExtraSlash(ByVal str As String) As String ' ---strip away the extra "" for ' subdirectories. e.g. \My documents Dim path As String If str.Length > 1 And (Mid(str, 1, 1) = "") Then path = Mid(str, 2, str.Length - 1) Else path = str End If Return path End Function
When the user taps and holds an item with the stylus, which is equivalent to a right-click with a mouse, the context menu will be shown. You need to program a way for the File Explorer to handle common user functions such as Copy and Cut. If the user chooses Copy or Cut, the filename as well as the path of the item to be copied will be saved. When using cut, the selected node will also be removed:
Private Sub mnuCopy_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles mnuCopy.Click ' ---copy a file--- pathName = stripExtraSlash(TreeView1.SelectedNode.FullPath) fileName = TreeView1.SelectedNode.Text copy = True mnuPaste.Enabled = True End Sub Private Sub mnuCut_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles mnuCut.Click ' ---cut a file--- pathName = stripExtraSlash(TreeView1.SelectedNode.FullPath) fileName = TreeView1.SelectedNode.Text copy = False mnuPaste.Enabled = True ' ---remove the node--- TreeView1.SelectedNode.Remove() End Sub
To delete an item from the Pocket PC, use the File.Delete() method from the System.IO namespace. You must also remove the node representing the item to be deleted:
Private Sub mnuDelete_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles mnuDelete.Click ' ---delete a file--- File.Delete(stripExtraSlash(TreeView1.SelectedNode.FullPath)) TreeView1.SelectedNode.Remove() End Sub
To allow the user to paste an item that has just been copied or cut, use the File.Copy() method. You also need to add a new node to the TreeView control:
Private Sub mnuPaste_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles mnuPaste.Click ' ---paste a file--- File.Copy(pathName, stripExtraSlash _ (TreeView1.SelectedNode.FullPath) & _ "" & fileName, True) ' ---add the new node to the tree--- Dim node As New System.Windows.Forms.TreeNode node.Text = fileName node.ImageIndex = icoFile node.SelectedImageIndex = icoFile TreeView1.SelectedNode.Nodes.Add(node) ' ---if cut operation, then delete file--- If Not copy Then File.Delete(pathName) End If mnuPaste.Enabled = False End Sub
With that, you have a simply but fully functional mobile File Explorer that should look and feel like Windows Explorer on a desktop. You’ve created a TreeView control to allow the user to browse the file structure hierarchically, including the display of icons; you’ve allowed for expanding and collapsing directories; as well as supported copy, cut, and paste commands using methods from the System.IO namespace.
To debug the application, press F5. The completed application will look like Figure 5.
In the third and final article in this series, I’ll show you how to create controls during runtime. You will also learn how to develop .NET CF applications without using Visual Studio .NET.