oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

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


The complete code for this entire project is available for download here. To save space, this article will not reproduce the full source code, but will show the important bits as we go.

To get started, create a new Windows project named "Rolodex." Immediately add a new project of the type Windows Control Library, and call the new project "RolodexControls." Make sure both projects are in the same solution. Rename the UserControl1 that Visual Studio creates to RolodexPanel.cs. (Unfortunately, we can't do much with this custom control until we have Rolodex entries, so bear with me while we create some more custom controls.)

Note: The design and code for the Rolodex shown in this article are based on work done by Liberty Associates, Inc., on behalf of and owned by Catalyst, Inc., and are used with their generous permission.

Creating the RolodexEntry Base Class

Right-click on the RolodexControls project and choose Add -> User Control. Name the new control "RolodexEntry.cs;" the base class for RolodexEntries. Set its size to 225,75. The goal now is to factor out those features that are common to all Rolodex entries. Enter the following code:

protected const int MaxStringLength = 24;
protected const int TruncatedStringLength = 22;
protected bool selected;
public delegate void EntrySelected(object sender, EventArgs e);
public event EntrySelected OnEntrySelected;

public RolodexEntry()

protected virtual void SetSelectedProperties() { }

public bool Selected
  get { return selected; } 
  set { selected = value; } 

// will be called by the rolodex entries
protected virtual void Clicked( object sender, EventArgs e )
   if ( OnEntrySelected != null )
    OnEntrySelected( sender, e );

The base class has two constants and a Boolean (selected) for which there is a public accessor. Other than the constructor, the only methods are SetSelectedProperties (which does nothing but which will be overridden in the derived classes) and Clicked, which informs any interested observer (e.g., the form) when an entry has been selected (e.g., to show details about that entry).

Creating the Customer Rolodex Entry

Create a new user control, RolodexCustomerEntry. Set its size to 225,75. Add seven labels; the top label (lblCompanyName), stretches across the entire width of the control, and has its background color set to silver and its font set to size 12. The remaining six labels have their background color set to Control, and their font size set to 8.25. They are: lblContactPrompt, lblContactName, lblPhonePrompt, lblPhone, lblFaxPrompt, and lblFax . The CustomerRolodexEntry control is shown in Figure 3:

figure 3
Figure 3. CustomerRolodexControl

This virtual method sets the company name's BackColor to red when the entry is selected. Next, click on the form and each label in turn and set all of the Click Events to ClickHandler. Implement ClickHandler as follows:

private void ClickHandler( object sender, EventArgs e )
  Clicked( this, e );

ClickHandler invokes the base class' Clicked method, passing the current CustomerRolodexControl as the source. At this point change the derivation of CustomerRolodexControl from UserControl to Roldoex Entry (you couldn't do so before because Visual Studio would not let you look at the designer until your derived class was completed):

public partial class RolodexCustomerEntry : RolodexEntry
Override SetSelectedProperties to set the CompanyName label's background to red if the entry is selected, silver otherwise:
lblCompanyName.BackColor = Selected ? Color.Red : Color.Silver;

Finally, add a public method to load the values passed in by the CustomerRolodexPanel:

public void LoadValues(
  string companyName,
  string contactName,
  string phone,
  string fax )
  lblCompanyName.Text = companyName;
  lblContactName.Text = contactName;
  lblPhone.Text = phone;
  lblFax.Text = fax;

Pages: 1, 2, 3

Next Pagearrow