How to place 2 nested FlipViews and how to bind each one?


  • I'd like to place 2 nested FlipViews in my metro style app.

    One vertical FlipView for the products list and another horizontal one for the product details.

    The goal is to navigate the products vertically (only full screen image) and once I need more info about a product, I will scroll horizontally to see the product details.

    I need to achieve this using HTML5/Javascript

    Monday, May 28, 2012 2:34 PM

All replies

  • This really isn't how you want metro apps too look and feel. What you want is a product ListView; tap on a product and now you're in the product detail page. Shoving everything on one page isn't the experience you want to give the users of your app.
    Monday, May 28, 2012 2:56 PM
  • Thanks for your interest Harlequin but "Design" isn't the main discussion here. I still want to achieve what I stated in my question.

    Monday, May 28, 2012 3:06 PM
  • Well your products FlipView would just have a click event on it, something like this:
    productsFlipView.addEventListener("click", ClickProduct, false);

    ...then in that click event you'd populate that FlipView with details.

    Monday, May 28, 2012 3:42 PM
  • I think the html should be something like the following, but don't know much about the javascript code that should be behind.

            <!-- Secondary binding template that contains the product's image as well as all other info -->
          <div id="SubItemTemplate" class="itemtemplate" data-win-control="WinJS.Binding.Template">
              <img class="item-image" src="#" data-win-bind="src: thumbnail; alt: title" />
              <div id="info"></div>
          <!-- Main binding template that contains another FlipView -->
        <div id="MainItemTemplate" class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <div id="subFlipView" class="itemslist" aria-label="List of products" data-win-control="WinJS.UI.FlipView" data-win-options="{itemTemplate: select('#SubItemTemplate'), orientation: 'horizontal'}"></div>
       <!--  The content that will be loaded and displayed. -->
        <div class="itemspage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Categories</span>
            <section aria-label="Main content" role="main">
                <div id="MainFlipView" class="itemslist" aria-label="List of products" data-win-control="WinJS.UI.FlipView" data-win-options="{itemTemplate: select('#MainItemTemplate'), orientation: 'vertical'}"></div>

    Monday, May 28, 2012 3:53 PM
  • You sure you don't have FlipView and ListView mixed up? ListView is something you use for a product list, like this:

    A FlipView is usually for flipping through imagery like this thing you've seen before:

    Your FlipView is going to show one item at a time, and will fill most of the metro application...

    Monday, May 28, 2012 4:20 PM
  • I'm pretty sure. I have a ListView in my app and upon clicking on a product from the ListView, I'd like to be able to swap up or down to view more products from the product details page. Swap left for more details about the product.

    Thanks for the screenshots provided, but I know well how both controls render and behave.

    Monday, May 28, 2012 8:32 PM
  • I think what you want is a gridview for your horizontal scrolling and a list view for the vertical.  Please post some sort of wire frame or mockup of precisely what this would look like.  That will help others envision exactly what you are trying to achieve and allow us to suggest a best solution.

    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 1:55 PM
  • Below is the scenario. (you can find previously the suggested html).

    Flipping down and up, will flip other products.

    Flipping to the right will show details about the products.

    here is scenario after flipping for more details.

    Tuesday, May 29, 2012 3:13 PM
  • Interesting interface!  I am not sure you can do this at all with the built in controls.  You will need to create your own UI for this I am sure.

    You could place a transparent div above your content and create your own gesture handler to monitor for swipes to the left and top down as a start.  I don't think there are any examples of this but you can search on Gesture handler and see some examples.

    How would this work in a Snap view?  You would definately have to rethink the navigation model for that view.  Just something to think about...

    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 3:38 PM
  • I already tested this interface with xaml using 2 nested FlipViews and static content and it worked.

    I'd like to achieve this using html5/javascript with dynamic content binded using JS.

    I'm sure 2 nested FlipViews as suggested above would work but I don't know how to bind them using JS.

    As for the snap view, I will worry about it later.

    Tuesday, May 29, 2012 3:43 PM
  • Hi Julio,

    You should data bind the way you would normally.  To debug this, first display the two independently on the page (not nested) to ensure you have the databinding correct.  You will probably be able to spot your problem that way much easier.

    Why not use the XAML?  Note that the XAML control is different than the WinJS control so it is possible you could do it in XAML but not WinJS.


    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 6:30 PM
  • Working with web development using .NET Framework, I know that binding nested controls such as gridviews used to be different from binding them seperatly. At least the way to find the nested grid by code and assign the appropriate data to it.

    The data used to be passed on RowDataBound of each row in the grid to the nested grid.

    In this case, there must be a way to select the subFlipView and assign data to it.

    Im sure it exists but I can't find the synthax.

    Tuesday, May 29, 2012 8:14 PM