File System UI Tutorial

Introduction

The Blayd File System UI library contains components and controls that provide a user interface representation of file system devices, folders and files. Developers can use the components and controls in their Windows Forms applications to easily display file system information to the user. The library is designed to make it easy for developers to display file system information when creating user interfaces for applications such as file backup and archive, file explorers and custom file open or save as dialogs.

This tutorial steps through some of the common task relating to the use of the components and controls contained in the Blayd File System UI library. To follow the article you will need to have a copy of the Blayd File System UI library installed. If you do not already have a copy of the Blayd File System UI library you can download an evaluation version which will be fine for the tasks we are going to step through in this article.

To use the components and controls in your project you will need to add a reference to the Blayd File System UI library. By default the Blayd File System UI library is installed in the following location:

%SystemDrive%\Program Files\Blayd Software\Blayd File System UI\<version>

The library assembly is named: BlaydFileSystemUI.dll.

Initializing the FileList Component at Design Time

The FileList data source component is intended, primarily, to be used to supply data for one of the user interface controls. The standard component designer can be used to set up and initialize the FileList component and it can then be data bound to the FileListView control at design time. Therefore, the FileList component can be set up and data bound without writing any code and once data bound the component is "driven" by the code in the user interface control.

Add the FileList component to your Form by dragging it from the toolbox and dropping it on the Form. The development environment will add the FileList to the component tray where you can select it to view its properties in the Properties Window.

Note. When data binding the FileList component to a user interface control or linking it to another data source component you do not have to set the FolderPath property at design time.

The key properties that require setting in the designer are as follows:

If you are setting both the AssociatedImages and AssociatedLargeImages properties you should add your stock images to both image lists. You also need to ensure that a small and a large version of each stock image is added to its relevant list in the same position and it makes sense to use the same key value. For example, if you add a folder image to the small image list at index position zero with a key value of "_folder", you should also add a folder image to the large image list at index position zero and assign a key value of "_folder".

Initializing the FolderList Component at Design Time

The FolderList data source component is intended, primarily, to be used to supply data for one of the user interface controls. The standard component designer can be used to set up and initialize the FolderList component and it can then be data bound to either the FolderDropDownList or the FolderTreeView control at design time. Therefore, the FolderList component can be set up and data bound without writing any code and once data bound the component is "driven" by the code in the user interface control.

Add the FolderList component to your Form by dragging it from the toolbox and dropping it on the Form. The development environment will add the FolderList to the component tray where you can select it to view its properties in the Properties Window.

When data binding the FolderList component to a user interface control you can specify either an image index or an image key to associate each FolderNode with an unselected and selected image in the ImageList provided by the user interface control, for example, the FolderTreeView control can have an image list specified in its ImageList property. When the FolderList component loads file system objects at run time it determines the object's type e.g. computer, the type of drive or folder and assigns the relevant image index or image key value from its own (relevant) property to the ImageIndex and SelectedImageIndex or the ImageKey and SelectedImageKey properties of each FolderNode instance in the list. The node and each of the various device image index and image key property pairs are mutually exclusive, you can set one but not both, therefore you can specify an index or a key.

When adding your images to the user interface control's ImageList you should add an image for an unselected folder at index position zero and an image for a selected or open folder at index position one. Adding the folder images at these positions defines them as the default unselected and selected images, the other images can be added at any position within the ImageList.

The key properties that require setting in the designer are as follows:

Data Binding the FileListView Control

The FileListView control is a specialised version of the standard ListView control that can be data bound to the FileList data source component to list the file system objects contained in a single file system folder. The FileListView control can be used on its own but is more typically used in conjunction with another control, for example, you can pair the FileListView control with either the FolderDropDownList control or the FolderTreeView control to provide a user interface for browsing or selecting files.

It is assumed that you currently have the Form that is to contain the FileListView control open in the designer. To data bind the FileListView control proceed as follows:

If you are using the FileListView control on its own you will have to instruct the FileList data source component to switch folders from code. You can achieve this either by setting the FolderPath property or by calling the SelectFolder or the SelectFolderPath method.

If you are using the FileListView control in conjunction with another control and have linked the relevant data sources, the FileListView control display will update automatically when the associated control switches folder.

The FileListView control display will update automatically, whether it is linked or not, when the user double clicks one of the sub-folders displayed in the list.

Data Binding the FolderTreeView Control

The FolderTreeView control can be data bound to any component that implements the IHierarchicalDataSource interface. You can, for example, use the DataSource property to data bind the FolderTreeView control to the FolderList data source component and automatically display the file system hierarchy provided by the FolderList.

