Contact List

• Dec 09, 2022
• 2 minutes to read

A styled contact list with integrated search.

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.

C#

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).