WPF BrowsePathEdit — Select Files and Folders in Your WPF App

Many of our loyal customers have asked us to deliver a UI control to the DevExpress WPF that can address a straightforward requirement: select a file or folder and pass the result to an editor. In this post, we’ll describe how you can use the new WPF BrowsePathEdit to configure file/folder selection within your DevExpress-powered WPF app.

Our new WPF BrowsePathEdit component will be of value if you need to execute the following actions:

• Select a file/folder path for an open operation
• Select a file path for a "save as" operation

This new UI control includes the following capabilities:

• Custom icon support for files and folders (loaded from the file system)
• Drag & Drop - allows users to drag a file from the file system and obtain file path information
• A Clear button displayed next to the selected path

Usage Examples

Restrict Uploads Based on File Format

This example restricts file uploads based on a specific file format (for this example, we restrict file upload operations to PDF files). This example also displays a custom PDF icon to indicate file format limitations.

Implementation

The following code adds a file format limitation to the application and changes the icon.

To replicate this implementation, you’ll need to add IconSelector to Window Resources and specify PathIconSelector for the BrowsePathEdit.

<dx:ThemedWindow.Resources>
    <local:IconSelector x:key="iconSelector"> 
    </local:IconSelector>
</dx:ThemedWindow.Resources> 
<!---->
<dxe:BrowsePathEdit DialogType="FileOpen"
                    EditValue="{Binding SourceFilePath, UpdateSourceTrigger=PropertyChanged}"
                    DialogFilter="*.pdf|*.pdf"
                    PathIconSelector="{StaticResource iconSelector}">
</dxe:BrowsePathEdit>

In the following code, the IconSelector class specifies the path to the custom PDF icon.

public class IconSelector : IPathIconSelector {
    public ImageSource Select(string path) {
        if(File.Exists(path))
            return new BitmapImage(new Uri("pack://application:,,,/DevExpress.Images.v22.2;component/Images/Export/ExportToPDF_16x16.png"));
        return null;
    }
}

Open a Folder

Our BrowsePathEdit allows users to open and select a working folder. Users can also drag and drop a folder directly to the editor.

Implementation

To open/select folders, you’ll need to use the Folder value of the BrowsePathEdit.DialogType property and set the AllowDrop property to true (and add the ClearCommand to the BrowsePathEdit control).

<dxe:BrowsePathEdit DialogType="Folder"
                    AllowDrop="True"
                    NullText="Drop a folder here">
    <dxe:ButtonInfo GlyphKind="Cancel"
                    Command="{Binding (dxe:BaseEdit.OwnerEdit).SetNullValueCommand, RelativeSource={RelativeSource Self}}" />
</dxe:BrowsePathEdit>

To use different icons (whether a path is specified or not), add two icon paths to the IconSelector class:

public class IconSelector : IPathIconSelector {
    public ImageSource Select(string path) {
        if(Directory.Exists(path))
            return new BitmapImage(new Uri("pack://application:,,,/DevExpress.Images.v22.2;component/Images/Business Objects/BOFolder_16x16.png"));
        return null;
    }
}

Select a File Path

Another feature of the BrowsePathEdit control is the ability to select the path for a file save operation (for example, if a user generates an Excel file and saves it in the application with the BrowsePathEdit control).

When we use the FileSave value of the BrowsePathEdit.DialogType property, the dialog window allows us to save the file instead of opening it.

Implementation

In this code sample, we use the FileSave value of the BrowsePathEdit.DialogType property and specify the DialogFilter property.

<dxe:BrowsePathEdit DialogType="FileSave"
                    DialogFilter="*.xlsx|*.xlsx"
                    EditValue="{Binding SourceFilePath, UpdateSourceTrigger=PropertyChanged}">
    <dxe:ButtonInfo GlyphKind="Cancel"
                    Command="{Binding (dxe:BaseEdit.OwnerEdit).SetNullValueCommand, RelativeSource={RelativeSource Self}}" />
</dxe:BrowsePathEdit>

Should you have any questions about our new WPF BrowsePathEdit component, feel free to submit a support ticket via the DevExpress Support Center.