locked
i use GridLayout to create a listview,every column have a same width?

    Question

  • i create a listview, and Layout set the GridLayout, maxRows = 1, then i set the Template like this

    function ChapterTemplate(itemPromise) {
        return itemPromise.then(function (currentItem) {
            //章容器

            var result = document.createElement("div");
            if (currentItem.index == 0) {
                result.className = "ChapterTemplateClassFirst";
            }
            else {
                result.className = "ChapterTemplateClass";
            }

    .................

    and CSS:

    .ChapterTemplateClass {
        width: 460px;
        margin-left: 20px;
    }

    .ChapterTemplateClassFirst {
        width: 460px;
        margin-left: 120px;
    }

    the result is every column in the listview have a same width

    |****content|*content***|*content***|*content***|*content***|

    i want to show the listview like this

    |****content|*content|*content|*content|*content|

    how can i do this.

    thanks!



    Wednesday, April 18, 2012 6:48 AM

Answers

  • You have specified the width for both classes to be 460px.  Try width: auto; for the ChapterTemplateClass.  (Or omit the width declaration since it should be auto by default.) 
    • Marked as answer by Bob_Bao Monday, April 30, 2012 8:29 AM
    Wednesday, April 18, 2012 1:17 PM
  • Are you saying you want the first item only to be larger?

    If so:

    To make the first item larger you need to simply set a CSS style for the first item.  See: http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1006   About 48 Minutes into the talk sets up the stage and you will see how to do this.  You set a class based CSS selector and then you can set the left margin of the first item. (50:30 into the talk)

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, April 18, 2012 2:20 PM
    Moderator

All replies

  • You have specified the width for both classes to be 460px.  Try width: auto; for the ChapterTemplateClass.  (Or omit the width declaration since it should be auto by default.) 
    • Marked as answer by Bob_Bao Monday, April 30, 2012 8:29 AM
    Wednesday, April 18, 2012 1:17 PM
  • Are you saying you want the first item only to be larger?

    If so:

    To make the first item larger you need to simply set a CSS style for the first item.  See: http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1006   About 48 Minutes into the talk sets up the stage and you will see how to do this.  You set a class based CSS selector and then you can set the left margin of the first item. (50:30 into the talk)

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, April 18, 2012 2:20 PM
    Moderator