Contact List
- 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. |
User |
String |
Gets a contact’s name. |
Last |
Date |
Gets a contact’s last active time. |
Last |
Date |
Gets whether a contact is online. Use the Set method to set this property. |
Is |
Boolean |
Gets whether a contact is active. Use the Set method to set the active state. |
Unread |
Int64 |
Gets the number of unread messages. Use the Set 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. |
user |
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.
, Contact.
, Contact.
, Contact.
. Do not rename these properties to avoid layout issues. Otherwise, you should update data bindings in the HTML template (YOUR_PROJECT\Assets\HTML\Contact.