Many times when developing a desktop application we often find the need to provide the user with the ability to select a directory or upload or select a file. The often used technique is to simply use a file-dialogue pop-up form to enable the user such a selection. Since WPF does not have such a control available in the standard control-set that is implemented when you install Visual Studio, we resort to using a Windows Form control or write our own.
In any event pop-ups for a user can be annoying to a user that may want to select a number of files in succession for a specific purpose. The current project I am working on has the need for a user selecting multiple files at a time from a file-explorer so that each can be uploaded into a database.
Instead of using a corresponding Windows Forms control, I decided to develop my own file-explorer that can be embedded into a page that will be used for upload processing. This tool allows for directory and file selection and provides an expected standard interface as shown below…
Though the image above does not show any icons associated with the file types, the source code that is provided demonstrates how to do this and currently uses icons to highlight PDF and standard text files.
The Syncfusion Treeview Control
This project uses the WPF Syncfusion TreeViewAdv control, which for individual developers is completely free to use as is their entire control suite for all supported development environments. All a developer has to do is go to the Syncfusion site and register to obtain a freely available Community License. Simply go to the following link and scroll down to the following section…
https://www.syncfusion.com/downloads
The Syncfusion Treeview control is slightly easier to use than the one that comes with the Microsoft standard WPF control set.
The Syncfusion company also provides extensive documentation in PDF format on the use of each of their control suites. Don’t leave home without it… In other words, make sure you download the corresponding PDF as well since it has a lot of valuable information for the suite of controls being used.
Display Layout
When you review the code, you will notice that there are no heights or widths set so that the layout will respond in a dynamic manner to the size of the display the application interface is being presented on.
Treeview Display Control
You will also note in the source code that there is manipulation of the Treeview’s, TreeviewItem control header and tag. This is done to provide a simplistic representation of a sub-directory or file when displayed in the interface of the control. Otherwise, each TreeviewItem control’s header would display the entire path. As a result, the entire path of the TreeviewItem control is stored in that control’s “Tag” property. When required for purposes of data gathering, the TreeviewItem control’s header is refilled with the entire path and then removed once again after the data retrieval process has been completed.
Treeview Item Control Icons
The source code also provides for inserting TreeviewItem control icons for each type of item displayed. Currently two are used for file items for demonstration purposes. Several additional icons are provided for this purpose but not all are included. If it is preferred not to use icons for the files, simply comment out the section of c ode that inserts them.
For sub-directories, a standard “folder” icon is used. This icon can be changed if desired to reflect a closed folder or an expanded one. However, the source code only provides for a single folder icon.
Treeview Item Control Tag Data
As previously mentioned the TreeviewItem control’s “Tag” property is used to store full path data for each individual item. However, preceding the path data is an id code, which identifies the type of data a Treeview Item control is supporting. Thus all “Tag” properties have the following format…
Id-code;full-path
The id-code can be one of the following types…
Final Notes
This project was developed to support directory\file processes in an application I currently developing. I designed this style of file-explorer to b e as generic as possible. And so far, it appears to be working quite nicely. No doubt, other developers who may want to use my source code will want to make their own modifications, which they are free to do.
One area of potential modification would be the need for two single clicks to load and and expand a sub-directory’s items. Currently, the Syncfusion Treeview control is set up so that first the sub-directory data (and file data) will be loaded for a selected sub-directory item. Then by clicking on the left-most carrot on the item selected and which just had its data loaded, the Treeview control will expand itself to show all of its loaded data. Developers would preferably want to make these processes function against a single click instead of two. However, if a sub-directory is empty of any stored data, no such carrot will appear against a selected Treeview item and thus no expansion can take place. This should be kept in mind if deciding to modify the code in this respect.
The complete project can be downloaded from the following link…
https://1drv.ms/u/s!AnW5gyh0E3V-iBvIadS1hBN2gSSw
If you decide to use my source code, I would appreciate any comments you would like to make. Simply make them using the Contact page on this site.