Tech

How to Build a Simple File Manager App in Windows Forms


It can be very beneficial to re-create common apps when learning about Windows Forms. Doing so can also help reinforce your basic understanding of programming. One example of an app you can build is a basic file manager.

The file manager app should consist of quick links to common Windows folders (Desktop, My Documents, Pictures, Music, and Videos). It should also have the ability to navigate up and down directories.

MAKEUSEOF VIDEO OF THE DAY

How to Add UI Elements Onto the Canvas

First, create a new Windows Form application in Visual Studio. Once completed, you can start adding UI elements for the file manager onto the canvas.

  1. With the canvas opened, search for a Button UI element using the Toolbox.
  2. Drag and drop five buttons to represent the quick links that are available on a Windows computer. These will represent the Desktop, My Documents, Pictures, Music, and Videos folders.

  3. Highlight each button in turn and navigate to the Properties Window. Change each button’s Name Property and Text Property to the following values:
    Button Name Property Text Property
    1 button_Desktop Desktop
    2 button_Documents My Documents
    3 button_Pictures Pictures
    4 button_Music Music
    5 button_Videos Videos
  4. Search for a FlowLayoutPanel UI element using the Toolbox.

  5. Drag and drop it onto the canvas, and position it next to the quick links. This is where you will display your files and directories based on the directory you are currently viewing.
  6. Highlight the panel and change the Name property to “panel_FilesList”.


How to Get the Current File Path

When you click on a button (for example, Desktop), the list of folders and files that are on the Desktop should display in the panel. To do this, you can get the file path of the folder you have clicked on, i.e., “C:UsersUserDesktop”.

Write the logic for this in the code-behind C# file for the form. If you are unfamiliar with C# classes, you can learn more about classes in C#.

  1. Double-click on each of the buttons on the UI. This will generate click event functions for each button inside the C# file for the form. These functions will run when you click the associated button.
    private void button_Desktop_Click(object sender, EventArgs e)
    {
    }

    private void button_Documents_Click(object sender, EventArgs e)
    {
    }

    private void button_Pictures_Click(object sender, EventArgs e)
    {
    }

    private void button_Music_Click(object sender, EventArgs e)
    {
    }

    private void button_Videos_Click(object sender, EventArgs e)
    {
    }

  2. To get the file path of a special windows directory such as the Desktop, use the Environment.GetFolderPath() method. This will return a string of the filepath for the folder, for example, “C:UsersUserDesktop”. Add this to each function, and pass the filepath value into another function called DisplayFiles(), which you will create later.
    public Form1()
    {
    InitializeComponent();
    DisplayFiles(Environment.GetFolderPath(Environment.SpecialFolder.Desktop));
    }

    private void button_Desktop_Click(object sender, EventArgs e)
    {
    DisplayFiles(Environment.GetFolderPath(Environment.SpecialFolder.Desktop));
    }

    private void button_Documents_Click(object sender, EventArgs e)
    {
    DisplayFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments));
    }

    private void button_Pictures_Click(object sender, EventArgs e)
    {
    DisplayFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures));
    }

    private void button_Music_Click(object sender, EventArgs e)
    {
    DisplayFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyMusic));
    }

    private void button_Videos_Click(object sender, EventArgs e)
    {
    DisplayFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyVideos));
    }


How to Render the Files for the Selected Directory

Display a list of files depending on the Desktop, My Documents, Pictures, Music, or Videos button you click on.

  1. Import the System.IO namespace at the top of the file.
    using System.IO;
  2. Create a new function called DisplayFiles(), to display the files and folders of a selected directory.
    private void DisplayFiles(string filePath)
    {
    }
  3. Inside the new DisplayFiles() function, compile a list of all the directories and files that are inside the selected folder.
    string[] filesList = Directory.GetDirectories(filePath).Concat(Directory.GetFiles(filePath)).ToArray();
  4. Make sure the panel that displays the list of files and directories is empty.
    panel_FilesList.Controls.Clear();
  5. Store the current directory in a global variable.
    currentLocation = filePath;
  6. Declare the global variable at the top of the class.
    stringcurrentLocation = "";
  7. Back in the DisplayFiles() function, create a button for each directory and file. In a for-loop, isolate the name from the rest of the filepath. Programmatically create a new button, with the name of the file or directory as the button’s text.
    for (int i = 0; i < filesList.Length-1; i++)
    {
    bool isHidden = ((File.GetAttributes(filesList[i]) & FileAttributes.Hidden) == FileAttributes.Hidden);

    if (!isHidden)
    {
    var startOfName = filesList[i].LastIndexOf("\");
    var fileName = filesList[i].Substring(startOfName + 1, filesList[i].Length - (startOfName + 1));


    Button newButton = new Button();
    newButton.Text = fileName;
    newButton.Name = filesList[i];
    newButton.Location = new Point(70, 70);
    newButton.Size = new Size(800, 100);
    newButton.TextAlign = ContentAlignment.MiddleLeft;
    newButton.Padding = new Padding(24, 0, 0, 0);
    panel_FilesList.Controls.Add(newButton);
    }
    }

  8. Press the play button at the top of Visual Studio to run the program.

  9. Click on any of the quick links. For example, if you click on My Documents, The panel on the right should populate with a list of files and folders in the My Documents folder.

  10. If you click on another quick link, for example, Videos, the panel should clear and change to display files and folders in the Videos folder.


How to Navigate Up and Down Directories

Modify the code so that when you click on a folder displayed in the list, you will move down a directory. You can also create a back button to move back up to the previous folder.

  1. To move down a directory, create a new function called button_Click_Open(). If the user clicks on a directory in the list, the program will call the DisplayFiles() function to display the files inside that directory. If the user clicks on a file instead, the program will open the file.
    private void button_Click_Open(object sender, EventArgs e)
    {
    Button button = (Button)sender;
    string filePath = button.Name;

    try
    {
    DisplayFiles(filePath);
    }
    catch (Exception ex)
    {
    var process = new System.Diagnostics.Process();
    process.StartInfo = new System.Diagnostics.ProcessStartInfo() { UseShellExecute = true, FileName = filePath };
    process.Start();
    }
    }

  2. In the DisplayFiles() function, modify the part of the code that is creating a new button. Add a new line after creating the button to attach the new button_Click_Open() function to the Click event.
    newButton.Click += button_Click_Open;
  3. To navigate back up a directory, create a back button. On the canvas, click and drag a new button using the Toolbox.

  4. Highlight the new Back button. In the properties window, change the Text property to “< Back”.

  5. Double-click on the Back button to generate a click event function that will trigger when the user clicks the back button.
    private void back_Click(object sender, EventArgs e)
    {
    }
  6. Inside the function, find the filepath of the folder one level above, and display the files and directories for the folder above.
    var previousFolder = this.currentLocation.Substring(0, this.currentLocation.LastIndexOf("\"));
    DisplayFiles(previousFolder);
  7. Press the play button again at the top of Visual Studio to run the program. Click on any of the quick links again to display a list of folders or files.

  8. Inside the panel, click on a folder to move down a directory.

  9. Click on the back button to move back up to the previous directory.


Creating Desktop Apps Using Windows Forms

A file manager is a simple app that you can build when learning how to create a Windows Form application. You can use the Toolbox to drag and drop a panel onto the canvas, along with various other buttons.

Now that your app has the main functionality, feel free to modify the button properties to improve the File Manager’s design.

Discover some of the other beginner apps that you can create when learning about Windows Forms applications.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button