In this article we are going to see how to create a Directory viewer in WPF using treeview and bind the images based on the type. For that first we have to iterate the directory to get the information of Directories and files present inside the directory. For binding the image to the treeviewitem based on file and directory create a custom converter.
WPF Code:
<Window x:Class="Directory_view.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Directory_view"
Title="Directory Viewer" Height="550" Width="525" Loaded="Window_Loaded"Icon="folder.png">
<Window.Resources>
<local:ImageToHeaderConverterx:Key="img"/>
</Window.Resources>
<Grid>
<TreeView Name="folders"MouseDoubleClick="folders_MouseDoubleClick">
<TreeView.Resources>
<Style TargetType="TreeViewItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="25"Height="15" Source="{Binding Path=Tag,RelativeSource={RelativeSource AncestorLevel=1,AncestorType=TreeViewItem,Mode=FindAncestor},Converter={StaticResource img}}"></Image>
<TextBlock FontWeight="Heavy"Text="{Binding}"></TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
</Grid>
</Window>
C# Code
public partial class MainWindow : Window
{
publicMainWindow()
{
InitializeComponent();
}
privatevoid Populate(stringheader, string tag,TreeView_root,TreeViewItem _child,bool isfile)
{
TreeViewItem_driitem = new TreeViewItem();
_driitem.Tag = tag;
_driitem.Header = header;
_driitem.Expanded += new RoutedEventHandler(_driitem_Expanded);
if(!isfile)
_driitem.Items.Add(new TreeViewItem());
if(_root!=null)
{ _root.Items.Add(_driitem); }
else{_child.Items.Add(_driitem);}
}
privatevoid Window_Loaded(objectsender, RoutedEventArgs e)
{
foreach(DriveInfo driv inDriveInfo.GetDrives())
{
if(driv.IsReady)
Populate(driv.VolumeLabel+"("+driv.Name+")", driv.Name, folders,null,false);
}
}
void_driitem_Expanded(object sender, RoutedEventArgs e)
{
TreeViewItem_item = (TreeViewItem)sender;
if(_item.Items.Count == 1 && ((TreeViewItem)_item.Items[0]).Header == null)
{
_item.Items.Clear();
foreach(string dir in Directory.GetDirectories(_item.Tag.ToString()))
{
DirectoryInfo_dirinfo = new DirectoryInfo(dir);
Populate(_dirinfo.Name, _dirinfo.FullName, null, _item,false);
}
foreach(string dir in Directory.GetFiles(_item.Tag.ToString()))
{
FileInfo_dirinfo = new FileInfo(dir);
Populate(_dirinfo.Name, _dirinfo.FullName, null, _item,true);
}
}
}
privatevoid folders_MouseDoubleClick(object sender, MouseButtonEventArgse)
{
if(e.Source is TreeViewItem&& ((TreeViewItem)e.Source).IsSelected)
{
}
}
HeaderToImageConverter:
This class will bind the Header image based on the tag value. If the Drive is present, Drive image is bind. If Directory is present folder image will bind and for file also.
public class ImageToHeaderConverter:IValueConverter
{
public object Convert(objectvalue, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
stringtag = (string)value;
if(File.Exists(tag))
{
return"file1.png";
}
if(tag.Length > 3)
{
return"folder.png";
}
else
{
return"Hard drive.png";
}
}
public object ConvertBack(objectvalue, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
thrownew NotImplementedException();
}
}
From this article I hope you can have idea of TreeView control and how to display the data in TreeViewItem and also How to iterate the information of Directory and Drives.