locked
ListView in ListLayout mode with variable height items

    Question

  • How do I create a ListView using the ListLayout mode and with variable heights for elements...  Think of this as a list book titles and some book titles are long and take 2 lines, so I want the item to change height accordingly...  How do I do that?

    www.emadibrahim.com

    Sunday, May 27, 2012 4:44 PM

Answers

All replies

  • Hi,

    According to http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx, “There's one thing that you must always do in your template, and that's set the size of your items. If you don't set the size of your items, you might not get the layout you want.” So I don't think we can use a ListView to achieve the goal. We can try to use JavaScript to dynamically change each item’s size, but as the document warns, this may lead to undesired layout behaviors.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Monday, May 28, 2012 8:14 AM
    Moderator
  • Yes,When we adjusted the height using java script for individual items, then the items are overlapping and the smaller items are displaying with long spaces inbetween them.The gap is equal to the size of the biggest item height in the list.
    Monday, May 28, 2012 8:29 AM
  • So, I used a rendering method and I dynamicall change the height of each element as it is rendered but that doesn't work...  It seems to only set the height for the first item and every other item uses the height of the first item...

    Why is this so complicated?  It is a very simple feature that listboxes can have varied item heights!!!  Any other tips or help?

    Thanks.


    www.emadibrahim.com

    Monday, May 28, 2012 7:10 PM
  • Check out the other thread on it:

    ListView with diffent item templates
    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/bfe4ee9e-366e-4142-a657-0495e3ef2f52

    Monday, May 28, 2012 7:22 PM
  • You can use custom templates like this sample: (http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f)

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 7:16 PM
    Moderator
  • You can use custom templates like this sample: (http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f)

    -Jeff


    Jeff Sanders (MSFT)

    Hi, Jeff

       I folow the sample and set groupInfo to the ListLayout, but it seems does not work, only set the height for the first item and every other item uses the height of the first item; when I set the layout to GridLayout, it works fine.  The groupInfo is as below:

    function groupInfo() {
        return {
            multiSize: true,
            slotWidth: 310,
            slotHeight: 160
        };
    }

    do I set the incorrect properties in groupInfo? Can you tel me where I can find more information about groupInfo? thank you!

    Wednesday, May 30, 2012 2:37 AM
  • Hi Fredrain,

    I do see that the listview will not apply the different heights.  The style on the outside div is set to a smaller height.  I will investigate further if there is anything that can be done to work around this.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 06, 2012 11:47 AM
    Moderator
  • Has this problem with ListLayout and groupInfo been resolved?

    groupInfo works perfectly for GridLayout but does not work for ListLayout as is in the docs.

    listView.layout = new ui.ListLayout({ groupInfo: groupInfo });     This renders all win-containers the same size.

    listView.layout.groupInfo = groupInfo;    This leaves the ListView perpetually loading.

    Is there a solution?

    Thursday, June 28, 2012 4:24 PM
  • I couldn't do it.  I used a jquery plugin instead :(

    www.emadibrahim.com

    Thursday, June 28, 2012 4:49 PM
  • This is a huge issue with the ListView.  Makes it pretty much unuseable in any scenario where you have line items of varying heights.  I get that this control was mainly meant to provide a way to do horizontal Metro-style tile layouts, but we need some horizontal control that allows varying sizes for the row items and just figures it out.  This isn't that hard, table layout has been doing it for ages.  After using ListView quite extensively on some early project work (pre-RTM), the control seems really half-baked.  This should be fixed before RTM.
    Wednesday, August 01, 2012 2:44 PM
  • Is there any update for this issue?

    We need different heights of items in a ListView with ListLayout.

    Friday, October 26, 2012 7:28 AM