6 min read

(For more resources related to this topic, see here.)

Creating a new application

We will now start using Microsoft Visual Studio, which we installed in the previous article:

  1. From the Start menu, select All Programs, then select the Microsoft Visual Studio 2012 folder, and then select Visual Studio 2012.
  2. Since we are running Visual Studio for the first time, we will see the following screenshot. We can select the default environment setting. Also, we can change this setting in our application. We will use C# as the programming language, so we will select Visual C# Development Settings and click on the Start Visual Studio button.

  3. Now we will see the Start Page of Microsoft Visual Studio 2012. Select New Project or open it by navigating to File | New | Project. This is shown in the following screenshot:

  4. As shown in the following screenshot, we will select Windows as the application template. We will then select Windows Forms Application as the application type. Let us name our application Monitor. Choose where you want to save the application and click on OK.

    Now we will see the following screenshot. Let’s start to design our application interface.

  5. Start by right-clicking on the form and navigating to Properties, as shown in the following screenshot:

  6. The Properties explorer will open as shown in the following screenshot. Change Text property from Form1 to monitor, change the Name property to MainForm, and then change Size to 322, 563 because we will add many controls to our form. After I finished the design process, I found that this was the suitable form size; you can change form size and all controls sizes as you wish in order to better suit your application interface.

Adding controls to the form

In this step, we will start designing the interface of our application by adding controls to the Main Form.

We will divide the Main Form into three main parts as follows:

  • Employees
  • Products and orders
  • Employees and products

Employees

In this section, we will see the different ways in which we can search for our employees and display the result in a report.

Beginning your design process

Let’s begin to design the Employees section of our application using the following steps:

  1. From the Toolbox explorer, drag-and-drop GroupBox into the Main Form. Change the GroupBox Size property to 286, 181, the Location property to 12,12, and Text property to Employees.
  2. Add Label to the Main Form. Change the Text property to ID and the Location property to 12,25.
  3. Add Textbox to the Main Form and change the Name property to txtEmpId. Change the Location property to 70, 20.
  4. Add GroupBox to the Main Form. Change the Groupbox Size property to 250,103, the Location property to 6, 40, and the Text property to filters.
  5. Add Label to the Main Form. Change the Text property to Title and the Location property to 6,21.
  6. Add ComboBox to Main Form. Change the Name property to cbEmpTitle and the Location property to 56,17.
  7. Add Label to Main Form. Change the Text property to City and the Location property to 6,50.
  8. Add ComboBox to Main Form. Change the Name property to cbEmpCity and the Location property to 56,46.
  9. Add Label to Main Form. Change the Text property to Country and the Location property to 6,76.
  10. Add ComboBox to Main Form. Change the Name property to cbEmpCountry and the Location property to 56,72.
  11. Add Button to Main Form. Change the Name property to btnEmpAll, the Location property to 6,152, and the Text property to All.
  12. Add Button to Main Form. Change the Name property to btnEmpById, the Location property to 99,152, and the Text property to By Id.
  13. Add Button to Main Form. Change the Name property to btnEmpByFilters, the Location property to 196,152 and the Text property to By filters.

The final design will look like the following screenshot:

Products and orders

In this part, we will see the relationship between products and orders in order to demonstrate, which products have higher orders. Because we have a lot of product categories and orders from different countries, we filter our report by products category and countries.

Beginning your design process

After we finished the design of employees section, let’s start designing the products and orders section.

  1. From Toolbox explorer, drag-and-drop GroupBox to the Main Form. Change the GroupBox Size property to 284,136, the Location property to 12,204 and the Text property to Products – Orders.
  2. Add GroupBox to the Main Form. Change the GroupBox Size property to 264,77, the Location property to 6,20, and the Text property to filters.
  3. Add Label to the Main Form, change the Text property to Category, and the Location property to 6,25.
  4. Add ComboBox to the Main Form. Change the Name Property to cbProductsCategory, and the Location property to 61,20.
  5. Add Label to the Main Form. Change the Text property to Country and the Location property to 6,51.
  6. Add ComboBox to the Main Form. Change the Name property to cbOrdersCountry and the Location property to 61,47.
  7. Add Button to the Main Form. Change the Name property to btnProductsOrdersByFilters, the Location property to 108,103, and the Text property to By filters.

The final design looks like the following screenshot:

Employees and orders

In this part we will see the relationship between employees and orders in order to evaluate the performance of each employee. In this section we will filter data by a period of time.

Beginning your design process

In this section we will start to design the last section in our application employees and orders.

  1. From Toolbox explorer, drag -and-drop GroupBox to the Main Form. Change the Size property of GroupBox to 284,175, the Location property to 14,346, and the Text property to Employees – Orders.
  2. Add GroupBox to the Main Form. Change the GroupBox Size property to 264,77, the Location property to 6,25, and the Text property to filters.
  3. Add Label to the Main Form. Change the Text property to From and the Location property to 7,29.
  4. Add DateTimePicker to the Main Form and change the Name property to dtpFrom. Change the Location property to 41,25, the Format property to Short, and the Value property to 1/1/1996.
  5. Add Label to the Main Form. Change the Text property to To and the Location property to 7,55.
  6. Add DateTimePicker to the Main Form. Change the Name property to dtpTo, the Location property to 41,51, the Format property to Short, and the Value property to 12/30/1996.
  7. Add Button to the Main Form. Change the Name property to btnBarChart, the Location property to 15,117, and the Text property to Bar chart.
  8. Add Button to the Main Form and change the Name property to btnPieChart. Change the Location property to 99,117 and the Text property to Pie chart.
  9. Add Button to the Main Form. Change the Name Property to btnGaugeChart, the Location property to 186, 117, and the Text property to Gauge chart.
  10. Add Button to the Main Form. Change the Name property to btnAllInOne, the Location property to 63,144, and the Text property to All In One.

The final design looks like the following screenshot:

You can change Location, Size, and Text properties as you wish; but don’t change the Name property because we will use it in code in the next articles.

LEAVE A REPLY

Please enter your comment!
Please enter your name here