Helpful Guide

Custom File Dialogs with ShellBrowser

Create your own custom File Dialogs with our ShellBrowser Delphi Components

Blog Author Sabine Weber


Developer Components
Create Previews and Thumbnails with ShellBrowser
Published on 11.06.2021

No doubt, the VCL FileDialogs offer a multitude of configuration options that cover most standard use cases. But sometimes this might not be enough and you want to create a specialized custom dialog with a different layout, additional controls (e.g. for import/export dialogs) or different looks.

Rebuilding the dialog from scratch, including all the file system related components, will however in most cases not be a feasible alternative. At this point, the ShellBrowser Components can fill the gap quite comfortably: All the Win32 shell related functionality is wrapped into easy-to-use components, so you can concentrate on your special use case.

After installation, you will find the ShellBrowser components in the “JAM Software” section of the component palette.

The Windows Explorer style

The quickest way is using a “TJamExplorerBrowser” component as the main building block of the dialog. Similar to the FileDialog components of VCL, ExplorerBrowser is built around a Windows COM object, representing a configurable file system browser which shares most parts with the Windows File Explorer.

Using the “VisiblePanes” property, you can configure what parts of the control you want to show (the folder view on the right side cannot be hidden).

Other design time options for the control include setting the path or “Special Folder” - a collection of named locations, including file system folders (e.g. SF_DOWNLOADS) and virtual folders (SF_DRIVES), as well as different filtering and view settings.

To make the dialog complete, we’ll add two more typical file dialog components, the “TJamOpenSaveComboBox” for the file name to be opened or saved, and the “TJamFilterCombo” for specifying file extension filters which can be applied.

Keeping controls in sync

There is no need to write code to synchronize the components! This can be done using a “TJamShellLink”. You can simply drop an instance from the component palette and assign it as the “ShellLink” property of the ShellBrowser controls that should be synchronized. Let me show you in this small example: All ShellBrowser controls on the form use the same ShellLink.

TJamShellLink synchronizes selected paths, files and filters among attached controls. The ShellLink can be used to restrict navigational access to an allowed range of folders, too.

In the example below, it will apply the filter that is set in the TJamFilterCombo to ExplorerBrowser, set the text of the “TJamOpenSaveComboBox” to the file name that is selected in ExplorerBrowser and navigate to the path that the user types in the TJamOpenSaveComboBox in ExplorerBrowser.

Using the ExplorerBrowser as the main file system component in this example has the benefit that – being a Windows control – it looks and behaves exactly like Windows Explorer. The drawback is that not all details of appearance or behavior can be accessed or modified. E.g. there is no way to filter the visible root nodes of the navigation tree; ExplorerBrowser also does not support VCL Styles or any other form of dark theme.

Even more control: TJamShellTree and TJamShellList

As an alternative approach, the ExplorerBrowser component can be replaced by various other ShellBrowser controls, such as the TJamShellList, TJamShellTree and TJamShellBreadCrumbBar. These are not based on a Windows COM object, but replicate its look and behavior as closely as possible, while being derived from standard VCL controls and inheriting their customizability. TJamShellLink is supported like described before and these controls fully support VCL styles.

So, as a conclusion, it depends on your exact requirements whether to use ExplorerBrowser or use the VCL based control set.

Whatever you decide for, a basic file dialog can be created in no time with just a few clicks.

Get compiled sample apps here.

This article was first published on the Embarcadero Blog. Check it out.


Want to always stay up to date? Subscribe to our newsletter now!

Do you like what you've just read, have new ideas or feedback? Visit our contact form and let us know your thoughts!