Note: This tutorial is fairly extensive, if you are after something shorter please also see our Getting Started and How To Create a Client Server Application In Minutes tutorials.

Note: This example is also included in the example bundle when you download NetworkComms.Net. You are welcome to open that example and simply follow this tutorial to see how it was put together.

Before we get started ensure you have Visual Studio 2010 Express or later installed, which should come with .Net 4 or later.

WPF file transfer application

A quick look at the completed application.

1. Create Visual Studio Project

  • Create a new visual studio solution containing a Visual C# ‘WPF Application‘ project naming it ‘WPFFileTransferExample‘.

2. Add NetworkComms.Net DLL to Project

  • The NetworkComms.Net download contains DLLs for all supported platforms but we are only interested in the Net40 > Release > Complete DLL. Copy this DLL to the same location as the solution we created in step 1.
  • We now need to add a project reference to the NetworkComms.Net DLL we just downloaded. Right click on the ‘WPFFileTransferExample‘ project and select ‘Add Reference…‘. Within the window that opens select the Browse tab and select the DLL we just downloaded.
  • If you expand the ‘References‘ folder within the project you should now see the NetworkComms .Net reference you just added like this:
File Transfer application containing a reference to the complete NetworkComms .Net DLL.

File Transfer application containing a reference to the complete NetworkComms .Net DLL.

3. Add WPF Elements

  • We need to add the text boxes and buttons that we intend to interact with to the WPF layout. To get started double click the ‘MainWindow.xaml‘ file so that it opens in the main viewer.
  • If you wanted to you could now add each individual text box and button by hand. To save a little time however we have provided a base layout that you can copy and paste. Copy and paste the following code to replace ALL EXISTING code in the XAML view of ‘MainWindow.xaml‘:

  •  The design window should now show the equivalent of the XAML you have just pasted from above. This gives us the very basic layout of the file transfer application:
The base user interface for the file transfer application. Next we need to add the necessary functionality.

The base user interface for the file transfer application. Next we need to add the necessary functionality.

  • Press ‘F6′ on your keyboard to ensure that the project builds successfully (i.e. the Errors List window in Visual studio remains empty). If the project does not build at this point please go back over this tutorial and make sure you have completed all of the necessary steps.

4. Add ReceivedFile Class

  • The next step is to create a class for the files we will be receiving. Right click on the project and select ‘Add‘ > ‘New Item…‘. This should bring up the ‘Add New Item‘ window, a list of options that you can add to the project. Ensure that ‘Class‘ item is selected, and at the bottom of the window enter the name ‘ReceivedFile.cs‘. Now click ‘Add‘. The new class file should open automatically and you should now have something like this:
The newly created ReceivedFile class.

The newly created ReceivedFile class.

  • Copy and paste the following code, replacing ALL EXISTING code in the class we just created, ‘ReceivedFile.cs‘:

5. Add SendInfo Class

  • The next step is to create a wrapper class for the data we will be sending. Right click on the project and select ‘Add‘ > ‘New Item…‘. This should bring up the ‘Add New Item‘ window, a list of options that you can add to the project. Ensure that ‘Class‘ item is selected, and at the bottom of the window enter the name ‘SendInfo.cs‘.
  • As we just did in step 4 copy and paste the following code, replacing ALL EXISTING code in the class we just created, ‘SendInfo.cs‘:

6. Adding Functionality To Code Element of MainWindow.xaml

  • We now turn our attention to the code element of ‘MainWindow.xaml‘. To access the code element right click on ‘MainWindow.xaml‘ and select ‘View Code‘ from the context menu. You should see a code file that contains something like follows, all of the code we are subsequently going to add will be within the ‘MainWindow‘ class that currently looks like this:

  •  Our first step is to add the namespaces we will be using, so at the top of ‘MainWindow.xaml‘ underneath the existing ‘using …’ statements we need to add:

  •  Next we are going to add some class variables to help us keep track of the current application state. We want to track:
  1. Received files.
  2. Temporary caches for incoming data and data information.
  3. Current send options to allow optional compression.
  4. Locker object to ensure thread safe operations where necessary.
  5. If the application is closing.
  • To track these items add the following code at the top of (but within) the MainWindow class:

  •  Next we add three methods that can be used to update parts of the user interface:

  •  Next four methods that will be triggered by interactions in the user interface, such as buttons clicks etc:

  •  Next are the four methods that interact with NetworkComms.Net. See method xml and comments for further explanations:

  •  The last thing we need to add within the Code Elements of ‘MainWindow.xaml‘ is the correct initialisation of NetworkComms.Net. In order to correctly initialise the network library we need to:
  1. Set the data context of the received files list box to our receivedFiles field.
  2. Start listening for TCP connections.
  • We perform these initialisation tasks in the MainWindow class constructor by replacing it with the following code:

7. Add Events To WPF Layout

  • The final step in the application is to add the necessary interactivity to send and receive files. This is done by editing the XAML of the MainWindow. This is the same XAML edited in step 3 of this tutorial, but to recap, access the XAML by double clicking ‘MainWindow.xaml‘ in the Solution Explorer window.
  • When the application closes we want to run the method Window_Closing. Replace the top section of the XAML which currently looks like this:

with this (note the addition of Closing=”Window_Closing” at the end):

  •  We want to send a file when we click the button labelled ‘Send File To Remote’. Replace the following line:

with

  •  We want to change the compression property when we check and uncheck the checkbox labelled ‘Use Compression’. Replace the following line:

with

  •  When a file has been received we want to be able to delete it. Each received file creates an entry in the user interface list box. Replace the following line:

with

  •  Finally once a file has been received we want to be able to save it to disk somewhere. Replace the following line:

with

8. Test Your File Transfer Application

  • We’ve finally arrived at the testing phase. We now want to open at least two instances of the File Transfer Application. To do that we first need to build the project in debug mode (make sure Visual Studio shows ‘Debug‘ in the top menu), either by right clicking on the solution and selecting ‘Build Solution‘ or pressing ‘F6‘ on the keyboard.
  • Now browse to the build location of the application. One way is to right click on the project in Visual Studio and select ‘Open Folder in Windows Explorer‘. Look for a folder called ‘bin‘ and within that ‘Debug‘.
  • You should now see an executable named ‘WPFFileTransferExample.exe‘, double click on this twice to open two instances of the example. Note: When you open the applications you may get a notification from your system firewall. It is important to provide the necessary permissions (see firewall documentation) otherwise the example will not be able to communicate.
  • Both applications should look something as followed. The important thing to check is the list of IP addresses and ports selected for listening in the client log window:
WPF file transfer application

A quick look at the completed application.

  •  Choose which one of the applications you would like to send a file too (Application A). Choose an appropriate IP address and port (e.g. 127.0.0.1 or 192.168.*.*) from the output shown in application A and enter this information into ‘Remote IP’ and ‘Port’ text boxes in the other application (application B).
  • Click the ‘Send File To Remote’ in application B and select a file.
  • If everything has gone to plan the selected file should appear in application A.

If Everything Worked

  • If you found this article useful or have any ideas as to how we could improve it please leave us a comment below.

If You Have Problems

  1. Please experiment with the completed/working WPF file transfer application example available in the bundles examples of the download.
  2. Ensure you have correctly configured your firewall to allow the necessary traffic.
  3. If you are still have issues please post on our forums and we will be more than happy to help.

For More Information

  1. See our other tutorials.
  2. See our online API Reference which explains what all of the methods do.
  3. Ask any questions on our forums.