How to Create a Bill of Sale Form Using WinForms InputPanel
InputPanel is a popular WinForms component that functions as a full-featured data-entry form. Multiple input components are managed by InputPanel, which controls their design, layout, appearance, and behavior to create a powerful data input application.
All C1InputPanel input components have a common set of styles, properties, methods, and events that make programming tasks easier and more consistent. This simple setup combined with low maintenance helps increase productivity.
The InputPanel control provides an InputGridPanel component that you can use to place child controls in the form of rows and columns. It automatically arranges dependent components not to overlap or are skewed when resizing.
A grid with rows and columns can contain any form elements and looks like cells of different sizes and can also be merged. You can learn more about the InputGridPanel from the documentation here.
To demonstrate how to utilize the InputGridPanel in the application, let's take the use case to create a bill of sales of any product with seller's and buyer's details. It also showcases how you can put validation on the input fields with the help of certain events.
At the end of the implementation, you will see the final output form that consists of both the buyer and seller data with product information as below:
To implement the use case, the blog has been divided into three significant steps as below:
- Create a Layout using the Windows Form Designer
- Bind the C1InputPanel controls to Data Source
- Add validations to the input components
Create a Layout Using the Windows Form Designer
ComponentOne C1InputPanel is a Windows Forms-based control. To use the C1InputPanel control, you must first create a Windows Forms application and design your sales form using the InputGridPanel Element Collection option in the designer as follows:
1. Create a New WindowsForms Application and Add the InputPanel Control
If you have installed the ComponentOne WinForms suite in your system, you must see the C1InputPanel control in your toolbox, and you can drag-drop the C1InputPanel control from the Visual Studio Toolbox to your window form.
If the ComponentOne product is not installed in your system, then you need to add the following package from the NuGet Package Manager to get the control in your toolbox.
2. Add the InputGridPanel Layout
To add the InputGridPanel component to the C1InputPanel control, use the Add New Item option under the Smart button menu on the right top side of the control.
You can also open the C1InputPanel Item Collection Editor by clicking the ellipses on the Items property of C1InputPanel from the Property window.
3. Add Items to the InputGridPanel Layout
The next step is to add the items to your InputGridPanel layout to input the data through the Item Collection Editor at design time. You can use this Collection Editor to add, remove, or edit elements in the InputGridPanel layout.
To launch the InputGridPanel Item Collection Editor, select the InputGridPanel layout on the form and click the ellipsis next to Elements in the Properties window.
You can see the following GIF to see how you can design the Seller section by setting the ColumnIndex, ColumnSpan, RowIndex,and RowSpan properties accordingly. Similarly, you can do it for the Buyer section.
For the Information section, you can refer to the image:
Bind the C1InputPanel Controls to Data Source
By now, we've added various components to the InputGridPanel, and we also need to bind data to each component as per the requirement. This can be done at design time from a data source or programmatically. In this demo, we will be implementing it programmatically as follows:
1. Create a Custom Class to Struct the Data**
Create a SaleInfo class and Transactor struct to bind input control with the appropriate properties. The data file looks like following:
2. Add the BindingSource Component to Load the Data
Add a BindingSource component on the window form using VS toolbox and set its DataSource property to SaleInfo class.
3. Assign BindingSource as DataSource
Set the BindingSource as the DataSource of each input control and assign the appropriate value to the DataField property.
4. Load the Data via BindingList
We have bound each input control to the data source, so now it's time to create and fill the data in the control. We need to create a BindingList of SalesInfo class and add the Seller and Buyer data into it using the Transactor struct. Finally, assign the added element of the BindingList as the data source of our BindingSource component.
Note: To learn more about binding C1InputPanel with data at design time, refer to the DataBinding topic.
Add Validations to the Input Components
In this step, we will validate using Validating and KeyDown events of C1InputPanel controls to ensure that the user enters the valid input otherwise prevents going to the other input field until they fill the valid entry.
To have a colorful UI, we have added the option to apply the different Office2016 themes to the application via C1ThemeController. The following code snippet implements how to change the theme at runtime:
Note: You can learn more about C1ThemeController from the documentation here.
The final output form that consists of both the buyer and seller data with product information looks is shown below:
If you have the C1 WinForms suite installed, the sample can be found in the following place on your system.
For .NET 6.0 controls: C:\Users\UserName\Documents\ComponentOne Samples\WinForms\v6.0\InputPanel\CS\InputPanelExplorer
For .NET 4.5.2 controls: C:\Users\UserName\Documents\ComponentOne Samples\WinForms\v4.5.2\InputPanel\CS\BillOfSale
You can also download it from the Github links:
For .NET 6.0 controls | For .NET 4.5.2 controls
Please feel free to try it out and leave your feedback or questions in the comments section. Happy Coding!