DataRepeater Control for Windows Forms

 

The DataRepeater control is available in the Visual Basic Power Packs.

As Yun Feng introduced in his post, the Visual Basic Power Packs is included in Visual Studio 2008 Service Pack 1 and will also be shipped in Visual Studio 2010.

The DataRepeater control is my favorite component in the Visual Basic Power Packs, which I proudly participated in from start to finish. Recently I monitored the Visual Basic Power Packs forum and I found that customers are saying nice things about the DataRepeater control as well. A lot of good questions have been asked in the forum. For example, how to print all the data in the DataRepeater, how to display unbound data, how to host a data bound ComboBox in the DataRepeater, etc… I feel motivated to write some posts to answer these non-obvious questions.

In this post, I will first present the unique features of the DataRepeater control from my perspective. Then I will show a simple walk through for using a DataRepeater control in a data binding application. At the end, I will list the resources available for reference.

First of all, I would like to point out that the DataRepeater control is a true .Net Windows Forms control. It can be used not only by Visual Basic but also for any other .Net language (e.g. C#). You may be curious why it is under the Visual Basic Power Packs “brand”. The project was initially designed to help VB6 customers migrating to the .Net world with familiar experience and environment. We started the project with the Visual Basic customers in mind as there was already a Data Repeater Control in Visual Basic 6 and unfortunately there was no corresponding control in Visual Studio.Net 2002 to 2008. After we created the control we realized that it would be good for all .NET customers and we decided to make it available to all of Visual Studio.

To differentiate the DataRepeater controls in VB6 and the one now in Visual Studio 2008 SP1, in this article I would call them VB6 DataRepeater and PowerPacks DataRepeater (or simply DataRepeater). The PowerPacks DataRepeater inherits the basic concept of the VB6 DataRepeater control to display repeated data in a scrollable container. Even more, the PowerPacks DataRepeater has significant improvements over the VB6 DataRepeater. The PowerPacks DataRepeater is modern (as I said, it is a .Net control can be used by all languages), more powerful, has more functions, and yet easier to use taking all the advantages of the .Net and Visual Studio Data Access tools and technologies.

For example, in VB6, you need to create an intermediate user control to host the VB6 DataRepeater and set up the data binding there, build it and then include the user control in the host form. With PowerPacks DataRepeater, the intermediate user control is no longer needed! You can now drag and drop the DataRepeater control onto the hosting form directly, and then drag and drop controls on its item template section. You will enjoy a truly WYSIWYG design experience.

Although both DataRepeater controls can host free style controls in the item template section, the PowerPacks DataRepeater allows you to have even more controls on the layout and the appearance of the repeating items. You can use the DrawItem event to customize the color or other appearances as you wish. The LayoutStyle property lets you specify orientation (vertical or horizontal) of the displayed items. The orientation feature is really attractive and I have seen some customers choose the DataRepeater over the DataGridView simply because the DataRepeter can show data in horizontal orientation.

Talking about the DataGridView, the PowerPacks DataRepeater control can be seen as an alternative control to the DataGridView. The PowerPacks DataRepeater follows the design of the DataGridView and you can find many properties (e.g. the Virtual Mode property) in DataRepeater control in parity with the DataGridView. This description from MSDN document best describes the role of the PowerPacks DataRepeater -- “It can be used as an alternative to the DataGridView control when you need more control over the layout of the data.”

The PowerPacks DataRepeater control applies a virtualization technique to display the data in a fashion that scrolling and navigation is fast while rich UI and visual effects are still retained. For example, all displayed controls on the display surface are real controls and you can interact with them without delay. Scrolling is smoothly simulated while VB6 DataRepeater does not have a scroll effect.

You can further improve performance by turning on the Virtual Mode when you want to display large quantities of tabular data in a PowerPacks DataRepeater control. The Virtual Mode allows you explicitly manage the control’s interaction with its data source. Therefore you can load the data rows only when necessary to reduce the initial loading time. You can also reduce the memory consumption by only loading part of the rows into memory at any given time. Notice that if you already have all data rows loaded into memory like a DataSet filled by the TableAdapter.Fill method, you will not have the performance gain with Virtual Mode.

To demonstrate the ease of use of the PowerPacks DataRepeater control, let me give you a walkthrough for building an application with the DataRepeater control.

First I would create a C# Windows Forms Application in Visual Studio 2008 SP1 or 2010 (yes, I purposely choose a C# project here to show that it is not only for VB, the steps in this demo have no difference between C# and VB).

And then I want to create a DataSet data source with the DataSource Configuration Wizard or DataSet Designer. I will assume you are familiar with this part and a DataSet with Employees table connecting to the sample Northwind database is ready to use. You will see that the Data Sources Window on the left hand side is populated with the Employees Datatable (see Picture 1 bellow).

DataRepeater1

Picture 1 – DataSet designer and Data Sources window.

Now, let’s open the Form and show the Toolbox. You can find the Power Packs tab (see picture 2, marker 1, shortened as Pic.2-1), expand it and you will find the DataRepeater toolbox item (Pic.2-2). Drag and drop the DataRepeater toolbox item to the form (Pic. 2-3), you will see two sections in the location of the DataRepeater1 control on the form. The outer section (Pic.2-4) is the total display area of the control and the inner section (Pic.2-5, a.k.s. the Item Template section) holds the repeating items. It also defines the size of the repeating items and the location of the first item. You can fine tune the look and feel of the outer and inner section of the DataRepeater control as you wish.

DataRepeater2

Picture 2. Drag and Drop DataRepeater to the Form

I select my DataRepeater by clicking on the outer section of the DataRepeater, the Property Brower should show as in Pic. 3-1. And I set the anchor as top-left-right (Pic.3-2) and the LayoutStyle as Horizontal (Pic. 3-3).

DataRepeater3

Picture 3. DataRepeater layout

Now, let’s fill the DataRepeater item template section with some data bound controls. I show the Data Sources Window (Pic. 4-1), change the employees table’s view to detail (Pic. 4-2), change the First and Last Name to label (Pic. 4-3), leave the Title as default TextBox (Pic. 4-4), and change the Photo to a PictureBox (Pic. 4-5). I then drag and drop these items to the DataRepeater item template section as indicated in the picture and remove the unnecessary extra labels. Note that it will also cause the auto creation of the navigator bar (Pic. 4-6), Dataset, BindingSource, TableAdapter, etc.(Pic. 4-7). The experience is exactly the same as when you drag and drop detail view items from the Data Sources window to a form or any container control. The difference is now the data bound items in the Item Template section will now be repeated at run time.

DataRepeater4b

Picture 4. Drag and drop detail view items from Data Sources window to the item template section

Now I am happy with the setup and eager to see what is out there, I hit F5 to test my app, and I got this result, that is all I need. You can scroll the data by clicking on the scroll bar or the forward and backward button on the navigation bar. You can select an item, and modify the value on any editable control on the item like Title text box (Pic. 5-1). You can add new item (Pic. 5-2), delete an item (Pic. 5-3). And you can save all the changes (Add/Delete/Update) with the save button (Pic. 5-4).

DataRepeaterBloggers3

Picture 5. Run time result

To summarize, creating a data binding application can be simply done with these 3 steps: 1) Create the data source; 2) Drag and drop a DataRepeater control to the form and adjust its look and feel; 3) Drag and drop detail view items from Data Sources Window to the item template section of the DataRepeater control.

Lastly, let me wrap up with some more information:

As mentioned above, my colleagues and I will post more articles to answer some advanced or non-obvious How-Tos in the near future. Stay tuned!

---------------------------------------------------------------------------- 

Follow-up blogs:

  1. 8/27/09 Gavin Fu: How to Change Appearance of all DataRepeater Items at Run Time
  2. 9/8/09 John Chen Writing Event Handler for controls in a DataRepeaterItem