It is assumed that you currently have the Form that is to contain the FolderTreeView control open in the designer. To data bind the FolderTreeView control proceed as follows:

The FolderTreeView control can be used on its own, however, typically, the control is used in conjunction with another control, such as the FileListView control to provide a Windows (File) Explorer type of user interface. You can use the data source linking provided by the FolderList and FileList components to link the FolderTreeView control to the FileListView control.

Linking and Synchronizing the FolderList and FileList Components

The FileList data source component can be linked to the FolderList data source component at design time. When the two data source components are linked together each component raises events to notify the other of changes to its list. Because both the FolderList and FileList component also raise notification events for data bound user interface controls, linking the data sources does, in effect, link and synchronize the data bound user interface controls.

It is assumed that you currently have the Form that is to contain the FolderList and FileList components open in the designer. To link and synchronize the data source components proceed as follows:

Having linked to two data sources you can now data bind the relevant user interface control to each of the components.

Using the FolderList Component from Code

The FolderList data source component lists file system folders in a hierarchical list descending from a single root folder or node, each file system folder, including the root folder, is represented in the list by an instance of the FolderNode class. As well as listing the contents of physical folders the FolderList component can list the contents of the "virtual" Computer (My Computer on Windows XP) folder, therefore, the items in the list may be devices such as disk drives or sub-folders. When listing the contents of the Computer folder, the list will contain only devices, however, when listing the contents of a physical folder, the list will contain sub-folders.

Note. If you are intending to use any of the Blayd File System UI components in a code only project, you need to ensure that your project contains either an embedded evaluation license or a valid license key, otherwise the library will throw a LicenseException when your code creates an instance of, for example, the FolderList data source component. When using a licensed component or control in a designer, the development environment will automatically create the required licenses.licx file, however, when using a component solely from code you need to prompt the development environment to create the licenses.licx file or create it manually. The easiest way to create the license file is to drag the FolderList component from the toolbox onto a Form in your project, once the license file has been created you can delete the FolderList component from the component designer.

The sample code below is contained in a Form with a single Button named: buttonFolderList, the button's Click event handler creates an instance of the FolderList component, initializes the instance and then calls the helper methods to display the contents of the machine's Computer folder, the contents of the system drive and all of the sub-folders of the "Program Files" folder.

FolderList Component Sample Code

private void ListDevices(ReadOnlyFolderNodeCollection items)
{
   foreach (FolderNode item in items)
   {
      if (item.NodeType == FolderNodeType.Drive)
      {
         Console.WriteLine("  Device {0}", item.Name);
         Console.WriteLine("    Display Name = {0}", item.DisplayName);
      }
   }
}
private void ListSubfolders(ReadOnlyFolderNodeCollection items)
{
   foreach (FolderNode item in items)
   {
      if (item.LoadPending)
      {
         item.LoadSubFolders();
      }
      Console.WriteLine("  Folder {0}, Number of sub-folders = {1}", item.Name,
                        item.Folders.Count);
   }
}
private void buttonFolderList_Click(object sender, EventArgs e)
{
   FolderList dataSource = new FolderList();
   // List the machine's devices...
   dataSource.RootNodeType = FolderNodeType.Computer;
   FolderNode node = dataSource.GetRootNode();
   Console.WriteLine("Contents of {0}", node.FolderPath);
   ListDevices(node.Folders);

   // List the contents of the system drive...
   dataSource.RootNodeType = FolderNodeType.Drive;
   dataSource.RootNodeName = FolderList.RootSystem;
   node = dataSource.GetRootNode();
   Console.WriteLine("Contents of {0}", node.FolderPath);
   ListSubfolders(node.Folders);

   // List the contents of the Program Files folder...
   FolderNode programFiles = node.FindSubFolder("Program Files");
   if (programFiles != null)
   {
      Console.WriteLine("Contents of {0}", programFiles.FolderPath);
      ListSubfolders(programFiles.Folders);
   }
}

Conclusion

Blayd Software's File System UI component and control library is designed to ease the burden of loading and displaying file system data. By data binding the specialized tree view, combo box and list view controls to the data source components a developer can create a functioning user interface without writing any code. The library essentially provides a read only view of file system devices, folders and files. However, the events implemented in the components and controls do allow the developer to write code to react to user initiated actions to, for example, provide any necessary underlying file processing such as file copy, move, delete, etc. The demonstration project that ships with the File System UI library includes a fully functional file explorer created using the FolderList and FileList data source components and the FolderTreeView and FileListView controls. The explorer demonstrates how to implement folder and file copy, move and delete and also how to implement folder and file drag and drop operations using the File System UI components and controls.