Controlling listView elements for custom animations

Question

Hi, 

I'm trying to develop custom UI animations like the ones seen in the bing news/travel/sports app. As you can see, when you scroll through the app, the various section headlines ("U.S", "Top Story", "World", etc.) stay in place in line with the app name ("Bing Daily", etc.) until they are replaced with the name of the next section. I know the css control for this item is .win-groupheader when using the listView, but I haven't been able to dig through ui.js enough to really see how the transitions work and how to identify which section is currently "in focus"... can anyone point me in the right direction? Thanks!

Answer 1

That, honestly, does not look like a ListView to me. It would be a ton of work to get listview to behave like that. It seems to be past the point where it would just be cheaper for them to make their own control based on the CSS flex-box or grid.

Answer 2

Ah, I was beginning to think that myself. It seemed that the ability to customize the listView to handle custom interactions and animations like that would be nice, but its understandable according to the design philosophy that everything seem as constant as possible. In term of making a custom control like that- I've seen basic tutorials for XAML, are there guide or samples you might know of that for HTML and CSS would get me started on making something like that? 

Answer 3

I've added a few a "exitContent" animations to the ListView surface, and I've also added animations to individual item containers (like when the user deletes a selected item, etc). It's fairly easy to do if you're just targeting elements based on their CSS class names and you use the WinJS.UI.Animation functions:

http://msdn.microsoft.com/en-us/library/windows/apps/br229780.aspx

If you're going to roll your own I would first start by getting the layout the way you want it. For that I would suggest either a flexbox or a grid (only use the grid if you really need exacting control over layout, because you'll have to calculate rows and columns and rowspan and columspan for each element):

Flexbox:

http://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx

Grid:

http://msdn.microsoft.com/en-us/library/hh673533(v=vs.85)

To programmatically create each item in your layout you can use the WinJS.Binding.Template control like the listview does:

http://msdn.microsoft.com/en-us/library/windows/apps/hh700356.aspx

To create that slick group title thing you're just going to have to get crafty, it's not something that could be done in CSS alone, it would require javascript too and you'd have to keep track of your scroll position of your surface and the position of the group title elements.

BTW, to create a viewport and surface like the listview you need to do something like this:

<div class="viewport">
    <div class="surface">
      <!-- put you content here --> 
    </div>
</div>

CSS:
.viewport {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.surface {
    width: auto;
    height: 100%;
}

The "surface" can be very very wide, but a scrollbar is created inside the "viewport" so that you can scroll left and right to see the whole surface.