oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Building a Complex Custom Control: Rolodex
Pages: 1, 2, 3

Creating the Rolodex Panel

Return to your RolodexPanel control and set its size to 875,510. Add an ASP:Panel control named "pnlEntries" with a size of 872,440, and a border of Fixed3D, to the upper left-hand corner of the RolodexPanel. Add another ASP:Panel, pnlNavigation," at location 14,451 and size it to 848,40. Add 26 buttons, each sized 32,23 and each with a white background and a capital letter (A-Z), as shown in Figure 4.

This panel will be responsible for adding the (specific) Rolodex entries, raising an event when a letter button is clicked or the scroll bar is moved, and raising an event when an entry is double-clicked. There are two slightly tricky methods in this class. The first is LetterButton_Click, which is the event handler for all of the buttons on the navigation panel. You convert the sender to type button and extract the letter of the button from its Text property. You then set the Panel's chosenLtr variable to that letter and you raise the ButtonSelectedEvent. We'll see what that event does in the section on the form, below.

figure 4
Figure 4. Rolodex panel

The second interesting method is RolodexPanel_Load, in which you add the vertical scroll bar (and set its event handler) and resize pnlNavigate to accommodate the scroll bar. There is also some fine tuning of the size and positioning of the panels based on the size of the Rolodex entries. To get this to fire, click on the RolodexPanel and set its Load event handler to this method. Also be sure to set the event handlers for all 26 buttons to LetterButton_Click.

Implementing the Forms

The custom controls are now ready; you only need to create the base form and the two derived forms. The derived forms are responsible only for knowing how to access the data; all of the display work (and responding to the two events of the panel) is handled by the base form. Create a form named FrmRolodex and set its size to 887, 533 (these numbers are somewhat arbitrary; they represent the sizes I happened to use when I stretched my form and panels to an agreeable size).

The constructor registers the panel's RowFillEventEventHandler and ButtonSelectedEventEventHandler. Intellisense will help you with this. Also create four protected methods, the first three of which are virtual and will be overriden in the derived class. The last is not virtual but will be called from the derived class:

protected virtual void AddEntry( DataRow dataRow, int column, int row ) { }
protected virtual void LoadRolodex() { }
protected virtual void LoadRolodex(char letter) { }
protected void DoLoad( int count, char letter )
  this.rolodexPanel.Vbar.Maximum = count;
  this.rolodexPanel.Vbar.Value = 0;

You'll overload the FillRows method. One version will take a letter (called by the event handler for a letter-button click), and the other will take no parameters. The one that takes a letter will set the offset for the vertical scroll bar to the position it should be in for the chosen letter. This will fire the ValueChanged event on the vertical scroll bar, which is handled in the panel class which in turn fires its own RowFillEvent, which is handled back in the form by calling FillRows with no parameter.

The job of the overloaded FillRows method that takes no parameters is to fill 12 Rolodex entries into the panel. This is done by the form because it is the form that knows how to get the data from the database. Of course, that information is specialized in the derived from. Create a second form called frmCustomerRolodex. Create a data source for Northwind adding the customers and suppliers tables (at least) and drag the customers table onto your new form (you may have to expand the form temporarily to make room below the navigation panel). Four objects are created. Delete the BindingNavigator and the BindingSource--you won't need them--and readjust the height of the form.

Nasty Tricks Department

Open Program.cs and change the run statement to create a new instance of frmCustomerRolodex rather than of frm1. Also, and this is particularly sneaky, open the file frmRolodex.Designer.cs and change the access level of rolodexPanel from private to protected, so that the derived forms can access it directly.

The frmCustomer.cs code file overrides LoadRolodex to get the appropriate data from customersTableAdapter:

  (NorthwindDataSet.CustomersDataTable ) 
  northwindDataSet.Tables["Customers"] );
NorthwindDataSet.CustomersDataTable dataTable =
frmCustomer.cs also overrides AddEntry to make instances of the RolodexCustomerEntry with the data retrieved.
protected override void AddEntry( DataRow dataRow, int column, int row )
  RolodexControls.RolodexCustomerEntry entry =
    new RolodexControls.RolodexCustomerEntry();
  string companyName = string.Empty;
  string contactName = string.Empty;
  string phone = string.Empty;
  string fax = string.Empty;
  if ( dataRow["CompanyName"] != null ) 
    companyName = dataRow["CompanyName"].ToString();
  if ( dataRow["contactName"] != null ) 
     contactName = dataRow["contactName"].ToString();
  if ( dataRow["phone"] != null ) 
     phone = dataRow["phone"].ToString();
  if ( dataRow["fax"] != null ) 
     fax = dataRow["fax"].ToString();
  entry.LoadValues( companyName, contactName, phone, fax );
  entry.Left = this.rolodexPanel.StartX + column * rolodexPanel.XIncrement;
  entry.Top = this.rolodexPanel.StartY + row * rolodexPanel.YIncrement;
  entry.OnEntrySelected += 
     new RolodexControls.RolodexEntry.EntrySelected(rolodexPanel.entryClick);
  rolodexPanel.Add( entry );

Be sure to add a reference to the RolodexControls in your Rolodex application.

You'll want to build (or download) the entire source and step through it in your debugger to see precisely how the architecture shown above is implemented.

Implementing the supplier RoldoexEntry and form are left as exercises for the reader.

Jesse Liberty is a senior program manager for Microsoft Silverlight where he is responsible for the creation of tutorials, videos and other content to facilitate the learning and use of Silverlight. Jesse is well known in the industry in part because of his many bestselling books, including O'Reilly Media's Programming .NET 3.5, Programming C# 3.0, Learning ASP.NET with AJAX and the soon to be published Programming Silverlight.

Return to