Listview with preview

Question

I am trying to build something like an email client. In the list of incoming emails (list is tall, narrow), I want to show the Sender, subject and date but without any horizontal scroll on one row. For example, Sender in top-left, date in top-right, and subject on the second line.

I see this kind of list in Outlook, and also in iPhone's mailbox.

I googled a bit to see if anyone else has built this kind of list, but couldn't find any.

I am using C# 2.0 for Windows, NOT WPF.

Any suggestion is highly appreciated.

Thanks for your time.

-Rakib

Answer 1

I would recommend using Better ListView. There is also freeware variant, Better ListView Express, available.

The Better ListView fixes all of the original .NET ListView bugs and you will never need to resolve its drawbacks. And the best thing is that Better ListView is a complete rewrite in 100% managed code, not a ListView wrapper:

Answer 2

To achieve what you want, you'll need to dig into layout controls such as TableLayoutPanel, Panel, etc. Then you'll need to design your own UserControl that will display a single email item (EmailItemControl).

Once you're done with that, you'll a container to hold those items. For this you can use FlowLayoutPanel. Create a new UserControl (EMailListControl), add a FlowLayoutPanel to it (flowLayoutPanel1) and set its Dock style to Fill.

Here's a basic implementation of EMailListControl:

public partial class EMailListControl : UserControl
{
    public EMailListControl()
    {
        InitializeComponent();

        flowLayoutPanel1.FlowDirection = FlowDirection.TopDown;
        flowLayoutPanel1.WrapContents = false;
        flowLayoutPanel1.AutoScroll = true;

        flowLayoutPanel1.Resize += new EventHandler( flowLayoutPanel1_Resize );
    }

    private void flowLayoutPanel1_Resize( object sender, EventArgs e )
    {
        foreach ( Control control in flowLayoutPanel1.Controls )
        {
            UpdateControlWidth(control);
        }
    }

    private void UpdateControlWidth(Control control)
    {
        control.Width = flowLayoutPanel1.Width - (flowLayoutPanel1.VerticalScroll.Visible ? SystemInformation.VerticalScrollBarWidth : 0);
    }

    public void AddEmailItem( EmailItemControl control )
    {
        UpdateControlWidth(control);
        flowLayoutPanel1.Controls.Add(control);
    }
}