Creating a Serial Port Interface with C#

A Serial Port Interface is a Graphical User Interface program that runs on a personal computer and can be used to connect to devices with a serial interface like microcontrollers.
In this article a detailed step by step description with source code how to create a simple Serial Port GUI using C# that can be used to connect a PC to serial devices.

Start a new C# project and change the Form text to “Serial Port Interface” as shown below.

From the toolBox on the left-hand side, under the Components sub-section, drag and drop SerialPort Control on the form and it shall appear below it. This control will enable us to send or receive data through the COM Port (Serial port) of the PC.

Start building the interface by dragging controls from the ToolBox onto the form as shown below:

1. Drag and drop two GroupBox controls from the ToolBox under the Containers sub-Section.
   Change their Text properties (from the Properties pane. Remember before you change properties of a control you have to select it first ) to “COM Serial Port Settings” and “Data Mode“.
   We use a GroupBox control to group controls, in our case, configuration settings controls.
2. Drag and drop three Button controls from the ToolBox under the Common Controls sub-Section.
   Change the first button Text properties to “Connect” and the Name properties to “btnConnect“. We will use this button to connect or disconnect to selected serial ports.
   Change the second button Text properties to “Send”, the Name properties to “btnSend” and Enabled properties to “False”. We will use this button to send data typed on the screen to the Serial Port.
   We set its Enable Properties to false to prevent a user from clicking it before we connect to a port this would generate an error.
   Change the last button Text properties to “Clear” and the Name properties to “btnClear“.
   We will use this button to clear the screen.
3. Drag and drop one TextBox, one Rich TextBox and one Label control from the ToolBox under the Common Controls sub-Section. Change the Rich TextBox Name properties to “rtxtDataArea“, ReadOnly properties to “True” (To avoid people typing in there) and re-size. This is where we will receive data from the Serial port and any data sent to serial port will be displayed here as well.
   Change the TextBox Name properties to “txtSend” and change the Label Text properties to “Send Data”.
   This is where we are going to type our data and click on Send button to send it to the serial port.

Add the rest of the controls inside COM Serial Port Settings and Data mode GroupBoxes to complete our
Graphical User Interface design.

1. Drag and drop five Label controls inside the COM Serial Port Settings GroupBox and change their Text Properties to “COM Port:”, “Baude Rate:”, “Parity:”, “Data Bits:” and “Stop Bits:”
2. Drag and drop five ComboBox controls inside the COM Serial Port Settings GroupBox as well as shown above (a ComboBox is also under the Common controls sub-Section). Place these ComboBoxes next to their respective labels and change their properties:
   •  Change the Name properties of the first one to “cmbPortName” and Text Properties to “Select Port Name”,
   • Change the Name properties of the second one to “cmbBaudeRate“, Text Properties to “Select Baude and in the Items properties, open the Collections and put these Baude Rate values inside that String  collection Editor:       
                                               1200 
                                               2400 
                                               4800 
                                               9600 
                                               19200 
                                               38400 
                                               57600 
                                               115200
                 Click Ok.
   • Change the Name properties of the third one to “cmbParity“, Text Properties to “Select Parity” and in the Items properties, open the Collections and put these Parity values inside that String collection  editor:       
                                               None 
                                               Even 
                                               Odd
                Click Ok.
   • Change the Name properties of the fourth one to “cmbDataBits“, Text Properties to “Select Data Bits” and in the Items properties, open the Collections and put these Data Bits values inside that String  collection Editor:       
                                               7
                                               8
                                               9 
                 Click Ok.
   • Change the Name properties of the fifth one to “cmbStopBits“, Text Properties to “Select Stop Bits” and in the Items properties, open the Collections and put these Stop Bits values inside that String  collection Editor:       
                                               1
                                               2
                                               3
                 Click Ok.
3. Drag and drop two RadioButton controls inside the Data Mode GroupBox.
   Change the Text properties of the first to “Text” and its Name properties to “rbText” and the second RadioButton Text properties to “Hex” and Name properties to “rbHex“.

To view the code, right click inside your form and click “View Code”, a window similar to this one below will open (Form1.cs):
The first thing to do is to add “using System.IO.Ports” namespace to be able to access serial port commands as shown below on line 20.
Note that two forward slashes ( // )in C programming are used to write a comment. You will see a lot of them in this tutorial to try and explain what the codes are doing.

The next thing to do is to update the COM Port ComboBox with all the Ports available on the computer when this application runs.
To do that, go back to your form design view (click on Form1.cs[Design] or right click inside your code and select View designer) and double click on top of the form or anywhere inside the form but not on any control, this will open the Code View again with a Form1 load event (line 31). Any code written inside those two curly bracket { } will be executed every time this form loads (start).
Let us create a function “private void updatPorts()” (line 36) to retrieve all the port names inside your computer.
Call this function in Form1 Load event (line 33).

Run the application from the Debug Menu then Start debugging or click on the green triangle icon on the ToolBar.
Your application should run without any errors and your Port Name combo box should display the list of ports on your PC (make sure your PC has at least one COM port if not connect a USB to RS232 converter as shown below otherwise your application will generate an error (You can use Ty-Catch statement to prevent your application from crashing)).

Buy Serial to USB Converters from our Online Shop

Alternatively, you can use Virtual Serial Port Driver Pro to generate virtual COM ports fro your application.

Virtual Serial Port Driver Pro is a professional utility that allows creating virtual serial ports which completely emulate the behavior and parameters of hardware COM interfaces. With the software, you can create as many virtual serial ports as you need. It’s an efficient solution for managing real and virtual serial ports.

You can learn more and download the Virtual Serial Port Driver software from Eltima Software website.

If you want to learn how to control your microcontroller from a PC Graphical User Interface, please read this article:

Controlling a PIC Microcontroller from a PC Graphical User Interface (GUI) 

Watch the Video Tutorial

Connecting to a COM Port

To connect to a com port is very easy, the “System.IO.Ports” namespace has all you need to communicate.
To start a communication you need:
  1.  

2. 

3. 

with these two lines you can open COM1 for communication but because your computer might have more than one port especially if you are using a USB to serial converter it is better to let the program populate all the installed ports on your computer and allow you to choose one.

Writing Data Out to Serial Port

To writing Data out you must make sure a com port is already open that is why we disabled the “Send Button” so before the connection.
1. If you are going to write a Text data, you can write data out straight to the port:    

2. If you are going to write a series of Hex data, convert it first to a set of bytes. 

Reading Data from the Serial Port

To read from the serial port, we need to create and listen to an event continuously for incoming data.
When data is received, it raises the event.
In the Connect function after we have opened the serial port, create ComPort.DataReceived event:

Create the SerialPortDataReceived function that will be called when there is data in the receive buffer:

To avoid cross thread error when reading form a different thread, set the CheckForIllegalCrossThreadCalls to false in the Form1_Load event:

Data recived from the serial port is coming from another thread context than the UI thread.
Instead of reading the content directly in the SerialPortDataReceived, we need to use a delegate.

Learn more about the SerialPort Class from Microsoft website:

SerialPort Class

Full project code:

Download Serial Port Communication Visual Studio Project