Create WPF windows explorer tree view with checkbox

Question

I'm trying to create a WPF windows explorer tree view file browser with check boxes for select multiple files. Check boxes should view only for the files. Like this enter image description here

I don`t have a lot experience in WPF it quite difficult for me to start.

Thanks.

Answer 1

I'll give you the simplest idea, on how it could be implemented. Considering two classes Folder and File (I've implemented my own simple classes fot the ease of the example):

public class Folder
{
    public List<Folder> Folders { get; set; } = new();

    public List<File> Files { get; set; } = new();


    public override string ToString() => Name;
    public string Name { get; set; }
}

public class File
{
    public string Name { get; set; }
    
    public override string ToString() => Name;
}

You would have this kind of MultiselectTreeView implementation:

public class MultiSelectTree: TreeView
{
    public List<File> SelectedFiles { get; set; } = new();
    
    public void AddItem(object item)
    {
        if (item is Folder folder)
        {
            var root = FormFolderTreeItem(folder);
            Items.Add(root);
        }

        if (item is File file)
        {
            var f = FormFileTreeItem(file);
            Items.Add(f);
        }
    }

    private TreeViewItem FormFolderTreeItem(Folder folder)
    {
        var treeItem = new TreeViewItem { Header = folder };

        foreach (var subFolderItem in folder.Folders.Select(FormFolderTreeItem))
        {
            treeItem.Items.Add(subFolderItem);
        }

        foreach (var file in folder.Files.Select(FormFileTreeItem))
        {
            treeItem.Items.Add(file);
        }
        
        return treeItem;
    }
    
    private TreeViewItem FormFileTreeItem(File file)
    {
        var treeItem = new TreeViewItem ();
        // wrap Files in a checkbox and set this checkbox as a content of a TreeViewItem
        var checkBox = new CheckBox { Content = file };
        treeItem.Header = checkBox;
        
        // Subscribe for the checked event
        // When the event triggers - add file to the SelectedFiles
        checkBox.Checked += (sender, args) =>
        {
            if (sender is CheckBox chb)
            {
                SelectedFiles.Add((File)chb.Content);
            }
            args.Handled = true;
        };
        
        // Just the opposite here
        checkBox.Unchecked += (sender, args) =>
        {
            if (sender is CheckBox chb)
            {
                SelectedFiles.Remove((File)chb.Content);
            }
            args.Handled = true;
        };

        return treeItem;
    }
}

You can then access you selected files with SelectedFiles property.

Here is the example of the usage (Tree is the instance of MultiSelectTree):

var firstRoot = new Folder { Name = "Root" };
var secondRoot = new Folder {Name = "Second Root"};
        
firstRoot.Folders.Add(new Folder { Name = "Sub folder"});
        
secondRoot.Files.AddRange(new []
{
     new File {Name = "First file" },
     new File {Name = "Second file" }
});
        
Tree.AddItem(firstRoot);
Tree.AddItem(secondRoot);

As a result you will have this: TreeView with checkboxes and multiselect

Now you'll have to figure out how to adjust the example that you've already used in Designing a WPF TreeView File Explorer