Get Started with the FilePathPicker in Telerik UI for WPF

Available Dialog Types

Speaking of dialogs, what about the available dialog types? Well, they are determined by the DialogType enumeration, which has the following options – OpenFile, OpenFolder and SaveFile. The control opens our awesome file dialogs by default - if this is the first time you've heard about them, check this article for more. You could always open another window (MS or a custom one) if you want to – just handle the DialogOpening event.

How to use the IconTemplateSelector?

With ease. The default icon is an instance of FilePathPickerIconTemplateSelector. It exposes the EmptyTemplate and NonEmptyTemplate properties. It already flashed across your minds that these two properties are related to the FilePath, didn’t it? Oh, and if you don’t want to have an icon at all, just set the IconVisibility property to Collapsed. Icons are cool. Let’s create a quick custom FilePathPickerIconTemplateSelector:

<!-- Icons made by https://www.flaticon.com/authors/smashicons" from https://www.flaticon.com/ -->
<StackPanel Margin="50">
    <StackPanel.Resources>
        <DataTemplate x:Key="CustomEmptyTemplate">
            <Image Source="emptyIcon.png" />
        </DataTemplate>
        <DataTemplate x:Key="CustomNonEmptyTemplate">
            <Image Source="nonEmptyIcon.png" />
        </DataTemplate>
        <telerik:FilePathPickerIconTemplateSelector x:Key="CustomIconTemplateSelector"
            EmptyTemplate="{StaticResource CustomEmptyTemplate}"
            NonEmptyTemplate="{StaticResource CustomNonEmptyTemplate}" />
    </StackPanel.Resources>
    <telerik:RadFilePathPicker IconTemplateSelector="{StaticResource CustomIconTemplateSelector}" />
</StackPanel>

3…2…1… Action!

I mentioned hiding the icon but did not mention that you can use the picker in button-only mode by hiding the editor part through the EditorVisibility property. Cool, huh? I think this mode is a perfect match with a label.

<StackPanel Margin="50" Orientation="Horizontal" UseLayoutRounding="True" HorizontalAlignment="Center" VerticalAlignment="Center">
    <StackPanel.Resources>
        <local:FilePathPickerLabelContentConverter x:Key="converter"/>
    </StackPanel.Resources>
    <telerik:Label Content="{Binding FilePath, ElementName=fpp, Converter={StaticResource converter}}" Margin="0 0 10 0"/>
    <telerik:RadFilePathPicker x:Name="fpp" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" EditorVisibility="Collapsed" IconVisibility="Collapsed" />
</StackPanel>

The file picker is in read only mode by default, which means that you receive a free insurance against errors! Of course, you can set the IsReadOnly property to False and allow text input. Check it, taste it, or even copy-paste it. Here, the clear button will be your magic mistake eraser. You can customize it as well, by using the file input’s ClearButtonContent and ClearButtonContentTemplate properties by the way 😉.

Featured Events

The events that the file path picker exposes are FilePathChanging, FilePathChanged, DialogOpening and DialogClosed. The first two come in handy for validation scenarios or directory restriction. No need to talk about their arguments, right? Well, if there is, you are more than welcome to enjoy the control’s detailed documentation.

Closing Curtain

I hope that the RadFilePathPicker deserved its round of applause and got you excited to dive into it right away. Looking for the best walkthrough options? I can’t think of anything other than the awesome Telerik UI for WPF Controls Demo application.

P.S. We’d love to hear from you. Your honest and direct feedback is the most efficient way for us to improve. Don’t be shy to drop your thoughts in the comment section below and share your suggestions using our feedback portal.

Get the latest version of: Telerik UI for WPF Telerik UI for Silverlight