Using templates to change the look of combo box items
A combo box allows you to control the look of its items. In this recipe, the Movies Browser uses a ComboBox instance to display movie titles, as shown in the following screenshot:
The user experience can be enhanced by displaying not just the title, the year, the rating, but also the description of the movie as shown in the following screenshot:
How to do it...
1. Create the styles needed for the combo's items:
<style type="text/css"> .movie-item { font: normal 12px tahoma, arial, helvetica, sans-serif; line-height:150%; padding:5px 20px 5px 10px; border:1px solid #fff; border-bottom:1px solid #eeeeee; white-space: normal; color:#555; } .movie-item h2 { display: block; font: inherit; font-weight: bold; color:#336699; } .movie-item h2 span { float: right; font-weight: normal; color:#555; margin:0 0 5px 5px; width:100px; display: block; clear: none; } .panel-icon { background: url(img/folder-movie.png) 0 no-repeat !important; } <...