How can I add a button at the end of a listView?

问题

Iwould like to add a button at the end of a listView in the same way as the bing apps do (see picture for example).

I looked for hours in google and in the microsoft documentation but canøt find anything that can give me an idea of how to do this.

Did anyone achieved this?

thanks

回答1:

If you run that app (Health & Fitness), then run Visual Studio and use Debug > Attach to Process, you can open the DOM Explorer and examine how that UI is implemented.

What you'll see in this case is that it's not using a ListView at all, but rather it's own custom control that's just based on a CSS grid. That is, just because there's a grid-like view doesn't mean it's a ListView. You can always use straight HTML/CSS layout to achieve these sorts of things, which is all that's happening here. As such, it just makes separate div's for those two "More" elements.

Now if you do want to use a ListView, there are a few things you can do. First of all, if you want to render any item in a ListView differently than others, you have to make sure to use a different template. What this means is that you use an item rendering function rather than a declarative template, which then enables you to examine the item data and programmatically decide what kind of rendering to perform.

Second, if you want to have items of different sizes, then you need to use cell spanning. In Windows 8.0/WinJS 1.0 this is a property of the GridLayout. In Windows 8.1/WinJS 2.0 you instead use the CellSpanningLayout.

I have all the details for both rending functions and cell spanning written up in Chapter 7 of my second edition preview of Programming Windows Store Apps with HTML, CSS, and JavaScript, which is a free ebook from Microsoft Press so it doesn't cost you anything. :)

来源：https://stackoverflow.com/questions/20546995/how-can-i-add-a-button-at-the-end-of-a-listview