WPF: FolderBrowserDialog in the Custom Metro style folder selection dialog box,

Source: Internet
Author: User

WPF: FolderBrowserDialog in the Custom Metro style folder selection dialog box,

1. Preface

WPF does not have a file selection dialog box, so you only need to use the Winform control. So far, I have not found a file selection dialog box for the WPF version.

 

It may be my eyes. If you know that you have a sound file selection dialog box for the WPF edition and a file opening dialog box, please leave a message.

 

This is a simplified file selection dialog box. Contains a UserControl and a Window carrying the UserControl.

 

In addition, the TreeView style is referenced from the style in maheatps. That is, if you need to use this file selection dialog box, you must reference the relevant dll of Mahapps.

 

Of course, I will provide the source code of the entire project. If you do not want to discard it, you can remove the reference related to maheat PS in the project. Of course, this may make the control interface look ugly, but you can also provide your own TreeView style.

 

The file selection dialog box is simple and only supports folder selection. Other functions such as right-click menu, Folder creation, and folder drag-and-drop are not yet implemented. To fully implement Microsoft's full version of FolderBrowserDialog using WPF, I believe this workload is still quite large.

2. Start Analysis

Open the Winform file selection dialog box to see what it looks like:

 

As you can see, from top to bottom are: desktop (not expandable), library, computer (expand is each disk drive), network, control panel, recycle bin, and various folders on the desktop.

Regardless of Microsoft's design of this habit, users are now used to this design. Therefore, this design is also used in the selection dialog box of the WPF version. There are several points:

Library is used too little. Remove it.

Some of the networks seem to require a password. I don't have a remote shared host, so I don't know how Microsoft allows users to enter the password. Not implemented at the moment.

As for layout control and recycle bin, I don't know what it means for Microsoft to put the two in the file selection dialog box? Active atmosphere ~~~

In fact, I have an idea here. The operation file method (including right-click menu, file drag-and-drop, etc.) in the Microsoft file selection dialog box is very similar to the system resource manager. So I suspect that this file selection dialog box

The tree in it is actually an alternative resource manager embedded, rather than a tree developed by Microsoft... In this case, we can also explain why Microsoft does not provide the WPF file selection dialog box, because the internal implementation of Explorer may not be implemented in the WPF mode, so it takes a lot of effort to change it... then we will not provide it.

Of course, these are all guesses ..

Well, after all, the most important thing about this control is how to load the entire disk file through a tree. The entire disk file cannot be first organized into a tree during initialization? You are never allowed to do that because of efficiency.

Is there a way to initialize a subnode when you expand a node?

Microsoft provides a template for TreeView: HierarchicalDataTemplate

With this template, When you expand a node, TreeView will expand the subnode of this node and initialize the subnode of this node, that is, when HierarchicalDataTemplate is initialized for the first time, it is initialized for the first and second layers. When the user expands the first layer, it starts to initialize the third layer... and so on. The efficiency of using this template to initialize the TreeView is considerable.

At this point, we have prepared a Model for the TreeView ):

This model should have at least these attributes:

1. Name: node Name

2. FullName: full disk path of the node location

3. Children: all child nodes of a node

In addition, you can add other similar icons.

In this example, the Model is as follows:

We can see that there is an extra Type, which mainly refers to the node Type, such as the network, library, and control panel mentioned above. This means they are folders, but they are not very similar, therefore, it cannot be processed in the same way as folders.

Therefore, each node is assigned a type, which is convenient for processing and future expansion.

The implementation of Type is as follows:

/// <Summary> /// file item type /// </summary> internal enum MetroFolderBrowserControlModelType {// <summary> /// indicates that this is a folder /// </summary> Directory, /// <summary> /// Desktop /// </summary> Desktop, /// <summary> /// Computer /// </summary> Computer, /// <summary> /// Disk drive /// </summary> Disk ,}

Considering that different types of nodes give different node icons a better look, we can do this:

/// <Summary> // file item Type // </summary> public MetroFolderBrowserControlModelType {get {return type;} set {switch (value) {case MetroFolderBrowserControlModelType. directory: {ItemImagePath = ImagePathHelper. folderIconPath; break;} case MetroFolderBrowserControlModelType. computer: {ItemImagePath = ImagePathHelper. computerIconPath; break;} case MetroFolderBrowserControlModelType. desktop: {ItemImagePath = ImagePathHelper. using topiconpath; break;} case MetroFolderBrowserControlModelType. disk: {ItemImagePath = ImagePathHelper. diskIconPath; break;} default: {ItemImagePath = ImagePathHelper. folderIconPath; break ;}} type = value ;}}

At present, the most important thing is that the implementation of Children is not complete yet. The implementation of Children is also related to the efficiency of the entire control.

For different types, use different methods to obtain their Children:

/// <Summary> /// subdirectory (File + folder) /// </summary> public ObservableCollection <MetroFolderBrowserControlModel> Children {get {try {if (children! = Null) {return children;} children = new ObservableCollection <MetroFolderBrowserControlModel> (); switch (Type) {case MetroFolderBrowserControlModelType. desktop: {break;} case MetroFolderBrowserControlModelType. computer: {foreach (var device in Environment. getLogicalDrives () {if (Directory. exists (device) {MetroFolderBrowserControlModel model = new MetroFolderBrowserControlModel (); model. fileName = device; model. fullName = device; model. type = MetroFolderBrowserControlModelType. disk; children. invokeAdd <MetroFolderBrowserControlModel> (model) ;}} break;} case MetroFolderBrowserControlModelType. disk: case MetroFolderBrowserControlModelType. directory: {foreach (var item in assumerhelper. getDirectoryChildrenItems (FullName, true, false, false) {MetroFolderBrowserControlModel model = new MetroFolderBrowserControlModel (); model. fileName = item. name; model. fullName = item. fullName; children. add (model) ;}break;} default: {break ;}} return children ;}catch (Exception) {// an Exception occurs. return null for an empty set ;}}}

The next step is to bind the tree. This tree is almost displayed:

        <TreeView ItemsSource="{Binding MetroFolderBrowserControlModels}" x:Name="treeview">            <TreeView.ItemTemplate>                <HierarchicalDataTemplate ItemsSource="{Binding Children}">                    <StackPanel Orientation="Horizontal">                        <Image Source="{Binding ItemImagePath, Mode=TwoWay}" Width="16" Height="16"/>                        <TextBlock Text="{Binding FileName}" Margin="5,0,0,0"/>                    </StackPanel>                </HierarchicalDataTemplate>            </TreeView.ItemTemplate>        </TreeView>

If you need to obtain the path selected by the user and the return value of the dialog box, you can download the source code to view the information:

Download source code:

Http://download.csdn.net/detail/lyclovezmy/7655655

The general results are as follows:


In winfrom, how does folderBrowserDialog1 add all the content of a folder to another folder?

"Select the image folder to import the image" FolderBrowserDialog1.ShowDialog () path = the previous image (I made the button, the left mouse button works the same way, you put the left mouse button,
 
Use of folderBrowserDialog1 C #

Although you have found it, I 'd like to talk about it with you ~~~

// Set root on the desktop
FolderBrowserDialog1.RootFolder = SpecialFolder. Desktop;

// Set the selected path
FolderBrowserDialog1.SelectedPath = "C :";

// You can include a new directory button in the dialog box.
FolderBrowserDialog1.ShowNewFolderButton = true;

// Description of the Setting Dialog Box
FolderBrowserDialog1.Description = "select the output directory ";

If (folderBrowser. Dialog1.ShowDialog () = DialogResult. OK)
{

// Add code here. The selected path is folderBrowserDialog1.SelectedPath.

}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.