How to Use Expandable List Items in Windows Store Apps

We recently received the following customer question:

“Is it possible to expand items in DataBoundListBox?”

A scenario like this involves combining a list control and an expander control. The native Windows 8.1 and Windows Phone 8.1 toolkits both have ListBox and ListView controls. There’s also the Telerik DataBoundListBox. Unfortunately, no Expander control is available yet.

In this blog post you’ll see how to create a simple Expander control and integrate it with a list control. Source code is also available on GitHub.

Creating the Expander control

Note: This post will focus on creating an expandable HeaderedContentControl as opposed to an expandable HeaderedItemsControl.

The Expander is a control that displays a header and allows you, through tapping/clicking on the header, to toggle the visibility of an area that displays content. Additional features may include customization of the expand direction.

This Expander implementation can be used in both Windows 8.1 and Windows Phone 8.1 apps. It extends the system ContentControl and provides additional properties such as Header and IsExpanded.

• Header is a property of type object which allows you to put not only text in the header but also visuals
• IsExpanded allows you to programmatically toggle the state of the Expander

List integration

The toolkit that comes with the Windows Runtime offers both a ListBox and ListView controls. However, if you’re looking for a control that offers more than the default set of features, you should take a look at the Telerik ListBox for Universal Windows Apps.

Integrating the previously created Expander with a list control is as easy as adding it to the ItemTemplate of the control.

The full source code of the Expander, along with a demo app, is available on GitHub.