How to Create a WinForms Data Entry Form in Minutes using InputPanel
ComponentOne InputPanel is our innovative .NET control that makes it easy to create and manage complete data-entry forms. C1InputPanel can automatically generate data-entry forms, thereby reducing the time it takes to create and maintain them.
This blog demonstrates how easy it is to create a complete .NET data-entry form in minutes using the intuitive and powerful component.
Download ComponentOne WinForms Edition to get hundreds of samples and gain access to all libraries locally, including .NET Framework dlls.
With ComponentOne InputPanel, creating a complete, bound data-entry form is as simple as 1-2-3:
- Add the C1InputPanel Control to Your Form
- Attach the C1InputPanel Control to a Data Model
- Modify the Layout (Rearrange, Group and Create Columns)
Add the C1InputPanel Control to Your Form
First, you must create a Windows Forms Application, or you may create a new form within your existing application. You may select C# or VB then you may choose any version of .NET higher than 4.5.2. For this example, we will show the WinForms control, but a WPF version also exists.
You can install the control package from NuGet. Open your NuGet package manager and browse for C1.Win.InputPanel for .NET 6+ apps, or choose C1.Win.C1InputPanel for .NET Framework apps.
Once the package is installed, locate the C1InputPanel icon in the Visual Studio Toolbox and double-click it to add it to your application.
With C1InputPanel selected on your form, locate the “Dock” property in the Properties window and set it to “Fill”.
Attach the C1InputPanel Control to a Data Model
Once you have C1InputPanel on the form and properly docked, it is time to connect to a data source. In this sample, we will attach C1InputPanel to this “Employee” data model, but you can use any model in your application.
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Country { get; set; }
public DateTime HireDate { get; set; }
public Boolean IsRemote { get; set; }
}
Next, we will let Visual Studio create an Object Data Source so that we can data-bind to this model at design-time. Open the C1InputPanel Tasks menu in the top-right (also called the SmartTag).
Click “Add new Object Data Source” and then select the “Employee” class (or your custom business object).
The Employee object data source is now available to select as the C1InputPanel’s data source under the “Other Data Sources” node.
Select it and observe how the input fields are automatically generated on the form.
Notice that C1InputPanel automatically aligns the controls, adds proper label captions, and a navigation control, allowing you to quickly navigate the form at run time. It can even bind each individual editor to the data depending on your data source.
In two steps, you have created a fully functional data-entry form that can be used to view, modify, or add records to a database. This process automatically created a BindingSource for us, named employeeBindingSource, which acts as the bridge between our data and the UI. You’ll need to provide actual data to the BindingSource as well. For this brief sample, here is a record to add in the code. But keep in mind that you might load this from a CRM, SQL Server, or a file in a real application.
List<Employee> employees = new List<Employee>();
employees.Add(new Employee() { FirstName = "Greg", LastName = "Lutz", Address = "201 S. Highland Ave", City = "Pittsburgh", Country = "USA", HireDate = DateTime.Now, IsRemote = true });
employeeBindingSource.DataSource = employees;
Next, we will quickly customize the appearance of the data-entry form by rearranging the order of the items, adding a second column, and grouping related items.
Rearrange the Input Fields
You can re-arrange controls on the form anytime without worrying about restructuring the entire form. C1InputPanel automatically reconfigures the tab order and realigns the controls.
Click “Edit Items” from the C1InputPanel Tasks menu (SmartTag) to open the item collection editor.
The Collection Editor makes it easy to move single items or multiple items. From the Members list, select the "sepLine" and "navEmployee" items and press the down arrow button to move the items just below the "txtCountry" item. This moves the navigation closer to the bottom.
Break the Flow with a New Column
By default, the items flow row-to-row on the form. You can break the flow of the controls into a second column by just setting one property. To do this, select the "navEmployee" item and set its "Break" property to "Column".
The row will break and move the “Hire Date” and “Is Remote” fields to the next column. All controls are automatically aligned.
Group Related Fields
You can create a visual grouping of related fields with C1InputPanel. For example, we can group the Address, City, and Country fields into a single “Address” group that can be collapsed.
To do this, add an “InputGroupHeader” item and position it above the address-related fields. You can even make the group collapsible by setting the “Collapsible” property. Here, we also changed the label text.
Everything between group headers is part of a single group, so you may have to rearrange items further to get the organization you want.
Conclusion
In minutes, we created a polished, interactive .NET data-entry form with ComponentOne InputPanel for WinForms.
ComponentOne InputPanel makes creating data-entry forms a breeze. This tutorial demonstrated how quickly you could create and modify a data-entry form without worrying about restructuring the entire form. InputPanel for WinForms' automatic alignment and tab order makes this possible. This easy setup, paired with low maintenance yields, increased productivity over time. The next time you have to modify this form by adding or removing a field, it will take only seconds.
Download ComponentOne WinForms Edition to get hundreds of samples and gain access to all libraries locally, including .NET Framework dlls.