locked
Can we customize the width of the win-container in the listview 's itemTemplate ?

    Question

  •  

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> <div style="width: 150px; height: 100px;"> <!-- Displays the "picture" field. --> <img src="#" data-win-bind="alt: title; src: picture" /> <div> <!-- Displays the "title" field. --> <h4 data-win-bind="innerText: title"></h4> <!-- Displays the "text" field. --> <h6 data-win-bind="innerText: text"></h6> </div> </div> </div> <div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}" > </div>

    Now ,I don't want to appoint the width of  img( <img src="#"   data-win-bind="alt: title; src: picture" />), Because my photos 'width and height is different between each other,so I set the fixed height of the photo in the listview, 
    and the width is "auto",but the width of win-container in the listview is appoint by the system, so the photo in the listview couldn't array with the breadth of adaptive ,How do solve the problem?
    Wednesday, December 12, 2012 5:32 AM

Answers

  • Hi,

    You could change the .win-listview style in ui-light.css or ui-dark.css.

    Open the References section, expand CSS, and you will find that. Any more question, please feel free to reply.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    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 Tuesday, December 18, 2012 8:10 AM
    Wednesday, December 12, 2012 11:22 AM
  • What he means is that you can override that style in your own CSS file. You cannot modify the CSS in the ui-dark.css / ui-light.css files.

    You can get those files by going to the Solution Explorer window in Visual Studio, looking at the top of the explorer underneath your project for an item called "References" it'll have a disclosure widget (little arrow) beside the name, and you can click that to see what is in your project's references. Inside of those references, you'll have two folders, one for JS and one for CSS. If you look inside the CSS folder you'll see those two files mentioned earlier.

    • Marked as answer by Song Tian Tuesday, December 18, 2012 8:10 AM
    Wednesday, December 12, 2012 3:24 PM

All replies

  • Hi,

    You could change the .win-listview style in ui-light.css or ui-dark.css.

    Open the References section, expand CSS, and you will find that. Any more question, please feel free to reply.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    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 Tuesday, December 18, 2012 8:10 AM
    Wednesday, December 12, 2012 11:22 AM
  • Hi,do you mean that I can modify the .win-listview style  in the ui-dark.css? And I don't understand what you mean the Rerences ,expand CSS,could you explain more detailed?Thanks!
    Wednesday, December 12, 2012 1:47 PM
  • Hi,

    You could find that in your project reference.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, December 12, 2012 1:52 PM
  • What he means is that you can override that style in your own CSS file. You cannot modify the CSS in the ui-dark.css / ui-light.css files.

    You can get those files by going to the Solution Explorer window in Visual Studio, looking at the top of the explorer underneath your project for an item called "References" it'll have a disclosure widget (little arrow) beside the name, and you can click that to see what is in your project's references. Inside of those references, you'll have two folders, one for JS and one for CSS. If you look inside the CSS folder you'll see those two files mentioned earlier.

    • Marked as answer by Song Tian Tuesday, December 18, 2012 8:10 AM
    Wednesday, December 12, 2012 3:24 PM
  • But what I want the win-container's width is dynamic changes, I see other people use : var groupInfo = WinJS.Utilities.markSupportedForProcessing(function groupInfo() { return { enableCellSpanning: true, cellWidth: 5, cellHeight: 160 }; }); but I don't want to set the fixed type like this ".smallListIconTextItem { width: 300px; height: 70px; padding: 5px; overflow: hidden; background-color: Pink; display: -ms-grid; } /* Medium size */ .mediumListIconTextItem { width: 300px; height: 160px; padding: 5px; overflow: hidden; background-color: LightGreen; display: -ms-grid; } /* Large size */ .largeListIconTextItem { width: 300px; height: 250px; padding: 5px; overflow: hidden; background-color: LightBlue; display: -ms-grid; }" ,because of the picture in my listview is different between each other .Any good ideas?
    Thursday, December 13, 2012 2:04 AM
  • define grid in item template, and declare a empty grid cell to the right of the template, then you can see you design  up some width and the remaining is filled with empty cell. but here the scroll bar will be located right to empty cell only :)

    Thursday, December 13, 2012 4:46 AM