locked
How can I change the Template of a Windows Store App?

    Question

  • I have designed this template with: Grid App

    But I have some problems because the large options are items and I need that those ones should be groups in order to show the Dishes, Drinks, for example.

    I'd like to know what I should change in the groupedItem.js in order to show groups in the large options and no items:


    Federico Navarrete


    • Edited by FANMixco Sunday, December 30, 2012 6:36 PM Question
    Sunday, December 30, 2012 5:39 PM

Answers

  •  

    Hi FANMixco,

    From your description, you're using the "Grid App" windows store javavscript project template. Then, the "groupedItem.js" file you mentioned should be the code file for the groupedItems.html page. This script file will contains the code which call functions on data helper class to retrieve the grouped data source items and bind them to the ListView control in the page html.

    For your case, if you want to change the items to display in the ListView's item template (and maybe also the group header template), I think you should first take a look at the "data.js" file under "js" folder of your Grid App project. I'm not sure how much have you changed the default project generated code. By default, the data.js file contains all the data (include groups and items ) definition which are used to populate the ListView (group and items sections). So you can just change the data properties of those groups and items objects so that the change will be reflected in the ListView UI on pages. Or if you also want to modify the variable names (used to hold the groups and items array references), you will also need to change the corresonding data binding code in the certain page's js code (like the groupedItems.js file you mentioned).

    Here is the MSDN reference talking about the built-in project templates for windows store app:


    #JavaScript project templates for Windows Store apps (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758331.aspx


    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 Friday, January 04, 2013 9:41 AM
    Monday, December 31, 2012 6:21 AM
    Moderator

All replies

  • # In GroupedItems.js, add a function to ui.Pages.define that returns an array of HTML elements. This function provides the header and the page section that contains the grid view.
    getAnimationElements: function () {
        return [[this.element.querySelector("header")], [this.element.querySelector("section")]];
    },
    
    
    #In GroupDetail.js, add a function to ui.Pages.define that returns an array of HTML elements to animate. 
    
    getAnimationElements: function () {
        return [[this.element.querySelector("header")], [this.element.querySelector("section")]];
    },
    
    #In ItemDetail.js, add a function to ui.Pages.define that returns an array of HTML elements to animate. 
    
    getAnimationElements: function () {
        return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
    },
    
    
    
    
    

    for more detail:::

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


    love is rock!!!

    • Proposed as answer by TK MAHATO Sunday, December 30, 2012 7:09 PM
    Sunday, December 30, 2012 7:09 PM
  • Well my problem is not create a new look because I have designed the look my problems is how can I transform the large items into groups? And show their image not the item image. I should look maybe I'll try to use the bar option but it's not what I want :/

    Federico Navarrete

    Sunday, December 30, 2012 7:41 PM
  •  

    Hi FANMixco,

    From your description, you're using the "Grid App" windows store javavscript project template. Then, the "groupedItem.js" file you mentioned should be the code file for the groupedItems.html page. This script file will contains the code which call functions on data helper class to retrieve the grouped data source items and bind them to the ListView control in the page html.

    For your case, if you want to change the items to display in the ListView's item template (and maybe also the group header template), I think you should first take a look at the "data.js" file under "js" folder of your Grid App project. I'm not sure how much have you changed the default project generated code. By default, the data.js file contains all the data (include groups and items ) definition which are used to populate the ListView (group and items sections). So you can just change the data properties of those groups and items objects so that the change will be reflected in the ListView UI on pages. Or if you also want to modify the variable names (used to hold the groups and items array references), you will also need to change the corresonding data binding code in the certain page's js code (like the groupedItems.js file you mentioned).

    Here is the MSDN reference talking about the built-in project templates for windows store app:


    #JavaScript project templates for Windows Store apps (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758331.aspx


    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 Friday, January 04, 2013 9:41 AM
    Monday, December 31, 2012 6:21 AM
    Moderator