by Jeremy Foster
13. June 2012 08:56
I just read a great article in the Windows Dev Center and must share. If your making a Metro app using JavaScript and you are using a ListView control, this is essential information.
The ListView acts as a grid or a list. In XAML, there is a GridView and a ListView, but in HTML/JS the WinJS.UI.ListView serves both roles. If you want to make something like the tiles in the default grid application, you’ll need the ListView, and if you want a simple vertical repeater, you’ll use the ListView.
If you want to style the ListView, you will do so by overriding or appending CSS properties in style rules that are based on various CSS classes. Many of the classes that you might need to override are detailed and illustrated in this excellent article in the Windows Dev Center - Styling the ListView and its items.
Illustrations like the following are extremely helpful in determining what part of the ListView I want to style…
The article explains, for instance, what to do if you want to add a graphic to the surface of the ListView that pans out of view with the other items when the user swipes. In that case you would add the graphic to the win-surface. If you want the graphic to stick in place as the user pans the ListView’s items past it, then you would add the graphic to the win-listview class.
A graphic added to the win-listview will stay in place as the user pans items in front of it.
A graphic added to the win-surface will pan out of view along with the items.
Gems like this are why I think the dev.windows.com documentation is extremely helpful when coming up to speed on Metro app development. There’s so much content in there though that sometimes it’s hard to know what you are missing.
Keep an eye on my blog, and I’ll surface the gems for you.
cf67edc1-ca1d-4be8-b5ea-a064eba83f71|0|.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04
Tags:
Windows 8 | CSS