How to create Listview with both Gridlayout and ListLayout

Question

Hi,

I have been looking at the Design Case Study: iPad to Metro App guidelines, which uses a Photo Journal App to demonstrate migrating from iPad to Metro. I noticed the metro app somehow had a ListLayout section for recent comments and a GridLayout section for photos, all in one ListView (it must have been in one ListView, since SemanticZoom encompassed it all). As far as I am aware, the layout property can only be Grid or List for a ListView, not both. How was this accomplished in Microsoft's example?

Answer 1

The home or hub page that's shown in the case study would not be implemented with a single ListView control. Rather, you'd implement a pannable div (styled with overflow-x: auto) that would contain multiple ListView controls--one with ListLayout for the comments, and then another ListView for each group of photos (by year), or possibly a single ListView grouped by year.

To handle semantic zoom, then, the top-level div would need to implement the WinJS.UI.IZoomableView to handle semantic zoom, as would the zoomed-out view, which would be another div containing zoomed-out views of the other lists. This interface is what makes an element/control able to be inside a semantic zoom control. A reference for this is the HTML SemanticZoom for custom controls sample.

.Kraig

Answer 2

Would the structure be like this? Is it possible for the zoomed out view to be the same custom control?

<div class="sezoDiv" data-win-control="WinJS.UI.SemanticZoom">
                <div class="zoomedIn" style="overflow-x: auto" data-win-control="CustomControl">
                    <div class="listlayout" data-win-control="WinJS.UI.ListView"></div>
                    <div class="gridlayout" data-win-control="WinJS.UI.ListView"></div>
                </div>
                <div class="zoomedOut" style="overflow-x: auto" data-win-control="CustomControl">
                    <div class="listlayoutOne" data-win-control="WinJS.UI.ListView"></div>
                    <div class="listlayoutTwo" data-win-control="WinJS.UI.ListView"></div>
                </div>
</div>

I imagine that a custom IZoomableView that only involves displaying two ListViews side-by-side would be simple. However, the sample you provided seems to overcomplicate it. For one thing, is the ZoomableView class in the sample necessary when creating a custom control?

Answer 3

Yes, that's the HTML structure. Because you have two elements with CustomControl, you'll have two instances of that control, but there's no problem using the same control class.

The ZoomableView class in the sample is how the custom control is implementing the WinJS.UI.IZoomableView interface, but it adds a couple more things for itself. The key thing is that the control must have a property called zoomableView that is an object with the IZoomableView methods. Anything else is an extra detail for the sample.

Answer 4

I made an IZoomableView custom control which simply displayed a canvas with the two listviews side-by-side. Although I do see a horizontal scrollbar, neither of the listviews, recent comments or content, renders. My code:

var horzControl = WinJS.Class.define(function (element, options) {
        this._element = element;


        var notif = element.getElementsByTagName("div")[0];
        var grouped = element.getElementsByTagName("div")[1];


        this._viewport = document.createElement("div");
        this._element.appendChild(this._viewport);

        this._canvas = document.createElement("div");
        this._viewport.appendChild(this._canvas);

        this._viewport.style.position = "absolute";
        this._viewport.style.overflowX = "auto";
        this._viewport.style.overflowY = "hidden";

        this._canvas.style.position = "relative";
        this._canvas.style.overflow = "hidden";

        var viewportWidth = this._element.offsetWidth;
        var viewportHeight = this._element.offsetHeight;

        this._viewport.style.width = "100%";
        this._viewport.style.height = "100%";

        var marginTop = 0.5 * viewportHeight - 20;

        this._itemWidth = 80;
        //TODO: revise this
        this._canvas.style.width = "100%";

        var that = this;

        this._canvas.appendChild(notif);
        this._canvas.appendChild(grouped);


        this._element.winControl = this;

Answer 5

If the ListViews aren't rendering it suggests that they aren't being instantiated as children of the custom control. How are you declaring them/creating them? WinJS.UI.process has to be called for them at some point, either directly or through WinJS.UI.processAll.

When you run the app in the VSdebugger and look at the DOM explorer, or open the project in Blend and look at the Live DOM, do you see anything for those ListView controls? This is a good way to check if they're actually being created.