Next Steps

Download the library.

View more detailed Documentation.

Introduction

These controls keep themselves up-to-date automatically. Create visually stunning, highly interactive Windows forms. Update Controls simplify UI programming. And the new tab control features inertia.

How it Works

With other controls, you set properties like "Text" to put data into the form. When the data changes, you have to set the property again. But with Update Controls, you implement events like "GetText". The controls automatically update themselves when the data changes.

The following code is all it takes to attach the First Name text box to the data object:

public partial class ContactForm : Form
{
    private Contact _contact;

    public ContactForm(Contact contact)
    {
        _contact = contact;
        InitializeComponent();
    }

    private string firstNameTextBox_GetText()
    {
        return _contact.FirstName;
    }

    private void firstNameTextBox_SetText(string value)
    {
        _contact.FirstName = value;
    }
}

The data is stored in a simple object. We start by defining independent fields and their properties:

public class Contact
{
    private Independent<string> _firstName   = new Independent<string>();
    private Independent<string> _lastName    = new Independent<string>();
    private Independent<string> _phoneNumber = new Independent<string>();
    private Independent<string> _email       = new Independent<string>();

    public string FirstName
    {
        get { return _firstName; }
        set { _firstName.Value = value; }
    }

    public string LastName
    {
        get { return _lastName; }
        set { _lastName.Value = value; }
    }

    public string PhoneNumber
    {
        get { return _phoneNumber; }
        set { _phoneNumber.Value = value; }
    }

    public string Email
    {
        get { return _email; }
        set { _email.Value = value; }
    }
}

Then, we add our own business logic:

    public string FullName
    {
        get
        {
            if (string.IsNullOrEmpty(FirstName) && string.IsNullOrEmpty(LastName))
                return "New Contact";
            else
                return string.Format("{0}, {1}", LastName, FirstName);
        }
    }

Now our data object is ready for any Update Controls that we want to attach to it. Now or in the future.

Download and Install

Update Controls requires Visual Studio .NET 2008 or later. It adds controls to the Toolbox, and an add-in for generating dynamic properties. Once the installer finishes, open Visual Studio and start working on your first Update Controls application.

The Toolbox

Two sections were added to your toolbox. The Update Controls Themes section contains controls that have an appealing refractive three-dimensional look. These controls include ThemedButton, ThemedCheckBox, and ThemedRadioButton. These controls are better-looking versions of their standard counterparts. You also get the ThemedTabDeck, which gives you a tabbed document experience with reordering, closing, tab images, and best of all inertia. Here you will also find the Theme component, which controls the appearance of all controls in this section.

The Update Controls section contains the standard Windows controls with update behavior. These controls include UpdateTextBox, UpdateTreeView, and UpdateGrid. Build your forms using these controls instead of the standard Windows controls. To attach them to data, handle Get and Set events instead of setting properties.

The Contact Form

Start a new project and rename Form1 to ContactForm. Add four standard Labels and four UpdateTextBox controls. You don't need UpdateLabels for this step, since the label text is static.

It's a good idea to set the Anchor property on all four UpdateTextBox controls to "Top, Left, Right". This will cause the controls to stretch with the window.

The Contact Class

Add a new class to your project called Contact. You will have to make this class public. Add four private fields to the class:

public class Contact
{
    private string _firstName;
    private string _lastName;
    private string _phoneNumber;
    private string _email;
}

Now select the four fields and invoke the "Generate Dynamic Properties" command from the "Tools" menu, or just press Ctrl+D, Ctrl+G. The library will generate code for accessing these values.

The Get and Set Events

Go back to the ContactForm, right-click, and select "View Code". The form needs a Contact object to edit, so add a private Contact called "_contact". Add a constructor parameter to initialize this field.

public partial class ContactForm : Form
{
    private Contact _contact;

    public ContactForm(Contact contact)
    {
        _contact = contact;
        InitializeComponent();
    }
}

Go back to the designer and select the first name text box. You may want to change its name to "firstNameTextBox" to make the code more readable. In the "Properties" window, click the lightning-bolt "Events" button. Double-click the event GetText, and have the method return _context.FirstName. Go back to the designer and double-click SetText. Have this method set _context.FirstName to the value parameter.

    private string firstNameTextBox_GetText()
    {
        return _contact.FirstName;
    }

    private void firstNameTextBox_SetText(string value)
    {
        _contact.FirstName = value;
    }

Do the same thing for the other controls, attaching them to the other properties.

The Program

Open the Program class and edit the Main method. The ContactForm takes a Contact object as a constructor parameter, so the Program has to supply it. Create one and pass it into the ContactForm constructor.

        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Contact contact = new Contact();
            Application.Run(new ContactForm(contact));
        }

For good measure, let's create a second form that edits the same contact. Add a line before Application.Run to show another one.

        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Contact contact = new Contact();
            new ContactForm(contact).Show();
            Application.Run(new ContactForm(contact));
        }

Now run this program and you will see that the two forms are linked to each other through their common Contact object.

© 2009 Mallard Software Designs, Inc.