This article requires update, please wait for it. For those who can’t wait, the problem is that you need to define an additional dependency property for empty template. You cannot simply set control template to null. I apologize for the inconvenience.

In the previous post I have shown how to fake “empty ListBox template” using visual states. The proposed solution is very intrusive since it requires editing the built-in (or customized) control template. You have to design the template carefully to avoid any visual state corruption.

And if we want to introduce the third template, let’s say we want to have also “download in progress” template (similarly to the way Marketplace search works), the control template would become unmanageable. It would be best to completely separate each template from normal template, and this is exactly what we are going to do today.

The final result will give us something like this:

read more »

ListBox can be customized in a lot of different ways: you can change the item template, the container or the control template. However, there are some common states which cannot be easily set. For example, if you want to display “No items match your query” as a property of the ListBox itself, there is no such template. Similarly, the template for “data is loading” does not exist. These are all common requirements for building a pleasant UX.

When you are searching the WP7 marketplace from your phone you will get a message when no applications can be found with the specified criteria. Also, before the search is complete, the progress indicator is displayed in the middle of the ListBox indicating that it is currently being filled. This is somewhat better UX than using the progress indicator in the system tray since the user knows that the list box is not ready rather than the generic “application is doing something so please wait.” We want to replicate such design easily. Luckily, you can achieve this functionality in several different ways:

1. Place an invisible TextBlock element which will be visible when there are no elements found. Toggle the visibility in your OnCompleted handler.
2. Create a user control which contains the logic and a dependency property for the “empty message”
3. Inherit custom control from ListBox and create custom control template.

In the first solution you have to add elements to the page which should not belong there, maintenance is reduced and you have to c/p the same snippet all over the place. In the second solution you lose the ability to simply style the ListBox control inside the UserControl. There should be a simple, portable (in a sense that we can apply it to other ListBox-like control like controls), maintainable and customizable solution. The third solution prevents you from enhancing other inherited ListBox controls which might be detrimental.

In this post I will present one method for adding such “empty template” and “progress template” using visual states. read more »