[Update to V2] WPF: simple mvvm File Browser

 

Source code download
2.0 Download Page

1.0 Download Page

Note: the link is the Microsoft SkyDrive page. When downloading, use a browser to download it directly. Some download tools may not be available for downloading.

Source code environment: Microsoft Visual C #2008 Express

 

The program viewmodel name is filesystemobjectviewmodel, which treats files and folders as one type and uses filesystemobjecttype enumeration to differentiate types. The logic of viewmodel is very simple. I will not talk about it here. The following describes some other things that need attention.

We recommend that you download the source code for reference.

 

After 2.0:

The program uses the enumeratedirectories and enumeratefiles methods supported by the Directory type in. Net 4.0.

 

Real-time Data Loading

The most basic performance consideration of a file browser should be the real-time loading of data. That is to say, the expanded folder view is loaded only after the user expands the treeviewitem, of course, the data that has been loaded after the folder view is scaled down will not be discarded, and the loaded data will be directly opened next time.

After a viewmodel is created, the initialization function performs such an operation. If it is a folder, it quickly checks whether the current folder has sub-members (subfolders or sub-files ), if so, add a special viewmodel without any value to the children attribute of the current viewmodel. In this way, the WPF data binding will add another treeviewitem generated by the special viewmodel to the items of the currently generated treeviewitem. The "plus sign" will be displayed on the left of the current treeviewitem, indicating that the current folder has sub-members, in fact, the specific content of a sub-member is loaded only when the folder is expanded by the user.

In mvvm, view has no event code and only has XAML. Therefore, we must first use the isexpanded dependency attribute of treeviewitem, and also have the isexpanded attribute in viewmodel, two-way Data Binding allows the two attributes to be set to each other (in this example, only the viewmodel is set for the view ).

 

Refer to the onexpanded method in filesystemobjectviewmodel:

/// <Summary>

/// Actions after the node is expanded

/// </Summary>

Protected virtual void onexpanded ()

{

// Whether there are special nodes

If (hasspecialchild)

{

// The node to be expanded has submembers not listed (first open)

 

// Remove Special nodes and add subfolders to children

Removespecialchild ();

 

Foreach (VAR dir in getsubdirs ())

_ Children. Add (New filesystemobjectviewmodel (Dir, filesystemobjecttype. folder ));

Foreach (var file in getsubfiles ())

_ Children. Add (New filesystemobjectviewmodel (file, filesystemobjecttype. File ));

}

}

 

Enable Treeview Virtualization

After. Net 3.5, Microsoft added support for virtualizingstackpanel for Treeview. virtualization can provide more objective performance for Treeview. However, you need to manually declare the additional attributes of virtualizingstackpanel to make virtualization take effect.

<Treeview virtualizingstackpanel. isvirtualizing = "true"

Virtualizingstackpanel. virtualizationmode = "reconfiguring"> </Treeview>

Virtualizingstackpanel. The default value of virtualizationmode is standard: Create and discard the item container. Use reconfiguring as much as possible: Reuse the item container.

 

 

Extract icons from files or folders

Windows Forms contains icons. extractassociatedicon (msdn: http://msdn.microsoft.com/en-us/library/system.drawing.icon.extractassociatedicon.aspx), but its disadvantage is the inability to extract icons from folders (including the disk root directory), and the use in WPF requires additional references to system. drawing namespace DLL.

Therefore, use the shgetfileinfo local Windows API (msdn: http://msdn.microsoft.com/en-us/library/bb762179.aspx) and convert the unmanaged icon resource to the WPF bitmapsource.

Thanks to the Internet, just use the Code provided by this link to execute shgetfileinfo: (http://stackoverflow.com/questions/6008600/get-program-icons), And I package it in a class called iconextractor.

 

 

View

Main view: filesystemview uses objectdataprovider to call the static method of viewmodel (filesystemobjectviewmodel) to obtain all the disk root directories of the current system and bind the results to the datacontext of the Treeview.

The resource also contains a custom data converter (iconconverter) used to convert filesystemobjectviewmodel to the corresponding file or folder icon, and display the image in the hierarchicaldatatemplate of the Treeview.

 

Filesystemview:

<Usercontrol. Resources>

<Objectdataprovider X: Key = "dataprovider"

Objecttype = "LOC: filesystemobjectviewmodel"

Methodname = "getsystemdrives"/>

 

<LOC: iconconverter X: Key = "iconconverter"/>

 

</Usercontrol. Resources>

<Treeview virtualizingstackpanel. isvirtualizing = "true"

Virtualizingstackpanel. virtualizationmode = "reconfiguring"

Datacontext = "{binding source = {staticresource dataprovider }}"

Itemssource = "{binding children}">

 

<Treeview. itemtemplate>

<Hierarchicaldatatemplate datatype = "LOC: filesystemobjectviewmodel"

Itemssource = "{binding children}">

 

<Stackpanel orientation = "horizontal">

<Image Source = "{binding converter = {staticresource iconconverter}"/>

<Textblock text = "{binding displayname}"/>

</Stackpanel>

 

</Hierarchicaldatatemplate>

</Treeview. itemtemplate>

 

<Treeview. itemcontainerstyle>

<Style targettype = "treeviewitem">

<Setter property = "isexpanded" value = "{binding isexpanded, mode = twoway}"/>

</Style>

</Treeview. itemcontainerstyle>

 

</Treeview>