Multi selection in a CoverFlow view

CoverFlow by default is an single selection model. The item that is in the center is always the selected item and as you keep navigating from left to right, the selected item changes. To introduce a multi-selection mode into a seemingly single selection model, will require some fundamental changes.

Selection is different from Navigation

In the CoverFlow view, the selection is implicitly tied to navigation. If you click an item, it is implicitly made the selected item by bringing it to the center. Similarly a keyboard Up/Down/Left/Right and MouseWheel scroll changes the selection. The item in the center is always the selected item and also the navigation anchor for the view.

To make CoverFlow incorporate a multi-selection mode, we need to make a clear distinction between selection and navigation and have separate interaction for both. I have made some core structural changes to the virtualized CoverFlow view that I mentioned sometime back (here, here), to allow a multi-selection mode.

The Mousewheel scroll and Keyboard drive the navigation. Additionally there is a separate ScrollBar that can be used for navigating the items. The item in the center no longer represents a selected item. Rather selections happen by directly clicking on items. It follows the same selection model that you have in a ListBox, namely the Extended selection mode. A mouse-click with a modifier key drives the multi selection. Ctrl adds to a selection, Shift does a range selection and Ctrl+Shift adds a range selection. Of course clicking without any modifiers clears all previous selections and single selects the clicked model.

In the video below you can see all of this in action. A bluish bar on top of each item represents a selection.

Similar Posts:

• CoverFlow with UI Virtualization
• A Carousel View for ElementFlow
• A panel that scrolls about a half-circle
• How to do Sort / Filter / Group in your custom control
• Virtualized CoverFlow with dynamic Add/Remove