Published: 20 Jun 2011
By: Diptimaya Patra
Download Sample Code

Diptimaya Patra discusses the Folder Dialog in Silverlight 4.

Contents [hide]

Introduction

In Silverlight 4 we have access to dialog boxes such as Open File Dialog and Save File Dialog. But we don't have access to Folder Dialog. A folder dialog is used to help us select a path from the file system. In some project requirements we need to give a custom path to save files, for example we need to save the snapshot of a video application to a specific folder or saving log files, reports to a custom folder path that has to be given by the end user.

Creating a Silverlight 4 OOB Application

Silverlight 4 out-of-box doesn't have Folder Dialog, so we need to make a customized folder dialog which would satisfy our requirement. We would be accessing file system so we need to have a Silverlight OOB application.

Fire up Visual Studio 2010 and create a Silverlight application, name it as FolderDialogInSL4.

Apply the settings required for running the application in Out-of-Browser mode (use elevated trust when running outside the browser).

Now that we have the application is created, let's do some initial design. Here is the thing about Folder Dialog, a dialog which is popped open when Select Folder Button (it could any routed event, if you need to change it) is clicked. The dialog box should display the drives present in the file system. As soon as a drive is selected the folders inside the drive should be displayed.

Further the user could go deep down any folder to view the sub folders and could have the ability to come back. On selection of any folder the path would be displayed in a text box which ultimately would be required when we close the dialog.

So let's have a Textbox and a Button, which would look like the following.

As you see in the above image, we have a simple input, where user could type the path, or select a folder from the dialog.

As we have child windows in Silverlight, we could pop up one and do some design to fulfill the requirement. Let's add a child window to the application and name it as FolderDialog.

Let's open this window in Expression Blend 4 and design it.

Change some of the properties as follows:

The following figure displays the final design of the folder dialog.

On the left side of the design we have a TreeView control which has the a static TreeViewItem as MyComputer.

The following xaml would help you, how the image is displayed as part of header in the TreeViewItem.

As you see from the above xaml, we have changed the default header template to our customization. The important thing to note here is the TextBlock's Text property should be bound to any property if you have any, else it should be left as {Binding}.

On the right side we have a ListBox, which is also customized to give a look of as we have in windows folder dialog. The views in windows have options like Tile, List, Detail, etc... but in our case we would achieve only Tile View. The tile view should display a folder icon and at the bottom of it, should display the name of the folder.

The following styles are used for ListBox, such as ListBox and ListBoxItem.

A ListBox style is required to customize the ItemPanel template and the scrolling of its content vertically.

A ListBoxItem style is required to provide the double click capability on the selected item of the listbox.

Just a note here, in Silverlight 5 beta, we have OnMouseDownClickCount event where we could get the number of clicks made on the specific item. This is helpful for double click and more.

Finally we have a textbox which displays the selected folder, a button on the top right corner which accomplishes the Back capability, and we have Buttons such as "Select Folder", and "Cancel".

I have tried to give the folder dialog a look and feel of Windows 7, but the transparency is not achieved, which could be done by customizing the chrome of the ChildWindow.

Now let's do some coding, first of all we need to display the FolderDialog (ChildWindow) on click of the button, which is very simple to do.

Now that the folder dialog is displayed, it should display the drives on load. To achieve that, in the constructor of the FolderDialog childwindow, we need to have following.

We are going to access COM, which could be achieved using the dynamic feature of the C# 4.0, which ultimately requires the following DLL.

Include the above dll, if not included.

We need two classes which would help us achieving the requirement.

Such as:

Here is the thing, we would list the drives, with their Volume Name, and Drive Letter, and dynamically we would create TreeViewItems, the style for the drive TreeViewItem would be applied dynamically. The items would be added to the primary TreeViewitem (My Computer).

We could test what we have achieved till now.

As you have seen the above code display, we have subscribed the Selected Event of the TreeViewItem, we could make use of it when the TreeViewItem is selected.

Before that we need to have couple of methods which would help us enlist the folders dynamically.

Such as:

Both are overloaded methods, the first one uses the COM and calls the filesystem's GetFolder method with a specific drive name, which again gives the Subfolders.

Further the result of the sub folders are looped to add into a list for displaying purpose.

While we dig down a specific folder we need to have two things such as the folder selected and the current path, so that while coming back to the folder we should return correctly.

Another method GetSubFolders, which does the same as GetFolders(string path) but different while enabling the Back button. As per validation, when we are in the root level, we should not go back.

Now we can select a drive from the treeview and display the sub-folders in it.

To achieve double click on the specific listbox item we need to have a helper method, which is as follows:

Now we need to subscribe the DoubleClickHandler, as follows:

The rectangle above is the top of the stack of the ListBoxItem style, so on load of it the above DoubleClickHandler is subscribed.

Now in Folder_DoubleClick event handler we need to call the GetSubFolders method to populate the sub-folders inside a folder.

As discussed earlier, we are having two string variables to store the path, such as CurrentPath and SelectedFolderPath.

CurrentPath would store the path, for navigating back and SelectedFolderPath is to store the path selected.

In Back Button Click event handler we have done some string manipulations to get the CurrentPath correctly.

To get the selected folder path to the MainPage, we need to subscribe the Closed event of the ChildWindow. And based on the DialogResult we would take the data to the MainPage.

Now let's test the application which shows the FolderDialog.

Conclusion

We have successfully achieved displaying our own custom FolderDialog which is helpful in some project requirement to have the custom file system folder path. As mentioned earlier, the style of the Child Window could be changed to match with Windows 7 look and feel.

Hope this article helps, thanks for reading.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra

This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


Formatting Text in RadControls for WinForms Q3 2009 read more
Silverlight Live Streaming service update read more
Silverlight MVP read more
Dialogs and ViewModel - Using Tasks as a Pattern read more
RadScheduler for Silverlight learning series, part 4: So what is RecurrenceExceptionHelper? read more
Silverlight: RadChart for Export to Image read more
Migrate from Silverlight 2 to 3 read more
Mixing Silverlight and MS ASP.NET AJAX 3.5 in the same web application. read more
Getting and setting max zIndex with jQuery read more
Building a Silverlight 3 based RIA Image Magagement System (1) read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Thank you!!! Pedro Moreira 7/6/2011 6:15 AM
RE: Thank you!!! Sonu Kapoor 7/6/2011 9:52 AM
placeholder RE: RE: Thank you!!! Romio Ho 12/2/2011 5:27 AM
Excellent............ Ramesh Byna 7/7/2011 2:34 AM
placeholder Hi Romio Ho 11/29/2011 5:46 PM
Hi Romio Ho 11/29/2011 5:47 PM
placeholder Issue after deployement on server Suresh Kannan 3/7/2012 5:12 AM
Issue after deployement on server Suresh Kannan 3/7/2012 5:24 AM
placeholder RE: Issue after deployement on server Diptimaya Patra 3/7/2012 6:41 AM
alternative solution plz Suresh Kannan 3/8/2012 3:38 AM
placeholder LightSwitch and WrapPanel Tana Tana 4/8/2012 5:12 AM
Creating a new VS 2010 Project John Ng 5/17/2012 7:47 AM
placeholder Compilation Error John Ng 5/17/2012 8:38 AM
If use ip address or machine name not work silverlight Aravind Aravind 1/19/2014 10:43 PM

Please login to rate or to leave a comment.