CODEWITHSUNDEEP
listviewwindows-phone-8windows-phonewinjs
Awais Tariq
Awais Tariq

Reputation: 7754

Custom Size Winjs Listview Items Winjs WP

I am new to Winjs, previously worked on Android and iOS development.

I need to make a listview with custom sized items as shown in http://try.buildwinjs.com/#listview:customlayout I have implemented this but in my windows phone the basic listitem size remain same, only the content size gets different. Follow the screen shot for visuals: enter image description here

Can anybody tell me how can this be achieved. I have studied cell spaining also. But couldn't understand it properly.

Thanks

Upvotes: 1

Views: 113

Answers (1)

DeividKamui
DeividKamui

Reputation: 392

You need to create an itemTemplate like this:

<div id="lstTemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">

        <img class="image" src="/images/Store.png" />

        <p class="lblName" data-win-bind="textContent:Name"></p>

        <p class="lblPrice" data-win-bind="textContent:Price"></p>

    </div>
</div>

<div id="lstMain"
                 class="lstContainer"
                 data-win-control="WinJS.UI.ListView"
                 data-win-options="{
                 itemDataSource:DataFinal.listItems.dataSource,
                 itemTemplate:select('#lstTemplate'),
                 layout:{type:WinJS.UI.ListLayout}}">
 </div>

and then with CSS you can format the height of the item like this:

.fragmentPrincipal .lstContainer .item {
   height: 21.6875em;
}

Note: Remember to add a namespace class to you CSS, so your styles are not overridden once you navigated to another page

If you are targeting all windows phone resolutions I recommend that you use less in order to easily add the landscape and portrait style, also remember to scale all the images so you app can be rendered correctly on all WP resolutions

Upvotes: 2

Related Questions