Drag-and-Drop Data Binding

Chapter 16 looked at a variety of visual techniques for composing a bound UI. But in the data binding world, there's visual, and then there's visual; the Data Sources window not only manages data sources, but also helps minimize the time it takes to construct a bound UI. That's because it allows you to drag data sources and drop them onto a form, as shown in Figure 17.1.

Figure 17.1. Drag-and-Drop Data Binding

When a data source is dropped onto the form, the Windows Forms Designer automatically generates a bound UI comprising two things: a BindingSource component to represent the data source; and one or more controls bound to the BindingSource for viewing, editing, and navigating the data source.^[1] The kind of UI that is generated depends on your choice, which you specify from the drop-down menu for the data source in the Data Sources window, as shown in Figure 17.2.

^[1] Note that the generated controls are positioned left-to-right, top-to-bottom starting from where the mouse hot spot is when a data source is dropped onto a form.

Figure 17.2. Configuring the UI to Be Generated When a Data Source Is Dragged and Dropped

The default option is DataGridView, with Details as the only other draggable option. If you don't want a data source to be dragged onto a form, you choose [None]. To change the default option, add options, or remove options, you click Customize to open the Options dialog.^[2] In most cases, however, you'll likely be concerned with either the DataGridView or the Details option.

^[2] Data UI customization is also available from Tools | Options | Windows Forms Designer | Data UI Customization.

DataGridView Bound UIs

The DataGridView UI is the default option for generating a complex-bound UI, as shown in Figure 17.3.

Figure 17.3. Drag-and-Drop DataGridView UI

The result is a form that comprises two elements. The first is a BindingSource that's bound to the data source you dragged from the Data Sources window (in this case a typed data set, and hence the additional typed data set and table adapters). The second is a DataGridView and BindingNavigator, both bound to the BindingSource component.^[3] Additionally, the Windows Forms Designer creates reasonable default names for each generated component or control it adds to the form.^[4] All you need to do is configure the final layout of the DataGridView UI.

^[3] The generated BindingNavigator includes an additional Save button, which is enabled only when a database data source is dropped onto a form. Also added to the form is code to save changes to bound data sources.

^[4] Unfortunately, this handiwork doesn't extend to the naming of each column generated for DataGridView.

When you create a DataGridView UI by dragging and dropping a data source that exposes a typed data set, the Windows Forms Designer generates the code to load the typed data set and also generates the code to save changes made from the UI:

// DragAndDropGridViewForm.cs DragAndDropGridViewForm : Form {   ...   void DragAndDropGridViewForm_Load(object sender, EventArgs e) {     // TODO: This line of code loads data into the     // 'NorthwindDataSet.Employees' table. You can move     // or remove it, as needed.     this.employeesTableAdapter.Fill(this.NorthwindDataSet.Employees);   }   void employeesBindingNavigatorSaveItem_Click(     object sender, EventArgs e) {     this.Validate();     this.employeesBindingSource.EndEdit();     this.employeesTableAdapter.Update(this.NorthwindDataSet.Employees);   } }

The save code is deployed in the event handler for BindingNavigator's Save button. When a BindingSource exposes a typed data set, the Save button is enabled by default; otherwise it's disabled. The save code also does its best to ensure that the data is in a consistent state by validating the form and its controls and ending editing of the current item. Then, it calls the typed table adapter's Update method to save changes back to the database.

The same code is generated for BindingSource components that expose typed data sets when you build a Details UI.

Details Bound UIs

When the Windows Forms Designer generates a Details UI, it creates labels and simple-bound controls for each of the data source's properties, as shown in Figure 17.4.

Figure 17.4. Drag-and-Drop Details View UI

As before, the Windows Forms Designer generates a nice set of control names and label text for you. However, it's a little trickier to create a useful default for the generated layout, given the complexities of UI layout and design, so you're very likely to finagle the form's final appearance.

The Windows Forms Designer makes educated guesses as to the type of control that is generated for each data source property. If you're not satisfied, you can override those guesses by configuring each property in the Data Sources window, as shown in Figure 17.5.

Figure 17.5. Configuring the Controls to Be Generated When Data Source Properties Are Dragged and Dropped

When any of these controls is dropped onto a form, it is simple-bound to the data source property it was dragged from. Specifically, the TextBox, ComboBox, Label, and LinkLabel controls are bound by their Text properties, and the ListBox is bound by its SelectedItem property. The ListBox and ComboBox options provide support for lookups, which are discussed later in this chapter. You can alter the options in this list in the Options dialog by clicking Customize.

Drag-and-drop data binding support doesn't end here. You can actually drag your UI from the Data Sources window in a field-by-field manner. If you prefer this finer-grained approach to building your UI, you'll be happy to discover that the data bindings and nice names are still created automatically to save you the effort. Also, if your UI has already been laid out in preparation for binding or if you wish to change the binding of a specific control, you can connect the dots by dragging data source fields directly onto existing controls. The Windows Forms Designer ensures that the resulting binding is created.