DropDown Menu with ScrollBar in .NET

Question

I'm trying to make a user control similar to the Windows Vista/7 breadcrumb bar used in windows explorer.

However, when I show the drop down menu for a breadcrumb with many sub items, I get a very long list that sometimes exceeds the screen size.
In the Windows Vista/7 example however, there are a maximum of 18 items displayed at a time and a scrollbar appears at the right when the number of sub items exceeds this number (18).

I wanted to know if anyone out there knows a way to replicate what Microsoft does.
[That is, how to place a drop down menu in a control with auto-scroll capability.]



Thanks.
Alex

Answer 1

Windows 7/Vista breadcrumb looks similar to a list view. The following picture gives an example (on windows xp) of what I mean (the list appears clicking on the button):

and here's the code to get it:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        var button = sender as Button;

        // create fake items list
        List<string> strings = new List<string>();
        for (int i = 0; i < 36; i++)
            strings.Add("ITEM " + (i+1));
        var listViewItems = strings.Select(x => new ListViewItem(x, 0)).ToArray();

        // create a new list view
        ListView listView = new ListView();
        listView.View = View.SmallIcon;
        listView.SmallImageList = imageList1;
        listView.MultiSelect = false;

        // add items to listview
        listView.Items.AddRange(listViewItems);

        // calculate size of list from the listViewItems' height
        int itemToShow = 18;
        var lastItemToShow = listViewItems.Take(itemToShow).Last();
        int height = lastItemToShow.Bounds.Bottom + listView.Margin.Top;
        listView.Height = height;

        // create a new popup and add the list view to it
        var popup = new ToolStripDropDown();
        popup.AutoSize = false;
        popup.Margin = Padding.Empty;
        popup.Padding = Padding.Empty;
        ToolStripControlHost host = new ToolStripControlHost(listView);
        host.Margin = Padding.Empty;
        host.Padding = Padding.Empty;
        host.AutoSize = false;
        host.Size = listView.Size;
        popup.Size = listView.Size;
        popup.Items.Add(host);

        // show the popup
        popup.Show(this, button.Left, button.Bottom);
    }
}

EDIT :

To get the selected item, one way is the following:

// change some properties (for selection) and subscribe the ItemActivate 
// event of the listView
listView.HotTracking = true;
listView.Activation = ItemActivation.OneClick;
listView.ItemActivate += new EventHandler(listView_ItemActivate);


// the click on the item invokes this method
void listView_ItemActivate(object sender, EventArgs e)
{
    var listview = sender as ListView;
    var item = listview.SelectedItems[0].ToString();
    var dropdown = listview.Parent as ToolStripDropDown;
    // unsubscribe the event (to avoid memory leaks)
    listview.SelectedIndexChanged -= listView_ItemActivate;
    // close the dropdown (if you want)
    dropdown.Close();

    // do whatever you want with the item
    MessageBox.Show("Selected item is: " + item);
}

Answer 2

I recommend taking a look at it with Spy++. Everything is composed from standard Windows controls, heavily nested. The drop-down is implemented as, drumroll, a combo box. It is a largely forgotten customized one, named ComboBoxEx. I've never seen a .NET wrapper for it, probably because it does a job that's easily implemented by the plain old ComboBox wrapper in Windows Forms.

Just set its DrawMode property to OwnerDrawFixed and implement the DrawItem event to show the icon and the text. There's a very good example available in the MSDN Library article for it.

Answer 3

If you want to access the Vista API to render the bar, check out the Vista Bridge library. You can find a sample of a Bread Crumb bar control in one of the samples.

I am not sure if it will render on WinXP, however.