Will any of these approaches let me customize the main pane of the ExplorerControl?

1 Answer 45 Views
FileDialogs General Discussions
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
Joe asked on 22 Oct 2022, 11:01 PM | edited on 23 Oct 2022, 12:33 AM

I want show something like the Telerik ExplorerControl in folder-browser mode.  But in my control, I need certain folders are shown with a custom icon /view that will reflect the contents of the folder.   I love all the tree-view functionality of the control and do not want to re-invent all of that.  but I need the main pane to show my view, not Telerik's

Basically when ever a folder contains a file named "scan.yaml" and "image01.png", I want my UI to show the contents of "image01.png" as the folder instead of the regular folder icon.  (My code actually does some background processing to overlay other information on that image sometimes but that's not important for now)

Is this possible or would I need to use my own Tree View?

I thought of a few approaches.  Can you tell me which, if any of these are feasible and which would work best?

1.  Use a ControlTemplate that totally replaces the contents of`PART_MainPane` which is currently this

<historyNavigationPane:FileBrowserTabControl x:Name="PART_MainPane"
        Grid.Column="2"
        SelectedIndex="{Binding ElementName=PART_LayoutConfigurator, Path=SelectedIndex}"
        ItemsSource="{Binding Layouts}"
        ContentTemplateSelector="{StaticResource MainPaneTabControlTemplateSelector}">

 Is it feasible to use a style for ExplorerControl with a ControlTemplate  that completely tears that out and replaces that `FileBrowserTabControl` it with my own control? 

2. Use a ControlTemplate that does not show the MainPane at all and just puts my custom control next to the existing tree view.  My control could then key off its sibling's `CurrentDirectory` property

3. Try to find some way to customize how FileBrowserTabControl shows the folder contents as I described

Would any of these work.

I've attached an image of part of what my control looks like in large-icon mode.  It shows two regular folders and two of the "special" folders that I mentioned

(Also I looked for a question tag for ExplorerControl but could not find one so I tagged "General Discussion")


1 Answer, 1 is accepted

Sort by
0
Accepted
Dilyan Traykov
Telerik team
answered on 26 Oct 2022, 03:04 PM

Hello Joe,

Thank you for the provided image and code snippet.

Replacing the FileBrowserTabControl would not be recommended as most of the functionality of the ExplorerControl depends on it.

Instead, I would suggest customizing the LayoutConfiguratorTemplateSelector it uses and introducing an appropriate converter that selects the appropriate image to display. Here's an example:

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var dirInfo = value as DirectoryInfoWrapper;
            if (dirInfo != null)
            {
                var uriSource = new Uri(@"/StandaloneExplorer;component/Images/green-folder.png", UriKind.Relative);
                var imageSource = new BitmapImage(uriSource);
                return dirInfo.ChildDirectories.Any(d => d.Name.Contains("test")) ? imageSource : dirInfo.LargeImage;
            }

            return (value as FileSystemInfoWrapper).LargeImage;
        }

This will display a green icon for any directory that contains a subfolder or file with a name that has "test" in it. Of course, you can replace this with your custom logic for determining whether to use another image and the location of the used image. Please note that I've only implemented this for the LargeIcons LayoutType but you can also copy this logic for the other layouts.

For your convenience, I've prepared a small sample project to demonstrate such an approach. Please have a look and let me know if a similar implementation would work for you.

Regards,
Dilyan Traykov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Joe
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 28 Oct 2022, 08:11 PM

This is spectacular!  Thank you
Tags
FileDialogs General Discussions
Asked by
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Dilyan Traykov
Telerik team
Share this question
or