locked
Custom Column Elements (not just CSS) in ListView?

    Question

  • First timer here. I am attempting to create an app that requires four columns:

    -----

    Column 1)
    ~15 custom elements (mostly text/typography) that have nothing in common with the listview template

    Column 2)

    Items populated via the listview template

    Column 3)

    Items populated via the listview template

    Column 4)

    An abbreviated version of the listview template (half the height primarily).

    -----

    Based on my understanding of how ListView works (generates absolutely positioned containers holding the template items), I'm suspicious that what I'm attempting to achieve is impossible short of injecting new HTML into Column 1 after the ListView has rendered a dummy object for me to target. If that's indeed the case, what's the best way for me approach this issue? Basically all that I'm looking for is the ability to add a custom column/div that would scroll with the rest of the page. Ideally it would be nice to do something similar for Column 4 (simply applying custom CSS in that case). I'd initially just tried to hard-code the layout myself as I would with a website, but I was finding it difficult to get horizontal scrolling to work properly and I'd lose some of the subtle animation that the UI controls seem to offer.

    Edit: Actually, I just did get horizontal scrolling working well in the hard-coded version. Is there any particular best-practice sort of reason that I should use a WinJS.UI control for this over a custom script/HTML and using CSS3 to mimic the subtle animations?



    • Edited by BallistaMan Friday, August 17, 2012 12:15 AM
    Thursday, August 16, 2012 11:12 PM

Answers

  • Hi,

    So you've made your hard coded version work. If you want a better approach, you can also use the CSS grid layout and define 4 columns. Dynamically measure the width of the first column based on its contents, and use JavaScript code to modify the CSS style for the first column's width.

    As for why using ListView instead of custom HTML, the most convincing reason is it allows you to achieve the system defined layout without too much effort, and it integrates with WinJS data binding system. You can also write custom HTML. Consider WinJS as a JavaScript library provided by Microsoft that is optimized for New Windows 8-style apps environment.

    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

    • Proposed as answer by Dino He Friday, September 14, 2012 9:15 AM
    • Marked as answer by Dino He Monday, September 24, 2012 2:49 AM
    Wednesday, August 29, 2012 3:34 PM
    Moderator

All replies

  • HI

    Could you please use a picture tell us what do you want to do?

    Thanks

    Friday, August 17, 2012 6:29 AM
  • Hi,

    So you've made your hard coded version work. If you want a better approach, you can also use the CSS grid layout and define 4 columns. Dynamically measure the width of the first column based on its contents, and use JavaScript code to modify the CSS style for the first column's width.

    As for why using ListView instead of custom HTML, the most convincing reason is it allows you to achieve the system defined layout without too much effort, and it integrates with WinJS data binding system. You can also write custom HTML. Consider WinJS as a JavaScript library provided by Microsoft that is optimized for New Windows 8-style apps environment.

    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

    • Proposed as answer by Dino He Friday, September 14, 2012 9:15 AM
    • Marked as answer by Dino He Monday, September 24, 2012 2:49 AM
    Wednesday, August 29, 2012 3:34 PM
    Moderator
  • Glad you got it working.  If you want some cool animations, you can also do that:

    http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, August 29, 2012 7:29 PM
    Moderator