Skip to main content
All docs
V24.1

Contact List

  • 2 minutes to read

A styled contact list with integrated search.

Contact List - WinForms UI Templates | DevExpress

What’s Inside

The Contact List (ContactList) is an XtraUserControl. It integrates the pre-customized WinForms Data Grid (TileView) and Search Control.

Getting Started

Add the Contact List template to your WinForms project. Locate the UI template in the Toolbox and drop it onto the Form.

Contacts (List Items)

The ContactList.Contact class represents an item in the list. The table below lists its fields (public properties).

Property Name Type Description
Avatar Image Gets a contact’s picture.
UserName String Gets a contact’s name.
LastActivity DateTime Gets a contact’s last active time.
LastOnline DateTime Gets whether a contact is online.
Use the SetLastOnline method to set this property.
IsActive Boolean Gets whether a contact is active.
Use the SetActive method to set the active state.
UnreadCount Int64 Gets the number of unread messages.
Use the SetUnreadCount method to set this property.

Create and Add Contacts

Open the YOUR_PROJECT\UserControls\ContactList.cs file. Use the ViewModel’s OnCreate method to create contacts and add them to the Contact List. You can add contacts as shown in the example below or load contacts from a data source.

public partial class ContactList : XtraUserControl {
    // ...
    public class ViewModel {
        public virtual List<Contact> Contacts {
            get;
            protected set;
        }
        public void OnCreate() {
            var contacts = new List<Contact> {
                /* Uses the generic contact pictures that ship
                   as part of the WinForms UI Templates. */
                new Contact(1, "John Smith", Images.Users.SampleUser1),
                new Contact(2, "Mary Brown", Images.Users.SampleUser2),
                new Contact(3, "John Doe", Images.Users.Unknown)
            };

            // Adds a new contact with a custom picture.
            contacts.Add(
                new Contact(4, "BB 8", Image.FromFile(@"c:\\images\custom-avatar.png"))
            );

            // Initialize the contact settings.
            contacts[0].SetActive();
            contacts[0].SetUnreadCount(2);
            contacts[1].SetLastOnline(DateTime.Now.AddHours(-4));
            contacts[2].SetLastOnline(DateTime.Now.AddYears(-1));
            Contacts = contacts;
        }
        // ...
    }
    // ...
}

Parameters

Name Type Description
id Int64 An integer value that identifies a contact.
userName String A contact’s name.
image Image A contact’s picture.

Note

The Contact List is built on HTML & CSS templates. Its HTML template is bound to the following properties: Contact.Avatar, Contact.UserName, Contact.LastOnlineText, Contact.UnreadCount. Do not rename these properties to avoid layout issues. Otherwise, you should update data bindings in the HTML template (YOUR_PROJECT\Assets\HTML\Contact.html).