Override the default layout of a split Javascript win 8 app


  • Hi,

    So I want to show a list view on the left hand side of the split.html and on click of which , i should be able to show another list on right hand side , instead of the article section ,which in turn directs me to another page,  the right hand side list should come with some animation.How should I do it ? I have been able to show a list on click of any of the items in left hand side list , but then the outcome comes on the left only and not right.

    Tuesday, February 26, 2013 6:46 AM


  • Hi kavya,

    For the built-in windows store javascript app project templates (such as split app, grid app...), they use grid layout (through the -ms-grid css position) to structure the html page. You can check the auto-generated css files for the windows store app's pages to see how it define the position of the entire page and UI elements on it. Generally, it just define rows and columns and specify certain UI elements (like ListView, article to sit in the certain cells). Here are some reference about the winows store html 5 app's layout and grid layout position:

    #Part 4: Layout and views (Windows Store apps using JavaScript and HTML) (Windows)

    #Choosing a layout (Windows Store apps using JavaScript and HTML) (Windows)

    #Grid layout (Windows)

    For your scenario, I think you can consider the following two approaches:

    1. Use css to separate your page into left and right (just like the default one), each of them contains a ListView. When user click the left one, you make the right ListView visible (hidden by default). and you can add some animation effect like fading in and fading out when turn the ListView from hidden to visible.

    2. Instead of put the right ListView in the right column. You can also show the right ListView by displaying a flyout window and let the flyout window appear at the right side of the left ListView control. There is built-in flyout window support in windows store app:

    #Quickstart: adding a Flyout(Windows Store apps using JavaScript and HTML) (Windows)

    #HTML flyout control sample


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, March 4, 2013 10:28 AM
    Wednesday, February 27, 2013 4:00 AM